@kong-ui-public/dashboard-renderer 0.34.3 → 0.35.0

package/dist/dashboard-renderer.es.js

@@ -1,57 +1,57 @@
-import { ref as O, watchEffect as le, inject as B, defineComponent as k, onUnmounted as te, computed as g, watch as ue, resolveComponent as N, unref as l, openBlock as d, createBlock as _, withCtx as b, createTextVNode as U, toDisplayString as L, renderSlot as V, createCommentVNode as S, useCssVars as G, createElementVNode as K, createVNode as F, mergeProps as re, createSlots as ae, createElementBlock as R, normalizeProps as de, guardReactiveProps as pe, resolveDynamicComponent as ye, onMounted as he, Fragment as me, renderList as fe, normalizeClass as ve, normalizeStyle as Q } from "vue";
-import { stripUnknownFilters as ge, Timeframe as _e, TimePeriods as ne, TIMEFRAME_LOOKUP as qe, formatTime as J, msToGranularity as be } from "@kong-ui-public/analytics-utilities";
-import { SimpleChart as Ee, AnalyticsChart as Ce, TopNTable as Ie, CsvExportModal as Te } from "@kong-ui-public/analytics-chart";
-import Se from "swrv";
+import { ref as U, watchEffect as Oe, inject as j, defineComponent as M, onUnmounted as le, computed as S, watch as Ee, resolveComponent as W, unref as x, openBlock as E, createBlock as T, withCtx as H, createTextVNode as re, toDisplayString as G, renderSlot as ne, createCommentVNode as I, useCssVars as oe, createElementVNode as K, createVNode as $, mergeProps as xe, createSlots as Ce, createElementBlock as L, normalizeProps as Me, guardReactiveProps as Ie, resolveDynamicComponent as Re, onMounted as De, Fragment as ze, renderList as Se, normalizeClass as Pe, normalizeStyle as fe } from "vue";
+import { stripUnknownFilters as Be, Timeframe as qe, TimePeriods as Te, TIMEFRAME_LOOKUP as Ue, formatTime as ge, msToGranularity as $e } from "@kong-ui-public/analytics-utilities";
+import { SimpleChart as Fe, AnalyticsChart as Ge, TopNTable as We, CsvExportModal as Ke } from "@kong-ui-public/analytics-chart";
+import Ve from "swrv";
 import "axios";
-import { createI18n as Re, i18nTComponent as ke } from "@kong-ui-public/i18n";
-import { MetricsProvider as Ae, MetricsConsumer as De } from "@kong-ui-public/analytics-metric-provider";
-import { EntityLink as xe } from "@kong-ui-public/entities-shared";
-import { EditIcon as we, MoreIcon as Oe } from "@kong/icons";
-import { useAnalyticsConfigStore as Fe } from "@kong-ui-public/analytics-config-store";
-var oe = /* @__PURE__ */ ((a) => (a.VALIDATING = "VALIDATING", a.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", a.PENDING = "PENDING", a.SUCCESS = "SUCCESS", a.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", a.ERROR = "ERROR", a.STALE_IF_ERROR = "STALE_IF_ERROR", a))(oe || {});
-const $e = (a) => {
-  var t, e, r, s, o;
-  return a ? !!// TODO: revisit: currently only the first check ever matters?
-  ((t = Object.keys(a)) != null && t.length || (e = a.data) != null && e.length || (s = (r = a.data) == null ? void 0 : r.data) != null && s.length || !((o = a.data) != null && o.data) && typeof a.data == "object" && Object.keys(a == null ? void 0 : a.data).length) : !1;
+import { createI18n as Ye, i18nTComponent as Xe } from "@kong-ui-public/i18n";
+import { MetricsProvider as je, MetricsConsumer as Qe } from "@kong-ui-public/analytics-metric-provider";
+import { EntityLink as Je } from "@kong-ui-public/entities-shared";
+import { EditIcon as Ze, MoreIcon as et } from "@kong/icons";
+import { useAnalyticsConfigStore as tt } from "@kong-ui-public/analytics-config-store";
+var ke = /* @__PURE__ */ ((c) => (c.VALIDATING = "VALIDATING", c.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", c.PENDING = "PENDING", c.SUCCESS = "SUCCESS", c.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", c.ERROR = "ERROR", c.STALE_IF_ERROR = "STALE_IF_ERROR", c))(ke || {});
+const it = (c) => {
+  var e, t, i, s, r;
+  return c ? !!// TODO: revisit: currently only the first check ever matters?
+  ((e = Object.keys(c)) != null && e.length || (t = c.data) != null && t.length || (s = (i = c.data) == null ? void 0 : i.data) != null && s.length || !((r = c.data) != null && r.data) && typeof c.data == "object" && Object.keys(c == null ? void 0 : c.data).length) : !1;
 };
-function Le(a = O({}), t, e, r = $e) {
-  const s = O(
+function st(c = U({}), e, t, i = it) {
+  const s = U(
     "PENDING"
     /* PENDING */
   );
-  return le(() => {
-    const o = r(a.value);
-    if (a.value && o && e.value) {
+  return Oe(() => {
+    const r = i(c.value);
+    if (c.value && r && t.value) {
       s.value = "VALIDATING_HAS_DATA";
       return;
     }
-    if (a.value && e.value) {
+    if (c.value && t.value) {
       s.value = "VALIDATING";
       return;
     }
-    if (a.value && t.value) {
+    if (c.value && e.value) {
       s.value = "STALE_IF_ERROR";
       return;
     }
-    if (a.value === void 0 && !t.value) {
+    if (c.value === void 0 && !e.value) {
       s.value = "PENDING";
       return;
     }
-    if (a.value && !t.value && o) {
+    if (c.value && !e.value && r) {
       s.value = "SUCCESS_HAS_DATA";
       return;
     }
-    if (a.value && !t.value) {
+    if (c.value && !e.value) {
       s.value = "SUCCESS";
       return;
     }
-    a.value === void 0 && t && (s.value = "ERROR");
+    c.value === void 0 && e && (s.value = "ERROR");
   }), {
     state: s,
-    swrvState: oe
+    swrvState: ke
   };
 }
-const Ne = {
+const rt = {
   noQueryBridge: "No query bridge provided.  Unable to render dashboard.",
   trendRange: {
     "24h": "Last 24-Hour Summary",
@@ -59,36 +59,36 @@ const Ne = {
     "30d": "Last 30-Day Summary"
   },
   edit: "Edit"
-}, ze = {
+}, nt = {
   timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
-}, Ke = {
+}, ot = {
   defaultFilename: "Chart Export",
   exportAsCsv: "Export as CSV"
-}, Be = "Explore", Pe = {
-  renderer: Ne,
-  queryDataProvider: ze,
-  csvExport: Ke,
-  jumpToExplore: Be
+}, at = "Explore", lt = {
+  renderer: rt,
+  queryDataProvider: nt,
+  csvExport: ot,
+  jumpToExplore: at
 };
-function Me() {
-  const a = Re("en-us", Pe);
+function ht() {
+  const c = Ye("en-us", lt);
   return {
-    i18n: a,
-    i18nT: ke(a)
+    i18n: c,
+    i18nT: Xe(c)
     // Translation component <i18n-t>
   };
 }
-const H = 170, P = "analytics-query-provider", Z = "{entity-id}", Ue = "{cp-id}", Ge = "{timeframe}", Ve = 30 * 1e3;
-function He() {
-  const a = B(P);
+const he = 170, Q = "analytics-query-provider", pe = "{entity-id}", dt = "{cp-id}", ut = "{timeframe}", ct = 30 * 1e3;
+function ft() {
+  const c = j(Q);
   return {
-    evaluateFeatureFlag: (e, r) => a ? a.evaluateFeatureFlagFn(e, r) : r
+    evaluateFeatureFlag: (t, i) => c ? c.evaluateFeatureFlagFn(t, i) : i
   };
 }
-const $ = {
-  useI18n: Me,
-  useEvaluateFeatureFlag: He
-}, j = /* @__PURE__ */ k({
+const F = {
+  useI18n: ht,
+  useEvaluateFeatureFlag: ft
+}, de = /* @__PURE__ */ M({
   __name: "QueryDataProvider",
   props: {
     context: {},
@@ -97,74 +97,74 @@ const $ = {
     refreshCounter: {}
   },
   emits: ["chart-data", "queryComplete"],
-  setup(a, { emit: t }) {
-    const e = a, r = t, { i18n: s } = $.useI18n(), o = B(P), c = () => e.queryReady && o ? JSON.stringify([e.query, e.context, e.refreshCounter]) : null, i = new AbortController();
-    te(() => {
-      i.abort();
+  setup(c, { emit: e }) {
+    const t = c, i = e, { i18n: s } = F.useI18n(), r = j(Q), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, n = new AbortController();
+    le(() => {
+      n.abort();
     });
-    const u = (p, v, T) => {
-      const C = [];
-      return v && C.push(...v), C.push(...ge(p, T)), C;
-    }, { data: y, error: D, isValidating: x } = Se(c, async () => {
-      var p, v, T, C;
+    const l = (w, C, D) => {
+      const z = [];
+      return C && z.push(...C), z.push(...Be(w, D)), z;
+    }, { data: h, error: d, isValidating: u } = Ve(o, async () => {
+      var w, C, D, z;
       try {
         let {
-          datasource: f,
-          ...n
-        } = e.query;
-        f || (f = "basic");
-        const A = u(f, e.query.filters, e.context.filters);
-        let q = e.query.time_range;
-        q ? q.tz || (q = {
-          ...q,
-          tz: e.context.tz
-        }) : q = {
-          ...e.context.timeSpec,
-          tz: e.context.tz
+          datasource: R,
+          ...y
+        } = t.query;
+        R || (R = "basic");
+        const q = l(R, t.query.filters, t.context.filters);
+        let N = t.query.time_range;
+        N ? N.tz || (N = {
+          ...N,
+          tz: t.context.tz
+        }) : N = {
+          ...t.context.timeSpec,
+          tz: t.context.tz
         };
-        const M = {
-          datasource: f,
+        const J = {
+          datasource: R,
           query: {
-            ...n,
-            time_range: q,
-            filters: A
+            ...y,
+            time_range: N,
+            filters: q
           }
         };
-        return o == null ? void 0 : o.queryFn(M, i);
-      } catch (f) {
-        w.value = ((v = (p = f == null ? void 0 : f.response) == null ? void 0 : p.data) == null ? void 0 : v.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((C = (T = f == null ? void 0 : f.response) == null ? void 0 : T.data) == null ? void 0 : C.message) || (f == null ? void 0 : f.message);
+        return r == null ? void 0 : r.queryFn(J, n);
+      } catch (R) {
+        v.value = ((C = (w = R == null ? void 0 : R.response) == null ? void 0 : w.data) == null ? void 0 : C.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((z = (D = R == null ? void 0 : R.response) == null ? void 0 : D.data) == null ? void 0 : z.message) || (R == null ? void 0 : R.message);
       } finally {
-        r("queryComplete");
+        i("queryComplete");
       }
     }, {
-      refreshInterval: e.context.refreshInterval,
+      refreshInterval: t.context.refreshInterval,
       revalidateOnFocus: !1
-    }), { state: m, swrvState: I } = Le(y, D, x), w = O(null), h = g(() => m.value === I.ERROR || !!w.value), E = g(() => !e.queryReady || m.value === I.PENDING);
-    return ue(y, (p) => {
-      p && r("chart-data", p);
-    }), (p, v) => {
-      const T = N("KSkeleton"), C = N("KEmptyState");
-      return E.value || !l(y) && !h.value ? (d(), _(T, {
+    }), { state: f, swrvState: _ } = st(h, d, u), v = U(null), b = S(() => f.value === _.ERROR || !!v.value), p = S(() => !t.queryReady || f.value === _.PENDING);
+    return Ee(h, (w) => {
+      w && i("chart-data", w);
+    }), (w, C) => {
+      const D = W("KSkeleton"), z = W("KEmptyState");
+      return p.value || !x(h) && !b.value ? (E(), T(D, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : h.value ? (d(), _(C, {
+      })) : b.value ? (E(), T(z, {
         key: 1,
         "action-button-visible": !1,
         "data-testid": "chart-empty-state",
         "icon-variant": "error"
       }, {
-        default: b(() => [
-          U(L(w.value), 1)
+        default: H(() => [
+          re(G(v.value), 1)
         ]),
         _: 1
-      })) : l(y) ? V(p.$slots, "default", {
+      })) : x(h) ? ne(w.$slots, "default", {
         key: 2,
-        data: l(y)
-      }) : S("", !0);
+        data: x(h)
+      }) : I("", !0);
     };
   }
-}), je = { class: "analytics-chart" }, Qe = /* @__PURE__ */ k({
+}), gt = { class: "analytics-chart" }, pt = /* @__PURE__ */ M({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -174,35 +174,35 @@ const $ = {
     height: {},
     refreshCounter: {}
   },
-  setup(a) {
-    G((e) => ({
-      c40c0e86: `${e.height}px`
+  setup(c) {
+    oe((t) => ({
+      c40c0e86: `${t.height}px`
     }));
-    const t = a;
-    return (e, r) => (d(), _(j, {
-      context: e.context,
-      query: e.query,
-      "query-ready": e.queryReady,
-      "refresh-counter": e.refreshCounter
+    const e = c;
+    return (t, i) => (E(), T(de, {
+      context: t.context,
+      query: t.query,
+      "query-ready": t.queryReady,
+      "refresh-counter": t.refreshCounter
     }, {
-      default: b(({ data: s }) => [
-        K("div", je, [
-          F(l(Ee), {
+      default: H(({ data: s }) => [
+        K("div", gt, [
+          $(x(Fe), {
             "chart-data": s,
-            "chart-options": t.chartOptions,
-            "synthetics-data-key": e.chartOptions.syntheticsDataKey
+            "chart-options": e.chartOptions,
+            "synthetics-data-key": t.chartOptions.syntheticsDataKey
           }, null, 8, ["chart-data", "chart-options", "synthetics-data-key"])
         ])
       ]),
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), z = (a, t) => {
-  const e = a.__vccOpts || a;
-  for (const [r, s] of t)
-    e[r] = s;
-  return e;
-}, Je = /* @__PURE__ */ z(Qe, [["__scopeId", "data-v-694cf637"]]), Ze = { class: "analytics-chart" }, We = /* @__PURE__ */ k({
+}), V = (c, e) => {
+  const t = c.__vccOpts || c;
+  for (const [i, s] of e)
+    t[i] = s;
+  return t;
+}, mt = /* @__PURE__ */ V(pt, [["__scopeId", "data-v-694cf637"]]), yt = { class: "analytics-chart" }, _t = /* @__PURE__ */ M({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -214,56 +214,56 @@ const $ = {
     extraProps: {}
   },
   emits: ["edit-tile", "chart-data"],
-  setup(a, { emit: t }) {
-    const e = a, r = t, s = B(P), { i18n: o } = $.useI18n(), { evaluateFeatureFlag: c } = $.useEvaluateFeatureFlag(), i = c("ma-3043-analytics-chart-kebab-menu", !1), u = g(() => ({
-      type: e.chartOptions.type,
-      stacked: e.chartOptions.stacked ?? !1,
-      chartDatasetColors: e.chartOptions.chartDatasetColors,
-      threshold: e.chartOptions.threshold
-    })), y = g(() => {
+  setup(c, { emit: e }) {
+    const t = c, i = e, s = j(Q), { i18n: r } = F.useI18n(), { evaluateFeatureFlag: o } = F.useEvaluateFeatureFlag(), n = o("ma-3043-analytics-chart-kebab-menu", !1), l = S(() => ({
+      type: t.chartOptions.type,
+      stacked: t.chartOptions.stacked ?? !1,
+      chartDatasetColors: t.chartOptions.chartDatasetColors,
+      threshold: t.chartOptions.threshold
+    })), h = S(() => {
       if (s && s.exploreBaseUrl) {
-        const m = {
-          filters: [...e.context.filters, ...e.query.filters ?? []],
-          metrics: e.query.metrics ?? [],
-          dimensions: e.query.dimensions ?? [],
-          time_range: e.query.time_range || e.context.timeSpec
-        }, I = ["advanced", "ai"].includes(e.query.datasource) ? e.query.datasource : "advanced";
-        return `${s.exploreBaseUrl()}?q=${JSON.stringify(m)}&d=${I}&c=${e.chartOptions.type}`;
+        const f = {
+          filters: [...t.context.filters, ...t.query.filters ?? []],
+          metrics: t.query.metrics ?? [],
+          dimensions: t.query.dimensions ?? [],
+          time_range: t.query.time_range || t.context.timeSpec
+        }, _ = ["advanced", "ai"].includes(t.query.datasource) ? t.query.datasource : "advanced";
+        return `${s.exploreBaseUrl()}?q=${JSON.stringify(f)}&d=${_}&c=${t.chartOptions.type}`;
       }
       return "";
-    }), D = () => {
-      r("edit-tile");
-    }, x = (m) => {
-      r("chart-data", m);
+    }), d = () => {
+      i("edit-tile");
+    }, u = (f) => {
+      i("chart-data", f);
     };
-    return (m, I) => {
-      const w = N("KDropdownItem");
-      return d(), _(j, {
-        context: m.context,
-        query: m.query,
-        "query-ready": m.queryReady,
-        "refresh-counter": m.refreshCounter,
-        onChartData: x
+    return (f, _) => {
+      const v = W("KDropdownItem");
+      return E(), T(de, {
+        context: f.context,
+        query: f.query,
+        "query-ready": f.queryReady,
+        "refresh-counter": f.refreshCounter,
+        onChartData: u
       }, {
-        default: b(({ data: h }) => [
-          K("div", Ze, [
-            F(l(Ce), re({
-              "allow-csv-export": m.chartOptions.allowCsvExport,
-              "chart-data": h,
-              "chart-options": u.value,
-              "chart-title": !l(i) && m.chartOptions.chartTitle || "",
-              "go-to-explore": y.value,
+        default: H(({ data: b }) => [
+          K("div", yt, [
+            $(x(Ge), xe({
+              "allow-csv-export": f.chartOptions.allowCsvExport,
+              "chart-data": b,
+              "chart-options": l.value,
+              "chart-title": !x(n) && f.chartOptions.chartTitle || "",
+              "go-to-explore": h.value,
               "legend-position": "bottom",
-              "show-menu": m.context.editable,
-              "synthetics-data-key": m.chartOptions.syntheticsDataKey,
+              "show-menu": f.context.editable,
+              "synthetics-data-key": f.chartOptions.syntheticsDataKey,
               "tooltip-title": ""
-            }, m.extraProps), ae({ _: 2 }, [
-              m.context.editable ? {
+            }, f.extraProps), Ce({ _: 2 }, [
+              f.context.editable ? {
                 name: "menu-items",
-                fn: b(() => [
-                  F(w, { onClick: D }, {
-                    default: b(() => [
-                      U(L(l(o).t("renderer.edit")), 1)
+                fn: H(() => [
+                  $(v, { onClick: d }, {
+                    default: H(() => [
+                      re(G(x(r).t("renderer.edit")), 1)
                     ]),
                     _: 1
                   })
@@ -277,7 +277,7 @@ const $ = {
       }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), ie = /* @__PURE__ */ z(We, [["__scopeId", "data-v-1bc587d3"]]), W = /* @__PURE__ */ k({
+}), Ne = /* @__PURE__ */ V(_t, [["__scopeId", "data-v-1bc587d3"]]), me = /* @__PURE__ */ M({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -287,18 +287,18 @@ const $ = {
     height: {},
     refreshCounter: {}
   },
-  setup(a) {
-    return (t, e) => (d(), _(ie, {
-      "chart-options": t.chartOptions,
-      context: t.context,
+  setup(c) {
+    return (e, t) => (E(), T(Ne, {
+      "chart-options": e.chartOptions,
+      context: e.context,
       "extra-props": { showAnnotations: !1 },
-      height: t.height,
-      query: t.query,
-      "query-ready": t.queryReady,
-      "refresh-counter": t.refreshCounter
+      height: e.height,
+      query: e.query,
+      "query-ready": e.queryReady,
+      "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), Y = /* @__PURE__ */ k({
+}), ye = /* @__PURE__ */ M({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -308,17 +308,17 @@ const $ = {
     height: {},
     refreshCounter: {}
   },
-  setup(a) {
-    return (t, e) => (d(), _(ie, {
-      "chart-options": t.chartOptions,
-      context: t.context,
-      height: t.height,
-      query: t.query,
-      "query-ready": t.queryReady,
-      "refresh-counter": t.refreshCounter
+  setup(c) {
+    return (e, t) => (E(), T(Ne, {
+      "chart-options": e.chartOptions,
+      context: e.context,
+      height: e.height,
+      query: e.query,
+      "query-ready": e.queryReady,
+      "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), Ye = { class: "metric-card-tile-wrapper" }, Xe = /* @__PURE__ */ k({
+}), vt = { class: "metric-card-tile-wrapper" }, bt = /* @__PURE__ */ M({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -328,61 +328,61 @@ const $ = {
     height: {},
     refreshCounter: {}
   },
-  setup(a) {
-    G((c) => ({
-      "926e3b48": l(r) ? "90%" : "100%",
-      "7be2893e": l(r) ? "auto" : "100%",
-      "0d55c162": l(r) ? "100%" : "none"
+  setup(c) {
+    oe((o) => ({
+      "926e3b48": x(i) ? "90%" : "100%",
+      "7be2893e": x(i) ? "auto" : "100%",
+      "0d55c162": x(i) ? "100%" : "none"
     }));
-    const t = a, { evaluateFeatureFlag: e } = $.useEvaluateFeatureFlag(), r = e("ma-3043-analytics-chart-kebab-menu", !1), s = g(() => {
-      const c = t.context.timeSpec;
-      if (c.type === "absolute")
-        return new _e({
+    const e = c, { evaluateFeatureFlag: t } = F.useEvaluateFeatureFlag(), i = t("ma-3043-analytics-chart-kebab-menu", !1), s = S(() => {
+      const o = e.context.timeSpec;
+      if (o.type === "absolute")
+        return new qe({
           key: "custom",
           timeframeText: "custom",
           display: "custom",
-          startCustom: c.start,
-          endCustom: c.end,
-          timeframeLength: () => c.end.getTime() - c.start.getTime(),
+          startCustom: o.start,
+          endCustom: o.end,
+          timeframeLength: () => o.end.getTime() - o.start.getTime(),
           defaultResponseGranularity: "daily",
           dataGranularity: "daily",
           isRelative: !1,
           allowedTiers: ["free", "plus", "enterprise"]
         });
-      const i = ne.get(c.time_range);
-      if (!i)
+      const n = Te.get(o.time_range);
+      if (!n)
         throw new Error("Unknown time range");
-      return i;
-    }), o = g(() => {
-      var i, u;
-      const c = (i = t.query) == null ? void 0 : i.datasource;
-      if (c && c !== "advanced" && c !== "basic")
-        throw new Error(`Invalid datasource value: ${c}`);
+      return n;
+    }), r = S(() => {
+      var n, l;
+      const o = (n = e.query) == null ? void 0 : n.datasource;
+      if (o && o !== "advanced" && o !== "basic")
+        throw new Error(`Invalid datasource value: ${o}`);
       return {
-        datasource: (u = t.query) == null ? void 0 : u.datasource,
+        datasource: (l = e.query) == null ? void 0 : l.datasource,
         overrideTimeframe: s.value,
-        tz: t.context.tz,
-        additionalFilter: t.context.filters,
+        tz: e.context.tz,
+        additionalFilter: e.context.filters,
         // TODO: Decide how to handle metric card filters.
-        longCardTitles: t.chartOptions.longCardTitles,
-        ...!r && { containerTitle: t.chartOptions.chartTitle },
-        ...!r && { description: t.chartOptions.description },
-        percentileLatency: t.chartOptions.percentileLatency,
-        refreshInterval: t.context.refreshInterval,
-        queryReady: t.queryReady,
-        refreshCounter: t.refreshCounter
+        longCardTitles: e.chartOptions.longCardTitles,
+        ...!i && { containerTitle: e.chartOptions.chartTitle },
+        ...!i && { description: e.chartOptions.description },
+        percentileLatency: e.chartOptions.percentileLatency,
+        refreshInterval: e.context.refreshInterval,
+        queryReady: e.queryReady,
+        refreshCounter: e.refreshCounter
       };
     });
-    return (c, i) => (d(), R("div", Ye, [
-      F(l(Ae), de(pe(o.value)), {
-        default: b(() => [
-          F(l(De))
+    return (o, n) => (E(), L("div", vt, [
+      $(x(je), Me(Ie(r.value)), {
+        default: H(() => [
+          $(x(Qe))
         ]),
         _: 1
       }, 16)
     ]));
   }
-}), et = /* @__PURE__ */ z(Xe, [["__scopeId", "data-v-0f571079"]]), X = "#6c7489", ee = "20px", se = "20px", tt = /* @__PURE__ */ k({
+}), wt = /* @__PURE__ */ V(bt, [["__scopeId", "data-v-0f571079"]]), _e = "#6c7489", ve = "20px", He = "20px", Et = /* @__PURE__ */ M({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -392,40 +392,40 @@ const $ = {
     height: {},
     refreshCounter: {}
   },
-  setup(a) {
-    const t = a, { evaluateFeatureFlag: e } = $.useEvaluateFeatureFlag(), r = e("ma-3043-analytics-chart-kebab-menu", !1), s = (o) => {
-      var c;
-      if ((c = t.chartOptions) != null && c.entityLink)
-        if (o.id.includes(":")) {
-          const [i, u] = o.id.split(":");
-          return t.chartOptions.entityLink.replace(Ue, i).replace(Z, u);
+  setup(c) {
+    const e = c, { evaluateFeatureFlag: t } = F.useEvaluateFeatureFlag(), i = t("ma-3043-analytics-chart-kebab-menu", !1), s = (r) => {
+      var o;
+      if ((o = e.chartOptions) != null && o.entityLink)
+        if (r.id.includes(":")) {
+          const [n, l] = r.id.split(":");
+          return e.chartOptions.entityLink.replace(dt, n).replace(pe, l);
         } else
-          return t.chartOptions.entityLink.replace(Z, o.id);
+          return e.chartOptions.entityLink.replace(pe, r.id);
       return "";
     };
-    return (o, c) => (d(), _(j, {
-      context: o.context,
-      query: o.query,
-      "query-ready": o.queryReady,
-      "refresh-counter": o.refreshCounter
+    return (r, o) => (E(), T(de, {
+      context: r.context,
+      query: r.query,
+      "query-ready": r.queryReady,
+      "refresh-counter": r.refreshCounter
     }, {
-      default: b(({ data: i }) => [
-        F(l(Ie), {
-          data: i,
-          description: !l(r) && o.chartOptions.description || "",
-          "synthetics-data-key": o.chartOptions.syntheticsDataKey,
-          title: !l(r) && o.chartOptions.chartTitle || ""
-        }, ae({ _: 2 }, [
-          t.chartOptions.entityLink ? {
+      default: H(({ data: n }) => [
+        $(x(We), {
+          data: n,
+          description: !x(i) && r.chartOptions.description || "",
+          "synthetics-data-key": r.chartOptions.syntheticsDataKey,
+          title: !x(i) && r.chartOptions.chartTitle || ""
+        }, Ce({ _: 2 }, [
+          e.chartOptions.entityLink ? {
             name: "name",
-            fn: b(({ record: u }) => [
-              F(l(xe), {
+            fn: H(({ record: l }) => [
+              $(x(Je), {
                 "entity-link-data": {
-                  id: u.id,
-                  label: u.name,
-                  deleted: u.deleted
+                  id: l.id,
+                  label: l.name,
+                  deleted: l.deleted
                 },
-                "external-link": s(u)
+                "external-link": s(l)
               }, null, 8, ["entity-link-data", "external-link"])
             ]),
             key: "0"
@@ -435,178 +435,178 @@ const $ = {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), rt = ["data-testid"], at = {
+}), xt = ["data-testid"], Ct = {
   key: 0,
   class: "tile-header"
-}, nt = ["data-testid"], ot = ["data-testid"], it = ["data-testid"], st = ["data-testid"], ct = ["data-testid"], lt = /* @__PURE__ */ k({
+}, Rt = ["data-testid"], Dt = ["data-testid"], zt = ["data-testid"], St = ["data-testid"], Tt = ["data-testid"], kt = /* @__PURE__ */ M({
   __name: "DashboardTile",
   props: {
     definition: {},
     context: {},
-    height: { default: H },
+    height: { default: he },
     queryReady: { type: Boolean },
     refreshCounter: {},
     tileId: {}
   },
   emits: ["edit-tile"],
-  setup(a, { emit: t }) {
-    G((n) => ({
-      "4fd5b2d2": `${n.height}px`
+  setup(c, { emit: e }) {
+    oe((y) => ({
+      bb9f837a: `${y.height}px`
     }));
-    const e = parseInt(se, 10), r = a, s = t, o = B(P), { evaluateFeatureFlag: c } = $.useEvaluateFeatureFlag(), { i18n: i } = $.useI18n(), u = c("ma-3043-analytics-chart-kebab-menu", !1), y = O(), D = O(!1), x = g(() => {
-      if (o && o.exploreBaseUrl) {
-        const n = {
-          filters: [...r.context.filters, ...r.definition.query.filters ?? []],
-          metrics: r.definition.query.metrics ?? [],
-          dimensions: r.definition.query.dimensions ?? [],
-          time_range: r.definition.query.time_range || r.context.timeSpec,
-          granularity: r.definition.query.granularity || p.value
-        }, A = ["advanced", "ai"].includes(r.definition.query.datasource) ? r.definition.query.datasource : "advanced";
-        return `${o.exploreBaseUrl()}?q=${JSON.stringify(n)}&d=${A}&c=${r.definition.chart.type}`;
+    const t = parseInt(He, 10), i = c, s = e, r = j(Q), { evaluateFeatureFlag: o } = F.useEvaluateFeatureFlag(), { i18n: n } = F.useI18n(), l = o("ma-3043-analytics-chart-kebab-menu", !1), h = U(), d = U(!1), u = S(() => {
+      if (r && r.exploreBaseUrl) {
+        const y = {
+          filters: [...i.context.filters, ...i.definition.query.filters ?? []],
+          metrics: i.definition.query.metrics ?? [],
+          dimensions: i.definition.query.dimensions ?? [],
+          time_range: i.definition.query.time_range || i.context.timeSpec,
+          granularity: i.definition.query.granularity || w.value
+        }, q = ["advanced", "ai"].includes(i.definition.query.datasource) ? i.definition.query.datasource : "advanced";
+        return `${r.exploreBaseUrl()}?q=${JSON.stringify(y)}&d=${q}&c=${i.definition.chart.type}`;
       }
       return "";
-    }), m = g(() => i.t("csvExport.defaultFilename")), I = g(() => u && !["golden_signals", "top_n", "gauge"].includes(r.definition.chart.type)), w = {
-      timeseries_line: Y,
-      timeseries_bar: Y,
-      horizontal_bar: W,
-      vertical_bar: W,
-      gauge: Je,
-      golden_signals: et,
-      top_n: tt,
+    }), f = S(() => n.t("csvExport.defaultFilename")), _ = S(() => l && !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), v = {
+      timeseries_line: ye,
+      timeseries_bar: ye,
+      horizontal_bar: me,
+      vertical_bar: me,
+      gauge: mt,
+      golden_signals: wt,
+      top_n: Et,
       slottable: void 0
-    }, h = g(() => {
-      const n = w[r.definition.chart.type];
-      return n && {
-        component: n,
+    }, b = S(() => {
+      const y = v[i.definition.chart.type];
+      return y && {
+        component: y,
         rendererProps: {
-          query: r.definition.query,
-          context: r.context,
-          queryReady: r.queryReady,
-          chartOptions: r.definition.chart,
-          height: r.height - e * 2,
-          refreshCounter: r.refreshCounter
+          query: i.definition.query,
+          context: i.context,
+          queryReady: i.queryReady,
+          chartOptions: i.definition.chart,
+          height: i.height - t * 2,
+          refreshCounter: i.refreshCounter
         }
       };
-    }), E = g(() => {
-      var A;
-      const n = (A = r.definition.query) == null ? void 0 : A.time_range;
-      if ((n == null ? void 0 : n.type) === "relative") {
-        const q = ne.get(qe[n.time_range]);
-        return q ? q.display : (console.warn("Did not recognize the given relative time range:", n.time_range), n.time_range);
-      } else if ((n == null ? void 0 : n.type) === "absolute") {
-        const q = n.tz || "Etc/UTC";
-        return `${J(n.start, { short: !0, tz: q })} - ${J(n.end, { short: !0, tz: q })}`;
+    }), p = S(() => {
+      var q;
+      const y = (q = i.definition.query) == null ? void 0 : q.time_range;
+      if ((y == null ? void 0 : y.type) === "relative") {
+        const N = Te.get(Ue[y.time_range]);
+        return N ? N.display : (console.warn("Did not recognize the given relative time range:", y.time_range), y.time_range);
+      } else if ((y == null ? void 0 : y.type) === "absolute") {
+        const N = y.tz || "Etc/UTC";
+        return `${ge(y.start, { short: !0, tz: N })} - ${ge(y.end, { short: !0, tz: N })}`;
       }
       return null;
-    }), p = g(() => y.value ? be(y.value.meta.granularity_ms) : void 0), v = () => {
-      s("edit-tile", r.definition);
-    }, T = (n) => {
-      y.value = n;
-    }, C = (n) => {
-      D.value = n;
-    }, f = () => {
-      C(!0);
+    }), w = S(() => h.value ? $e(h.value.meta.granularity_ms) : void 0), C = () => {
+      s("edit-tile", i.definition);
+    }, D = (y) => {
+      h.value = y;
+    }, z = (y) => {
+      d.value = y;
+    }, R = () => {
+      z(!0);
     };
-    return (n, A) => {
-      const q = N("KBadge"), M = N("KDropdownItem"), ce = N("KDropdown");
-      return d(), R("div", {
+    return (y, q) => {
+      const N = W("KBadge"), J = W("KDropdownItem"), Le = W("KDropdown");
+      return E(), L("div", {
         class: "tile-boundary",
-        "data-testid": `tile-${n.tileId}`
+        "data-testid": `tile-${y.tileId}`
       }, [
-        l(u) && n.definition.chart.type !== "slottable" ? (d(), R("div", at, [
+        x(l) && y.definition.chart.type !== "slottable" ? (E(), L("div", Ct, [
           K("div", {
             class: "title",
-            "data-testid": `tile-title-${n.tileId}`
-          }, L(n.definition.chart.chartTitle), 9, nt),
-          I.value || E.value ? (d(), R("div", {
+            "data-testid": `tile-title-${y.tileId}`
+          }, G(y.definition.chart.chartTitle), 9, Rt),
+          _.value || p.value ? (E(), L("div", {
             key: 0,
             class: "tile-actions",
-            "data-testid": `tile-actions-${n.tileId}`
+            "data-testid": `tile-actions-${y.tileId}`
           }, [
-            E.value ? (d(), _(q, { key: 0 }, {
-              default: b(() => [
-                U(L(E.value), 1)
+            p.value ? (E(), T(N, { key: 0 }, {
+              default: H(() => [
+                re(G(p.value), 1)
               ]),
               _: 1
-            })) : S("", !0),
-            I.value && n.context.editable ? (d(), _(l(we), {
+            })) : I("", !0),
+            _.value && y.context.editable ? (E(), T(x(Ze), {
               key: 1,
               class: "edit-icon",
-              color: l(X),
-              "data-testid": `edit-tile-${n.tileId}`,
-              size: l(ee),
-              onClick: v
-            }, null, 8, ["color", "data-testid", "size"])) : S("", !0),
-            I.value ? (d(), _(ce, {
+              color: x(_e),
+              "data-testid": `edit-tile-${y.tileId}`,
+              size: x(ve),
+              onClick: C
+            }, null, 8, ["color", "data-testid", "size"])) : I("", !0),
+            _.value ? (E(), T(Le, {
               key: 2,
               class: "dropdown",
-              "data-testid": `chart-action-menu-${n.tileId}`,
+              "data-testid": `chart-action-menu-${y.tileId}`,
               "kpop-attributes": { placement: "bottom-end" }
             }, {
-              items: b(() => [
-                x.value ? (d(), _(M, {
+              items: H(() => [
+                u.value ? (E(), T(J, {
                   key: 0,
-                  "data-testid": `chart-jump-to-explore-${n.tileId}`,
-                  item: { label: l(i).t("jumpToExplore"), to: x.value }
-                }, null, 8, ["data-testid", "item"])) : S("", !0),
-                "allowCsvExport" in n.definition.chart && n.definition.chart.allowCsvExport ? (d(), _(M, {
+                  "data-testid": `chart-jump-to-explore-${y.tileId}`,
+                  item: { label: x(n).t("jumpToExplore"), to: u.value }
+                }, null, 8, ["data-testid", "item"])) : I("", !0),
+                "allowCsvExport" in y.definition.chart && y.definition.chart.allowCsvExport ? (E(), T(J, {
                   key: 1,
                   class: "chart-export-button",
-                  "data-testid": `chart-csv-export-${n.tileId}`,
-                  onClick: A[0] || (A[0] = (vt) => f())
+                  "data-testid": `chart-csv-export-${y.tileId}`,
+                  onClick: q[0] || (q[0] = (Wt) => R())
                 }, {
-                  default: b(() => [
+                  default: H(() => [
                     K("span", {
                       class: "chart-export-trigger",
-                      "data-testid": `csv-export-button-${n.tileId}`
-                    }, L(l(i).t("csvExport.exportAsCsv")), 9, it)
+                      "data-testid": `csv-export-button-${y.tileId}`
+                    }, G(x(n).t("csvExport.exportAsCsv")), 9, zt)
                   ]),
                   _: 1
-                }, 8, ["data-testid"])) : S("", !0)
+                }, 8, ["data-testid"])) : I("", !0)
               ]),
-              default: b(() => [
-                F(l(Oe), {
+              default: H(() => [
+                $(x(et), {
                   class: "kebab-action-menu",
-                  color: l(X),
-                  "data-testid": `kebab-action-menu-${n.tileId}`,
-                  size: l(ee)
+                  color: x(_e),
+                  "data-testid": `kebab-action-menu-${y.tileId}`,
+                  size: x(ve)
                 }, null, 8, ["color", "data-testid", "size"])
               ]),
               _: 1
-            }, 8, ["data-testid"])) : S("", !0)
-          ], 8, ot)) : "description" in n.definition.chart ? (d(), R("div", {
+            }, 8, ["data-testid"])) : I("", !0)
+          ], 8, Dt)) : "description" in y.definition.chart ? (E(), L("div", {
             key: 1,
             class: "header-description",
-            "data-testid": `tile-description-${n.tileId}`
-          }, L(n.definition.chart.description), 9, st)) : S("", !0),
-          D.value ? (d(), _(l(Te), {
+            "data-testid": `tile-description-${y.tileId}`
+          }, G(y.definition.chart.description), 9, St)) : I("", !0),
+          d.value ? (E(), T(x(Ke), {
             key: 2,
-            "chart-data": y.value,
-            "data-testid": `csv-export-modal-${n.tileId}`,
-            filename: m.value,
-            onToggleModal: C
-          }, null, 8, ["chart-data", "data-testid", "filename"])) : S("", !0)
-        ])) : S("", !0),
+            "chart-data": h.value,
+            "data-testid": `csv-export-modal-${y.tileId}`,
+            filename: f.value,
+            onToggleModal: z
+          }, null, 8, ["chart-data", "data-testid", "filename"])) : I("", !0)
+        ])) : I("", !0),
         K("div", {
           class: "tile-content",
-          "data-testid": `tile-content-${n.tileId}`
+          "data-testid": `tile-content-${y.tileId}`
         }, [
-          h.value ? (d(), _(ye(h.value.component), re({ key: 0 }, h.value.rendererProps, { onChartData: T }), null, 16)) : S("", !0)
-        ], 8, ct)
-      ], 8, rt);
+          b.value ? (E(), T(Re(b.value.component), xe({ key: 0 }, b.value.rendererProps, { onChartData: D }), null, 16)) : I("", !0)
+        ], 8, Tt)
+      ], 8, xt);
     };
   }
-}), ut = /* @__PURE__ */ z(lt, [["__scopeId", "data-v-3031ac6e"]]), dt = (a, t, e) => {
-  const r = /* @__PURE__ */ new Map();
-  e.forEach((o) => {
-    const c = o.layout.position.row, i = r.get(c), u = o.layout.size.rows === 1 && !!o.layout.size.fitToContent;
-    i === void 0 ? r.set(c, u) : r.set(c, i && u);
+}), Nt = /* @__PURE__ */ V(kt, [["__scopeId", "data-v-12d69e34"]]), Ht = (c, e, t) => {
+  const i = /* @__PURE__ */ new Map();
+  t.forEach((r) => {
+    const o = r.layout.position.row, n = i.get(o), l = r.layout.size.rows === 1 && !!r.layout.size.fitToContent;
+    n === void 0 ? i.set(o, l) : i.set(o, n && l);
   });
   const s = [];
-  for (let o = 0; o < a; o++)
-    r.get(o) ? s.push("auto") : s.push(`${t}px`);
+  for (let r = 0; r < c; r++)
+    i.get(r) ? s.push("auto") : s.push(`${e}px`);
   return s;
-}, pt = /* @__PURE__ */ k({
+}, At = /* @__PURE__ */ M({
   __name: "GridLayout",
   props: {
     gridSize: {
@@ -616,157 +616,2956 @@ const $ = {
     tileHeight: {
       type: Number,
       required: !1,
-      default: () => H
+      default: () => he
     },
     tiles: {
       type: Array,
       required: !0
     }
   },
-  setup(a) {
-    G((i) => ({
-      "3bc5e939": a.gridSize.cols,
-      "77aa3028": o.value
+  setup(c) {
+    oe((n) => ({
+      "3bc5e939": c.gridSize.cols,
+      "77aa3028": r.value
     }));
-    const t = a, e = O(null), r = O(0), s = new ResizeObserver((i) => {
+    const e = c, t = U(null), i = U(0), s = new ResizeObserver((n) => {
       window.requestAnimationFrame(() => {
-        !Array.isArray(i) || !i.length || (r.value = i[0].contentRect.width);
+        !Array.isArray(n) || !n.length || (i.value = n[0].contentRect.width);
       });
     });
-    he(() => {
-      e.value && s.observe(e.value);
-    }), te(() => {
-      e.value && s.unobserve(e.value);
+    De(() => {
+      t.value && s.observe(t.value);
+    }), le(() => {
+      t.value && s.unobserve(t.value);
     });
-    const o = g(() => {
-      var u;
-      return dt((u = t.gridSize) == null ? void 0 : u.rows, t.tileHeight, t.tiles).join(" ");
-    }), c = g(() => t.tiles.map((i, u) => ({
-      key: `tile-${u}`,
-      tile: i,
+    const r = S(() => {
+      var l;
+      return Ht((l = e.gridSize) == null ? void 0 : l.rows, e.tileHeight, e.tiles).join(" ");
+    }), o = S(() => e.tiles.map((n, l) => ({
+      key: `tile-${l}`,
+      tile: n,
       style: {
-        "grid-column-start": i.layout.position.col + 1,
-        "grid-column-end": i.layout.position.col + 1 + i.layout.size.cols,
-        "grid-row-start": i.layout.position.row + 1,
-        "grid-row-end": i.layout.position.row + 1 + i.layout.size.rows
+        "grid-column-start": n.layout.position.col + 1,
+        "grid-column-end": n.layout.position.col + 1 + n.layout.size.cols,
+        "grid-row-start": n.layout.position.row + 1,
+        "grid-row-end": n.layout.position.row + 1 + n.layout.size.rows
       }
     })));
-    return (i, u) => (d(), R("div", {
+    return (n, l) => (E(), L("div", {
       ref_key: "gridContainer",
-      ref: e,
+      ref: t,
       class: "kong-ui-public-grid-layout"
     }, [
-      (d(!0), R(me, null, fe(c.value, (y) => (d(), R("div", {
-        key: y.key,
-        class: ve(["grid-cell", {
-          "empty-cell": !y.tile
+      (E(!0), L(ze, null, Se(o.value, (h) => (E(), L("div", {
+        key: h.key,
+        class: Pe(["grid-cell", {
+          "empty-cell": !h.tile
         }]),
-        style: Q(y.style)
+        style: fe(h.style)
       }, [
-        V(i.$slots, "tile", {
-          style: Q(y.style),
-          tile: y.tile
+        ne(n.$slots, "tile", {
+          style: fe(h.style),
+          tile: h.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), yt = /* @__PURE__ */ z(pt, [["__scopeId", "data-v-f43eb7b8"]]), ht = { class: "kong-ui-public-dashboard-renderer" }, mt = {
+}), Lt = /* @__PURE__ */ V(At, [["__scopeId", "data-v-f43eb7b8"]]);
+function Ot(c, e, t, i, s) {
+  const r = (...o) => (console.warn("gridstack.js: Function `" + t + "` is deprecated in " + s + " and has been replaced with `" + i + "`. It will be **removed** in a future release"), e.apply(c, o));
+  return r.prototype = e.prototype, r;
+}
+class a {
+  /** convert a potential selector into actual list of html elements. optional root which defaults to document (for shadow dom) */
+  static getElements(e, t = document) {
+    if (typeof e == "string") {
+      const i = "getElementById" in t ? t : void 0;
+      if (i && !isNaN(+e[0])) {
+        const r = i.getElementById(e);
+        return r ? [r] : [];
+      }
+      let s = t.querySelectorAll(e);
+      return !s.length && e[0] !== "." && e[0] !== "#" && (s = t.querySelectorAll("." + e), s.length || (s = t.querySelectorAll("#" + e))), Array.from(s);
+    }
+    return [e];
+  }
+  /** convert a potential selector into actual single element. optional root which defaults to document (for shadow dom) */
+  static getElement(e, t = document) {
+    if (typeof e == "string") {
+      const i = "getElementById" in t ? t : void 0;
+      if (!e.length)
+        return null;
+      if (i && e[0] === "#")
+        return i.getElementById(e.substring(1));
+      if (e[0] === "#" || e[0] === "." || e[0] === "[")
+        return t.querySelector(e);
+      if (i && !isNaN(+e[0]))
+        return i.getElementById(e);
+      let s = t.querySelector(e);
+      return i && !s && (s = i.getElementById(e)), s || (s = t.querySelector("." + e)), s;
+    }
+    return e;
+  }
+  /** create the default grid item divs, and content possibly lazy loaded calling GridStack.renderCB */
+  static createWidgetDivs(e, t) {
+    var o, n;
+    const i = a.createDiv(["grid-stack-item", e]), s = a.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(([l]) => {
+      var h;
+      l.isIntersecting && ((h = t.visibleObservable) == null || h.disconnect(), delete t.visibleObservable, g.renderCB(s, t));
+    }), window.setTimeout(() => {
+      var l;
+      return (l = t.visibleObservable) == null ? void 0 : l.observe(i);
+    })) : g.renderCB(s, t), i;
+  }
+  /** create a div with the given classes */
+  static createDiv(e, t) {
+    const i = document.createElement("div");
+    return e.forEach((s) => {
+      s && i.classList.add(s);
+    }), t == null || t.appendChild(i), i;
+  }
+  /** true if we should resize to content. strict=true when only 'sizeToContent:true' and not a number which lets user adjust */
+  static shouldSizeToContent(e, t = !1) {
+    return (e == null ? void 0 : e.grid) && (t ? e.sizeToContent === !0 || e.grid.opts.sizeToContent === !0 && e.sizeToContent === void 0 : !!e.sizeToContent || e.grid.opts.sizeToContent && e.sizeToContent !== !1);
+  }
+  /** returns true if a and b overlap */
+  static isIntercepted(e, t) {
+    return !(e.y >= t.y + t.h || e.y + e.h <= t.y || e.x + e.w <= t.x || e.x >= t.x + t.w);
+  }
+  /** returns true if a and b touch edges or corners */
+  static isTouching(e, t) {
+    return a.isIntercepted(e, { x: t.x - 0.5, y: t.y - 0.5, w: t.w + 1, h: t.h + 1 });
+  }
+  /** returns the area a and b overlap */
+  static areaIntercept(e, t) {
+    const i = e.x > t.x ? e.x : t.x, s = e.x + e.w < t.x + t.w ? e.x + e.w : t.x + t.w;
+    if (s <= i)
+      return 0;
+    const r = e.y > t.y ? e.y : t.y, o = e.y + e.h < t.y + t.h ? e.y + e.h : t.y + t.h;
+    return o <= r ? 0 : (s - i) * (o - r);
+  }
+  /** returns the area */
+  static area(e) {
+    return e.w * e.h;
+  }
+  /**
+   * Sorts array of nodes
+   * @param nodes array to sort
+   * @param dir 1 for ascending, -1 for descending (optional)
+   **/
+  static sort(e, t = 1) {
+    return e.sort((s, r) => {
+      const o = t * ((s.y ?? 1e4) - (r.y ?? 1e4));
+      return o === 0 ? t * ((s.x ?? 1e4) - (r.x ?? 1e4)) : o;
+    });
+  }
+  /** find an item by id */
+  static find(e, t) {
+    return t ? e.find((i) => i.id === t) : void 0;
+  }
+  /**
+   * creates a style sheet with style id under given parent
+   * @param id will set the 'gs-style-id' attribute to that id
+   * @param parent to insert the stylesheet as first child,
+   * if none supplied it will be appended to the document head instead.
+   */
+  static createStylesheet(e, t, i) {
+    const s = document.createElement("style"), r = i == null ? void 0 : i.nonce;
+    return r && (s.nonce = r), s.setAttribute("type", "text/css"), s.setAttribute("gs-style-id", e), s.styleSheet ? s.styleSheet.cssText = "" : s.appendChild(document.createTextNode("")), t ? t.insertBefore(s, t.firstChild) : (t = document.getElementsByTagName("head")[0], t.appendChild(s)), s;
+  }
+  /** removed the given stylesheet id */
+  static removeStylesheet(e, t) {
+    const s = (t || document).querySelector("STYLE[gs-style-id=" + e + "]");
+    s && s.parentNode && s.remove();
+  }
+  /** inserts a CSS rule */
+  static addCSSRule(e, t, i) {
+    e.textContent += `${t} { ${i} } `;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  static toBool(e) {
+    return typeof e == "boolean" ? e : typeof e == "string" ? (e = e.toLowerCase(), !(e === "" || e === "no" || e === "false" || e === "0")) : !!e;
+  }
+  static toNumber(e) {
+    return e === null || e.length === 0 ? void 0 : Number(e);
+  }
+  static parseHeight(e) {
+    let t, i = "px";
+    if (typeof e == "string")
+      if (e === "auto" || e === "")
+        t = 0;
+      else {
+        const s = e.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%|cm|mm)?$/);
+        if (!s)
+          throw new Error(`Invalid height val = ${e}`);
+        i = s[2] || "px", t = parseFloat(s[1]);
+      }
+    else
+      t = e;
+    return { h: t, unit: i };
+  }
+  /** copies unset fields in target to use the given default sources values */
+  // eslint-disable-next-line
+  static defaults(e, ...t) {
+    return t.forEach((i) => {
+      for (const s in i) {
+        if (!i.hasOwnProperty(s))
+          return;
+        e[s] === null || e[s] === void 0 ? e[s] = i[s] : typeof i[s] == "object" && typeof e[s] == "object" && this.defaults(e[s], i[s]);
+      }
+    }), e;
+  }
+  /** given 2 objects return true if they have the same values. Checks for Object {} having same fields and values (just 1 level down) */
+  static same(e, t) {
+    if (typeof e != "object")
+      return e == t;
+    if (typeof e != typeof t || Object.keys(e).length !== Object.keys(t).length)
+      return !1;
+    for (const i in e)
+      if (e[i] !== t[i])
+        return !1;
+    return !0;
+  }
+  /** copies over b size & position (GridStackPosition), and optionally min/max as well */
+  static copyPos(e, t, i = !1) {
+    return t.x !== void 0 && (e.x = t.x), t.y !== void 0 && (e.y = t.y), t.w !== void 0 && (e.w = t.w), t.h !== void 0 && (e.h = t.h), i && (t.minW && (e.minW = t.minW), t.minH && (e.minH = t.minH), t.maxW && (e.maxW = t.maxW), t.maxH && (e.maxH = t.maxH)), e;
+  }
+  /** true if a and b has same size & position */
+  static samePos(e, t) {
+    return e && t && e.x === t.x && e.y === t.y && (e.w || 1) === (t.w || 1) && (e.h || 1) === (t.h || 1);
+  }
+  /** given a node, makes sure it's min/max are valid */
+  static sanitizeMinMax(e) {
+    e.minW || delete e.minW, e.minH || delete e.minH, e.maxW || delete e.maxW, e.maxH || delete e.maxH;
+  }
+  /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
+  static removeInternalAndSame(e, t) {
+    if (!(typeof e != "object" || typeof t != "object"))
+      for (let i in e) {
+        const s = e[i], r = t[i];
+        i[0] === "_" || s === r ? delete e[i] : s && typeof s == "object" && r !== void 0 && (a.removeInternalAndSame(s, r), Object.keys(s).length || delete e[i]);
+      }
+  }
+  /** removes internal fields '_' and default values for saving */
+  static removeInternalForSave(e, t = !0) {
+    for (let i in e)
+      (i[0] === "_" || e[i] === null || e[i] === void 0) && delete e[i];
+    delete e.grid, t && delete e.el, e.autoPosition || delete e.autoPosition, e.noResize || delete e.noResize, e.noMove || delete e.noMove, e.locked || delete e.locked, (e.w === 1 || e.w === e.minW) && delete e.w, (e.h === 1 || e.h === e.minH) && delete e.h;
+  }
+  /** return the closest parent (or itself) matching the given class */
+  // static closestUpByClass(el: HTMLElement, name: string): HTMLElement {
+  //   while (el) {
+  //     if (el.classList.contains(name)) return el;
+  //     el = el.parentElement
+  //   }
+  //   return null;
+  // }
+  /** delay calling the given function for given delay, preventing new calls from happening while waiting */
+  static throttle(e, t) {
+    let i = !1;
+    return (...s) => {
+      i || (i = !0, setTimeout(() => {
+        e(...s), i = !1;
+      }, t));
+    };
+  }
+  static removePositioningStyles(e) {
+    const t = e.style;
+    t.position && t.removeProperty("position"), t.left && t.removeProperty("left"), t.top && t.removeProperty("top"), t.width && t.removeProperty("width"), t.height && t.removeProperty("height");
+  }
+  /** @internal returns the passed element if scrollable, else the closest parent that will, up to the entire document scrolling element */
+  static getScrollElement(e) {
+    if (!e)
+      return document.scrollingElement || document.documentElement;
+    const t = getComputedStyle(e);
+    return /(auto|scroll)/.test(t.overflow + t.overflowY) ? e : this.getScrollElement(e.parentElement);
+  }
+  /** @internal */
+  static updateScrollPosition(e, t, i) {
+    const s = e.getBoundingClientRect(), r = window.innerHeight || document.documentElement.clientHeight;
+    if (s.top < 0 || s.bottom > r) {
+      const o = s.bottom - r, n = s.top, l = this.getScrollElement(e);
+      if (l !== null) {
+        const h = l.scrollTop;
+        s.top < 0 && i < 0 ? e.offsetHeight > r ? l.scrollTop += i : l.scrollTop += Math.abs(n) > Math.abs(i) ? i : n : i > 0 && (e.offsetHeight > r ? l.scrollTop += i : l.scrollTop += o > i ? i : o), t.top += l.scrollTop - h;
+      }
+    }
+  }
+  /**
+   * @internal Function used to scroll the page.
+   *
+   * @param event `MouseEvent` that triggers the resize
+   * @param el `HTMLElement` that's being resized
+   * @param distance Distance from the V edges to start scrolling
+   */
+  static updateScrollResize(e, t, i) {
+    const s = this.getScrollElement(t), r = s.clientHeight, o = s === this.getScrollElement() ? 0 : s.getBoundingClientRect().top, n = e.clientY - o, l = n < i, h = n > r - i;
+    l ? s.scrollBy({ behavior: "smooth", top: n - i }) : h && s.scrollBy({ behavior: "smooth", top: i - (r - n) });
+  }
+  /** single level clone, returning a new object with same top fields. This will share sub objects and arrays */
+  static clone(e) {
+    return e == null || typeof e != "object" ? e : e instanceof Array ? [...e] : { ...e };
+  }
+  /**
+   * Recursive clone version that returns a full copy, checking for nested objects and arrays ONLY.
+   * Note: this will use as-is any key starting with double __ (and not copy inside) some lib have circular dependencies.
+   */
+  static cloneDeep(e) {
+    const t = ["parentGrid", "el", "grid", "subGrid", "engine"], i = a.clone(e);
+    for (const s in i)
+      i.hasOwnProperty(s) && typeof i[s] == "object" && s.substring(0, 2) !== "__" && !t.find((r) => r === s) && (i[s] = a.cloneDeep(e[s]));
+    return i;
+  }
+  /** deep clone the given HTML node, removing teh unique id field */
+  static cloneNode(e) {
+    const t = e.cloneNode(!0);
+    return t.removeAttribute("id"), t;
+  }
+  static appendTo(e, t) {
+    let i;
+    typeof t == "string" ? i = a.getElement(t) : i = t, i && i.appendChild(e);
+  }
+  // public static setPositionRelative(el: HTMLElement): void {
+  //   if (!(/^(?:r|a|f)/).test(getComputedStyle(el).position)) {
+  //     el.style.position = "relative";
+  //   }
+  // }
+  static addElStyles(e, t) {
+    if (t instanceof Object)
+      for (const i in t)
+        t.hasOwnProperty(i) && (Array.isArray(t[i]) ? t[i].forEach((s) => {
+          e.style[i] = s;
+        }) : e.style[i] = t[i]);
+  }
+  static initEvent(e, t) {
+    const i = { type: t.type }, s = {
+      button: 0,
+      which: 0,
+      buttons: 1,
+      bubbles: !0,
+      cancelable: !0,
+      target: t.target ? t.target : e.target
+    };
+    return ["altKey", "ctrlKey", "metaKey", "shiftKey"].forEach((r) => i[r] = e[r]), ["pageX", "pageY", "clientX", "clientY", "screenX", "screenY"].forEach((r) => i[r] = e[r]), { ...i, ...s };
+  }
+  /** copies the MouseEvent properties and sends it as another event to the given target */
+  static simulateMouseEvent(e, t, i) {
+    const s = document.createEvent("MouseEvents");
+    s.initMouseEvent(
+      t,
+      // type
+      !0,
+      // bubbles
+      !0,
+      // cancelable
+      window,
+      // view
+      1,
+      // detail
+      e.screenX,
+      // screenX
+      e.screenY,
+      // screenY
+      e.clientX,
+      // clientX
+      e.clientY,
+      // clientY
+      e.ctrlKey,
+      // ctrlKey
+      e.altKey,
+      // altKey
+      e.shiftKey,
+      // shiftKey
+      e.metaKey,
+      // metaKey
+      0,
+      // button
+      e.target
+      // relatedTarget
+    ), (i || e.target).dispatchEvent(s);
+  }
+  /**
+   * defines an element that is used to get the offset and scale from grid transforms
+   * returns the scale and offsets from said element
+  */
+  static getValuesFromTransformedElement(e) {
+    const t = document.createElement("div");
+    a.addElStyles(t, {
+      opacity: "0",
+      position: "fixed",
+      top: "0px",
+      left: "0px",
+      width: "1px",
+      height: "1px",
+      zIndex: "-999999"
+    }), e.appendChild(t);
+    const i = t.getBoundingClientRect();
+    return e.removeChild(t), t.remove(), {
+      xScale: 1 / i.width,
+      yScale: 1 / i.height,
+      xOffset: i.left,
+      yOffset: i.top
+    };
+  }
+  /** swap the given object 2 field values */
+  static swap(e, t, i) {
+    if (!e)
+      return;
+    const s = e[t];
+    e[t] = e[i], e[i] = s;
+  }
+  /** returns true if event is inside the given element rectangle */
+  // Note: Safari Mac has null event.relatedTarget which causes #1684 so check if DragEvent is inside the coordinates instead
+  //    this.el.contains(event.relatedTarget as HTMLElement)
+  // public static inside(e: MouseEvent, el: HTMLElement): boolean {
+  //   // srcElement, toElement, target: all set to placeholder when leaving simple grid, so we can't use that (Chrome)
+  //   const target: HTMLElement = e.relatedTarget || (e as any).fromElement;
+  //   if (!target) {
+  //     const { bottom, left, right, top } = el.getBoundingClientRect();
+  //     return (e.x < right && e.x > left && e.y < bottom && e.y > top);
+  //   }
+  //   return el.contains(target);
+  // }
+  /** true if the item can be rotated (checking for prop, not space available) */
+  static canBeRotated(e) {
+    var t;
+    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 P {
+  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;
+  }
+  batchUpdate(e = !0, t = !0) {
+    return !!this.batchMode === e ? this : (this.batchMode = e, e ? (this._prevFloat = this._float, this._float = !0, this.cleanNodes(), this.saveInitial()) : (this._float = this._prevFloat, delete this._prevFloat, t && this._packNodes(), this._notify()), this);
+  }
+  // use entire row for hitting area (will use bottom reverse sorted first) if we not actively moving DOWN and didn't already skip
+  _useEntireRowArea(e, t) {
+    return (!this.float || this.batchMode && !this._prevFloat) && !this._hasLocked && (!e._moving || e._skipDown || t.y <= e.y);
+  }
+  /** @internal fix collision on given 'node', going to given new location 'nn', with optional 'collide' node already found.
+   * return true if we moved. */
+  _fixCollisions(e, t = e, i, s = {}) {
+    if (this.sortNodes(-1), i = i || this.collide(e, t), !i)
+      return !1;
+    if (e._moving && !s.nested && !this.float && this.swap(e, i))
+      return !0;
+    let r = t;
+    !this._loading && this._useEntireRowArea(e, t) && (r = { x: 0, w: this.column, y: t.y, h: t.h }, i = this.collide(e, r, s.skip));
+    let o = !1;
+    const n = { nested: !0, pack: !1 };
+    let l = 0;
+    for (; i = i || this.collide(e, r, s.skip); ) {
+      if (l++ > this.nodes.length * 2)
+        throw new Error("Infinite collide check");
+      let h;
+      if (i.locked || this._loading || e._moving && !e._skipDown && t.y > e.y && !this.float && // can take space we had, or before where we're going
+      (!this.collide(i, { ...i, y: e.y }, e) || !this.collide(i, { ...i, y: t.y - i.h }, e))) {
+        e._skipDown = e._skipDown || t.y > e.y;
+        const d = { ...t, y: i.y + i.h, ...n };
+        h = this._loading && a.samePos(e, d) ? !0 : this.moveNode(e, d), (i.locked || this._loading) && h ? a.copyPos(t, e) : !i.locked && h && s.pack && (this._packNodes(), t.y = i.y + i.h, a.copyPos(e, t)), o = o || h;
+      } else
+        h = this.moveNode(i, { ...i, y: t.y + t.h, skip: e, ...n });
+      if (!h)
+        return o;
+      i = void 0;
+    }
+    return o;
+  }
+  /** return the nodes that intercept the given node. Optionally a different area can be used, as well as a second node to skip */
+  collide(e, t = e, i) {
+    const s = e._id, r = i == null ? void 0 : i._id;
+    return this.nodes.find((o) => o._id !== s && o._id !== r && a.isIntercepted(o, t));
+  }
+  collideAll(e, t = e, i) {
+    const s = e._id, r = i == null ? void 0 : i._id;
+    return this.nodes.filter((o) => o._id !== s && o._id !== r && a.isIntercepted(o, t));
+  }
+  /** does a pixel coverage collision based on where we started, returning the node that has the most coverage that is >50% mid line */
+  directionCollideCoverage(e, t, i) {
+    if (!t.rect || !e._rect)
+      return;
+    const s = e._rect, r = { ...t.rect };
+    r.y > s.y ? (r.h += r.y - s.y, r.y = s.y) : r.h += s.y - r.y, r.x > s.x ? (r.w += r.x - s.x, r.x = s.x) : r.w += s.x - r.x;
+    let o, n = 0.5;
+    for (let l of i) {
+      if (l.locked || !l._rect)
+        break;
+      const h = l._rect;
+      let d = Number.MAX_VALUE, u = Number.MAX_VALUE;
+      s.y < h.y ? d = (r.y + r.h - h.y) / h.h : s.y + s.h > h.y + h.h && (d = (h.y + h.h - r.y) / h.h), s.x < h.x ? u = (r.x + r.w - h.x) / h.w : s.x + s.w > h.x + h.w && (u = (h.x + h.w - r.x) / h.w);
+      const f = Math.min(u, d);
+      f > n && (n = f, o = l);
+    }
+    return t.collide = o, o;
+  }
+  /** does a pixel coverage returning the node that has the most coverage by area */
+  /*
+  protected collideCoverage(r: GridStackPosition, collides: GridStackNode[]): {collide: GridStackNode, over: number} {
+    const collide: GridStackNode;
+    const overMax = 0;
+    collides.forEach(n => {
+      if (n.locked || !n._rect) return;
+      const over = Utils.areaIntercept(r, n._rect);
+      if (over > overMax) {
+        overMax = over;
+        collide = n;
+      }
+    });
+    return {collide, over: overMax};
+  }
+  */
+  /** called to cache the nodes pixel rectangles used for collision detection during drag */
+  cacheRects(e, t, i, s, r, o) {
+    return this.nodes.forEach((n) => n._rect = {
+      y: n.y * t + i,
+      x: n.x * e + o,
+      w: n.w * e - o - s,
+      h: n.h * t - i - r
+    }), this;
+  }
+  /** called to possibly swap between 2 nodes (same size or column, not locked, touching), returning true if successful */
+  swap(e, t) {
+    if (!t || t.locked || !e || e.locked)
+      return !1;
+    function i() {
+      const r = t.x, o = t.y;
+      return t.x = e.x, t.y = e.y, e.h != t.h ? (e.x = r, e.y = t.y + t.h) : e.w != t.w ? (e.x = t.x + t.w, e.y = o) : (e.x = r, e.y = o), e._dirty = t._dirty = !0, !0;
+    }
+    let s;
+    if (e.w === t.w && e.h === t.h && (e.x === t.x || e.y === t.y) && (s = a.isTouching(e, t)))
+      return i();
+    if (s !== !1) {
+      if (e.w === t.w && e.x === t.x && (s || (s = a.isTouching(e, t)))) {
+        if (t.y < e.y) {
+          const r = e;
+          e = t, t = r;
+        }
+        return i();
+      }
+      if (s !== !1) {
+        if (e.h === t.h && e.y === t.y && (s || (s = a.isTouching(e, t)))) {
+          if (t.x < e.x) {
+            const r = e;
+            e = t, t = r;
+          }
+          return i();
+        }
+        return !1;
+      }
+    }
+  }
+  isAreaEmpty(e, t, i, s) {
+    const r = { x: e || 0, y: t || 0, w: i || 1, h: s || 1 };
+    return !this.collide(r);
+  }
+  /** re-layout grid items to reclaim any empty space - optionally keeping the sort order exactly the same ('list' mode) vs truly finding an empty spaces */
+  compact(e = "compact", t = !0) {
+    if (this.nodes.length === 0)
+      return this;
+    t && this.sortNodes();
+    const i = this.batchMode;
+    i || this.batchUpdate();
+    const s = this._inColumnResize;
+    s || (this._inColumnResize = !0);
+    const r = this.nodes;
+    return this.nodes = [], r.forEach((o, n, l) => {
+      let h;
+      o.locked || (o.autoPosition = !0, e === "list" && n && (h = l[n - 1])), this.addNode(o, !1, h);
+    }), s || delete this._inColumnResize, i || this.batchUpdate(!1), this;
+  }
+  /** enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html) */
+  set float(e) {
+    this._float !== e && (this._float = e || !1, e || this._packNodes()._notify());
+  }
+  /** float getter method */
+  get float() {
+    return this._float || !1;
+  }
+  /** sort the nodes array from first to last, or reverse. Called during collision/placement to force an order */
+  sortNodes(e = 1) {
+    return this.nodes = a.sort(this.nodes, e), this;
+  }
+  /** @internal called to top gravity pack the items back OR revert back to original Y positions when floating */
+  _packNodes() {
+    return this.batchMode ? this : (this.sortNodes(), this.float ? this.nodes.forEach((e) => {
+      if (e._updating || e._orig === void 0 || e.y === e._orig.y)
+        return;
+      let t = e.y;
+      for (; t > e._orig.y; )
+        --t, this.collide(e, { x: e.x, y: t, w: e.w, h: e.h }) || (e._dirty = !0, e.y = t);
+    }) : this.nodes.forEach((e, t) => {
+      if (!e.locked)
+        for (; e.y > 0; ) {
+          const i = t === 0 ? 0 : e.y - 1;
+          if (!(t === 0 || !this.collide(e, { x: e.x, y: i, w: e.w, h: e.h })))
+            break;
+          e._dirty = e.y !== i, e.y = i;
+        }
+    }), this);
+  }
+  /**
+   * given a random node, makes sure it's coordinates/values are valid in the current grid
+   * @param node to adjust
+   * @param resizing if out of bound, resize down or move into the grid to fit ?
+   */
+  prepareNode(e, t) {
+    e._id = e._id ?? P._idSeq++;
+    const i = e.id;
+    if (i) {
+      let r = 1;
+      for (; this.nodes.find((o) => o.id === e.id && o !== e); )
+        e.id = i + "_" + r++;
+    }
+    (e.x === void 0 || e.y === void 0 || e.x === null || e.y === null) && (e.autoPosition = !0);
+    const s = { x: 0, y: 0, w: 1, h: 1 };
+    return a.defaults(e, s), e.autoPosition || delete e.autoPosition, e.noResize || delete e.noResize, e.noMove || delete e.noMove, a.sanitizeMinMax(e), typeof e.x == "string" && (e.x = Number(e.x)), typeof e.y == "string" && (e.y = Number(e.y)), typeof e.w == "string" && (e.w = Number(e.w)), typeof e.h == "string" && (e.h = Number(e.h)), isNaN(e.x) && (e.x = s.x, e.autoPosition = !0), isNaN(e.y) && (e.y = s.y, e.autoPosition = !0), isNaN(e.w) && (e.w = s.w), isNaN(e.h) && (e.h = s.h), this.nodeBoundFix(e, t), e;
+  }
+  /** part2 of preparing a node to fit inside our grid - checks for x,y,w from grid dimensions */
+  nodeBoundFix(e, t) {
+    const i = e._orig || a.copyPos({}, e);
+    if (e.maxW && e.w && (e.w = Math.min(e.w, e.maxW)), e.maxH && e.h && (e.h = Math.min(e.h, e.maxH)), e.minW && e.w && e.minW <= this.column && (e.w = Math.max(e.w, e.minW)), e.minH && e.h && (e.h = Math.max(e.h, e.minH)), (e.x || 0) + (e.w || 1) > this.column && this.column < this.defaultColumn && !this._inColumnResize && !this.skipCacheUpdate && e._id && this.findCacheLayout(e, this.defaultColumn) === -1) {
+      const r = { ...e };
+      r.autoPosition || r.x === void 0 ? (delete r.x, delete r.y) : r.x = Math.min(this.defaultColumn - 1, r.x), r.w = Math.min(this.defaultColumn, r.w || 1), this.cacheOneLayout(r, this.defaultColumn);
+    }
+    return e.w > this.column ? e.w = this.column : e.w < 1 && (e.w = 1), this.maxRow && e.h > this.maxRow ? e.h = this.maxRow : e.h < 1 && (e.h = 1), e.x < 0 && (e.x = 0), e.y < 0 && (e.y = 0), e.x + e.w > this.column && (t ? e.w = this.column - e.x : e.x = this.column - e.w), this.maxRow && e.y + e.h > this.maxRow && (t ? e.h = this.maxRow - e.y : e.y = this.maxRow - e.h), a.samePos(e, i) || (e._dirty = !0), this;
+  }
+  /** returns a list of modified nodes from their original values */
+  getDirtyNodes(e) {
+    return e ? this.nodes.filter((t) => t._dirty && !a.samePos(t, t._orig)) : this.nodes.filter((t) => t._dirty);
+  }
+  /** @internal call this to call onChange callback with dirty nodes so DOM can be updated */
+  _notify(e) {
+    if (this.batchMode || !this.onChange)
+      return this;
+    const t = (e || []).concat(this.getDirtyNodes());
+    return this.onChange(t), this;
+  }
+  /** @internal remove dirty and last tried info */
+  cleanNodes() {
+    return this.batchMode ? this : (this.nodes.forEach((e) => {
+      delete e._dirty, delete e._lastTried;
+    }), this);
+  }
+  /** @internal called to save initial position/size to track real dirty state.
+   * Note: should be called right after we call change event (so next API is can detect changes)
+   * as well as right before we start move/resize/enter (so we can restore items to prev values) */
+  saveInitial() {
+    return this.nodes.forEach((e) => {
+      e._orig = a.copyPos({}, e), delete e._dirty;
+    }), this._hasLocked = this.nodes.some((e) => e.locked), this;
+  }
+  /** @internal restore all the nodes back to initial values (called when we leave) */
+  restoreInitial() {
+    return this.nodes.forEach((e) => {
+      !e._orig || a.samePos(e, e._orig) || (a.copyPos(e, e._orig), e._dirty = !0);
+    }), this._notify(), this;
+  }
+  /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found.
+   * optionally you can pass your own existing node list and column count, otherwise defaults to that engine data.
+   * Optionally pass a widget to start search AFTER, meaning the order will remain the same but possibly have empty slots we skipped
+   */
+  findEmptyPosition(e, t = this.nodes, i = this.column, s) {
+    const r = s ? s.y * i + (s.x + s.w) : 0;
+    let o = !1;
+    for (let n = r; !o; ++n) {
+      const l = n % i, h = Math.floor(n / i);
+      if (l + e.w > i)
+        continue;
+      const d = { x: l, y: h, w: e.w, h: e.h };
+      t.find((u) => a.isIntercepted(d, u)) || ((e.x !== l || e.y !== h) && (e._dirty = !0), e.x = l, e.y = h, delete e.autoPosition, o = !0);
+    }
+    return o;
+  }
+  /** call to add the given node to our list, fixing collision and re-packing */
+  addNode(e, t = !1, i) {
+    const s = this.nodes.find((o) => o._id === e._id);
+    if (s)
+      return s;
+    this._inColumnResize ? this.nodeBoundFix(e) : this.prepareNode(e), delete e._temporaryRemoved, delete e._removeDOM;
+    let r;
+    return e.autoPosition && this.findEmptyPosition(e, this.nodes, this.column, i) && (delete e.autoPosition, r = !0), this.nodes.push(e), t && this.addedNodes.push(e), r || this._fixCollisions(e), this.batchMode || this._packNodes()._notify(), e;
+  }
+  removeNode(e, t = !0, i = !1) {
+    return this.nodes.find((s) => s._id === e._id) ? (i && this.removedNodes.push(e), t && (e._removeDOM = !0), this.nodes = this.nodes.filter((s) => s._id !== e._id), e._isAboutToRemove || this._packNodes(), this._notify([e]), this) : this;
+  }
+  removeAll(e = !0, t = !0) {
+    if (delete this._layouts, !this.nodes.length)
+      return this;
+    e && this.nodes.forEach((s) => s._removeDOM = !0);
+    const i = this.nodes;
+    return this.removedNodes = t ? i : [], this.nodes = [], this._notify(i);
+  }
+  /** checks if item can be moved (layout constrain) vs moveNode(), returning true if was able to move.
+   * In more complicated cases (maxRow) it will attempt at moving the item and fixing
+   * others in a clone first, then apply those changes if still within specs. */
+  moveNodeCheck(e, t) {
+    if (!this.changedPosConstrain(e, t))
+      return !1;
+    if (t.pack = !0, !this.maxRow)
+      return this.moveNode(e, t);
+    let i;
+    const s = new P({
+      column: this.column,
+      float: this.float,
+      nodes: this.nodes.map((o) => o._id === e._id ? (i = { ...o }, i) : { ...o })
+    });
+    if (!i)
+      return !1;
+    const r = s.moveNode(i, t) && s.getRow() <= Math.max(this.getRow(), this.maxRow);
+    if (!r && !t.resizing && t.collide) {
+      const o = t.collide.el.gridstackNode;
+      if (this.swap(e, o))
+        return this._notify(), !0;
+    }
+    return r ? (s.nodes.filter((o) => o._dirty).forEach((o) => {
+      const n = this.nodes.find((l) => l._id === o._id);
+      n && (a.copyPos(n, o), n._dirty = !0);
+    }), this._notify(), !0) : !1;
+  }
+  /** return true if can fit in grid height constrain only (always true if no maxRow) */
+  willItFit(e) {
+    if (delete e._willFitPos, !this.maxRow)
+      return !0;
+    const t = new P({
+      column: this.column,
+      float: this.float,
+      nodes: this.nodes.map((s) => ({ ...s }))
+    }), i = { ...e };
+    return this.cleanupNode(i), delete i.el, delete i._id, delete i.content, delete i.grid, t.addNode(i), t.getRow() <= this.maxRow ? (e._willFitPos = a.copyPos({}, i), !0) : !1;
+  }
+  /** true if x,y or w,h are different after clamping to min/max */
+  changedPosConstrain(e, t) {
+    return t.w = t.w || e.w, t.h = t.h || e.h, e.x !== t.x || e.y !== t.y ? !0 : (e.maxW && (t.w = Math.min(t.w, e.maxW)), e.maxH && (t.h = Math.min(t.h, e.maxH)), e.minW && (t.w = Math.max(t.w, e.minW)), e.minH && (t.h = Math.max(t.h, e.minH)), e.w !== t.w || e.h !== t.h);
+  }
+  /** return true if the passed in node was actually moved (checks for no-op and locked) */
+  moveNode(e, t) {
+    var h, d;
+    if (!e || /*node.locked ||*/
+    !t)
+      return !1;
+    let i;
+    t.pack === void 0 && !this.batchMode && (i = t.pack = !0), typeof t.x != "number" && (t.x = e.x), typeof t.y != "number" && (t.y = e.y), typeof t.w != "number" && (t.w = e.w), typeof t.h != "number" && (t.h = e.h);
+    const s = e.w !== t.w || e.h !== t.h, r = a.copyPos({}, e, !0);
+    if (a.copyPos(r, t), this.nodeBoundFix(r, s), a.copyPos(t, r), !t.forceCollide && a.samePos(e, t))
+      return !1;
+    const o = a.copyPos({}, e), n = this.collideAll(e, r, t.skip);
+    let l = !0;
+    if (n.length) {
+      const u = e._moving && !t.nested;
+      let f = u ? this.directionCollideCoverage(e, t, n) : n[0];
+      if (u && f && ((d = (h = e.grid) == null ? void 0 : h.opts) != null && d.subGridDynamic) && !e.grid._isTemp) {
+        const _ = a.areaIntercept(t.rect, f._rect), v = a.area(t.rect), b = a.area(f._rect);
+        _ / (v < b ? v : b) > 0.8 && (f.grid.makeSubGrid(f.el, void 0, e), f = void 0);
+      }
+      f ? l = !this._fixCollisions(e, r, f, t) : (l = !1, i && delete t.pack);
+    }
+    return l && !a.samePos(e, r) && (e._dirty = !0, a.copyPos(e, r)), t.pack && this._packNodes()._notify(), !a.samePos(e, o);
+  }
+  getRow() {
+    return this.nodes.reduce((e, t) => Math.max(e, t.y + t.h), 0);
+  }
+  beginUpdate(e) {
+    return e._updating || (e._updating = !0, delete e._skipDown, this.batchMode || this.saveInitial()), this;
+  }
+  endUpdate() {
+    const e = this.nodes.find((t) => t._updating);
+    return e && (delete e._updating, delete e._skipDown), this;
+  }
+  /** saves a copy of the largest column layout (eg 12 even when rendering oneColumnMode) so we don't loose orig layout,
+   * returning a list of widgets for serialization */
+  save(e = !0, t) {
+    var o;
+    const i = (o = this._layouts) == null ? void 0 : o.length, s = i && this.column !== i - 1 ? this._layouts[i - 1] : null, r = [];
+    return this.sortNodes(), this.nodes.forEach((n) => {
+      const l = s == null ? void 0 : s.find((d) => d._id === n._id), h = { ...n, ...l || {} };
+      a.removeInternalForSave(h, !e), t && t(n, h), r.push(h);
+    }), r;
+  }
+  /** @internal called whenever a node is added or moved - updates the cached layouts */
+  layoutsNodesChange(e) {
+    return !this._layouts || this._inColumnResize ? this : (this._layouts.forEach((t, i) => {
+      if (!t || i === this.column)
+        return this;
+      if (i < this.column)
+        this._layouts[i] = void 0;
+      else {
+        const s = i / this.column;
+        e.forEach((r) => {
+          if (!r._orig)
+            return;
+          const o = t.find((n) => n._id === r._id);
+          o && (o.y >= 0 && r.y !== r._orig.y && (o.y += r.y - r._orig.y), r.x !== r._orig.x && (o.x = Math.round(r.x * s)), r.w !== r._orig.w && (o.w = Math.round(r.w * s)));
+        });
+      }
+    }), this);
+  }
+  /**
+   * @internal Called to scale the widget width & position up/down based on the column change.
+   * Note we store previous layouts (especially original ones) to make it possible to go
+   * from say 12 -> 1 -> 12 and get back to where we were.
+   *
+   * @param prevColumn previous number of columns
+   * @param column  new column number
+   * @param layout specify the type of re-layout that will happen (position, size, etc...).
+   * Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column
+   */
+  columnChanged(e, t, i = "moveScale") {
+    var n;
+    if (!this.nodes.length || !t || e === t)
+      return this;
+    const s = i === "compact" || i === "list";
+    s && this.sortNodes(1), t < e && this.cacheLayout(this.nodes, e), this.batchUpdate();
+    let r = [], o = s ? this.nodes : a.sort(this.nodes, -1);
+    if (t > e && this._layouts) {
+      const l = this._layouts[t] || [], h = this._layouts.length - 1;
+      !l.length && e !== h && ((n = this._layouts[h]) != null && n.length) && (e = h, this._layouts[h].forEach((d) => {
+        const u = o.find((f) => f._id === d._id);
+        u && (!s && !d.autoPosition && (u.x = d.x ?? u.x, u.y = d.y ?? u.y), u.w = d.w ?? u.w, (d.x == null || d.y === void 0) && (u.autoPosition = !0));
+      })), l.forEach((d) => {
+        const u = o.findIndex((f) => f._id === d._id);
+        if (u !== -1) {
+          const f = o[u];
+          if (s) {
+            f.w = d.w;
+            return;
+          }
+          (d.autoPosition || isNaN(d.x) || isNaN(d.y)) && this.findEmptyPosition(d, r), d.autoPosition || (f.x = d.x ?? f.x, f.y = d.y ?? f.y, f.w = d.w ?? f.w, r.push(f)), o.splice(u, 1);
+        }
+      });
+    }
+    if (s)
+      this.compact(i, !1);
+    else {
+      if (o.length)
+        if (typeof i == "function")
+          i(t, e, r, o);
+        else {
+          const l = s || i === "none" ? 1 : t / e, h = i === "move" || i === "moveScale", d = i === "scale" || i === "moveScale";
+          o.forEach((u) => {
+            u.x = t === 1 ? 0 : h ? Math.round(u.x * l) : Math.min(u.x, t - 1), u.w = t === 1 || e === 1 ? 1 : d ? Math.round(u.w * l) || 1 : Math.min(u.w, t), r.push(u);
+          }), o = [];
+        }
+      r = a.sort(r, -1), this._inColumnResize = !0, this.nodes = [], r.forEach((l) => {
+        this.addNode(l, !1), delete l._orig;
+      });
+    }
+    return this.nodes.forEach((l) => delete l._orig), this.batchUpdate(!1, !s), delete this._inColumnResize, this;
+  }
+  /**
+   * call to cache the given layout internally to the given location so we can restore back when column changes size
+   * @param nodes list of nodes
+   * @param column corresponding column index to save it under
+   * @param clear if true, will force other caches to be removed (default false)
+   */
+  cacheLayout(e, t, i = !1) {
+    const s = [];
+    return e.forEach((r, o) => {
+      if (r._id === void 0) {
+        const n = r.id ? this.nodes.find((l) => l.id === r.id) : void 0;
+        r._id = (n == null ? void 0 : n._id) ?? P._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;
+  }
+  /**
+   * call to cache the given node layout internally to the given location so we can restore back when column changes size
+   * @param node single node to cache
+   * @param column corresponding column index to save it under
+   */
+  cacheOneLayout(e, t) {
+    e._id = e._id ?? P._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);
+    return s === -1 ? this._layouts[t].push(i) : this._layouts[t][s] = i, this;
+  }
+  findCacheLayout(e, t) {
+    var i, s;
+    return ((s = (i = this._layouts) == null ? void 0 : i[t]) == null ? void 0 : s.findIndex((r) => r._id === e._id)) ?? -1;
+  }
+  removeNodeFromLayoutCache(e) {
+    if (this._layouts)
+      for (let t = 0; t < this._layouts.length; t++) {
+        const i = this.findCacheLayout(e, t);
+        i !== -1 && this._layouts[t].splice(i, 1);
+      }
+  }
+  /** called to remove all internal values but the _id */
+  cleanupNode(e) {
+    for (const t in e)
+      t[0] === "_" && t !== "_id" && delete e[t];
+    return this;
+  }
+}
+P._idSeq = 0;
+const A = {
+  alwaysShowResizeHandle: "mobile",
+  animate: !0,
+  auto: !0,
+  cellHeight: "auto",
+  cellHeightThrottle: 100,
+  cellHeightUnit: "px",
+  column: 12,
+  draggable: { handle: ".grid-stack-item-content", appendTo: "body", scroll: !0 },
+  handle: ".grid-stack-item-content",
+  itemClass: "grid-stack-item",
+  margin: 10,
+  marginUnit: "px",
+  maxRow: 0,
+  minRow: 0,
+  placeholderClass: "grid-stack-placeholder",
+  placeholderText: "",
+  removableOptions: { accept: "grid-stack-item", decline: "grid-stack-non-removable" },
+  resizable: { handles: "se" },
+  rtl: "auto"
+  // **** same as not being set ****
+  // disableDrag: false,
+  // disableResize: false,
+  // float: false,
+  // handleClass: null,
+  // removable: false,
+  // staticGrid: false,
+  // styleInHead: false,
+  //removable
+};
+class m {
+}
+const O = 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 B {
+}
+function Z(c, e) {
+  if (c.touches.length > 1)
+    return;
+  c.cancelable && c.preventDefault();
+  const t = c.changedTouches[0], i = document.createEvent("MouseEvents");
+  i.initMouseEvent(
+    e,
+    // type
+    !0,
+    // bubbles
+    !0,
+    // cancelable
+    window,
+    // view
+    1,
+    // detail
+    t.screenX,
+    // screenX
+    t.screenY,
+    // screenY
+    t.clientX,
+    // clientX
+    t.clientY,
+    // clientY
+    !1,
+    // ctrlKey
+    !1,
+    // altKey
+    !1,
+    // shiftKey
+    !1,
+    // metaKey
+    0,
+    // button
+    null
+    // relatedTarget
+  ), c.target.dispatchEvent(i);
+}
+function Ae(c, e) {
+  c.cancelable && c.preventDefault();
+  const t = document.createEvent("MouseEvents");
+  t.initMouseEvent(
+    e,
+    // type
+    !0,
+    // bubbles
+    !0,
+    // cancelable
+    window,
+    // view
+    1,
+    // detail
+    c.screenX,
+    // screenX
+    c.screenY,
+    // screenY
+    c.clientX,
+    // clientX
+    c.clientY,
+    // clientY
+    !1,
+    // ctrlKey
+    !1,
+    // altKey
+    !1,
+    // shiftKey
+    !1,
+    // metaKey
+    0,
+    // button
+    null
+    // relatedTarget
+  ), c.target.dispatchEvent(t);
+}
+function ee(c) {
+  B.touchHandled || (B.touchHandled = !0, Z(c, "mousedown"));
+}
+function te(c) {
+  B.touchHandled && Z(c, "mousemove");
+}
+function ie(c) {
+  if (!B.touchHandled)
+    return;
+  B.pointerLeaveTimeout && (window.clearTimeout(B.pointerLeaveTimeout), delete B.pointerLeaveTimeout);
+  const e = !!m.dragElement;
+  Z(c, "mouseup"), e || Z(c, "click"), B.touchHandled = !1;
+}
+function se(c) {
+  c.pointerType !== "mouse" && c.target.releasePointerCapture(c.pointerId);
+}
+function be(c) {
+  m.dragElement && c.pointerType !== "mouse" && Ae(c, "mouseenter");
+}
+function we(c) {
+  m.dragElement && c.pointerType !== "mouse" && (B.pointerLeaveTimeout = window.setTimeout(() => {
+    delete B.pointerLeaveTimeout, Ae(c, "mouseleave");
+  }, 10));
+}
+class ae {
+  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(`${ae.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), O && (this.el.addEventListener("touchstart", ee), this.el.addEventListener("pointerdown", se)), 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), O && (this.el.removeEventListener("touchstart", ee), this.el.removeEventListener("pointerdown", se)), 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), O && (this.el.addEventListener("touchmove", te), this.el.addEventListener("touchend", ie)), e.stopPropagation(), e.preventDefault();
+  }
+  /** @internal */
+  _mouseMove(e) {
+    const t = this.mouseDownEvent;
+    this.moving ? this._triggerEvent("move", e) : Math.abs(e.x - t.x) + Math.abs(e.y - t.y) > 2 && (this.moving = !0, this._triggerEvent("start", this.mouseDownEvent), this._triggerEvent("move", e), document.addEventListener("keydown", this._keyEvent)), e.stopPropagation();
+  }
+  /** @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), O && (this.el.removeEventListener("touchmove", te), this.el.removeEventListener("touchend", ie)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
+  }
+  /** @internal call when keys are being pressed - use Esc to cancel */
+  _keyEvent(e) {
+    var t, i;
+    e.key === "Escape" && ((i = (t = this.host.gridstackNode) == null ? void 0 : t.grid) == null || i.engine.restoreInitial(), this._mouseUp(this.mouseDownEvent));
+  }
+  /** @internal */
+  _triggerEvent(e, t) {
+    return this.option[e] && this.option[e](t), this;
+  }
+}
+ae.prefix = "ui-resizable-";
+class ue {
+  constructor() {
+    this._eventRegister = {};
+  }
+  /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */
+  get disabled() {
+    return this._disabled;
+  }
+  on(e, t) {
+    this._eventRegister[e] = t;
+  }
+  off(e) {
+    delete this._eventRegister[e];
+  }
+  enable() {
+    this._disabled = !1;
+  }
+  disable() {
+    this._disabled = !0;
+  }
+  destroy() {
+    delete this._eventRegister;
+  }
+  triggerEvent(e, t) {
+    if (!this.disabled && this._eventRegister && this._eventRegister[e])
+      return this._eventRegister[e](t);
+  }
+}
+class Y extends ue {
+  // 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 = () => {
+      const s = this.el.parentElement.getBoundingClientRect(), r = {
+        width: this.originalRect.width,
+        height: this.originalRect.height + this.scrolled,
+        left: this.originalRect.left,
+        top: this.originalRect.top - this.scrolled
+      }, o = this.temporalRect || r;
+      return {
+        position: {
+          left: (o.left - s.left) * this.rectScale.x,
+          top: (o.top - s.top) * this.rectScale.y
+        },
+        size: {
+          width: o.width * this.rectScale.x,
+          height: o.height * this.rectScale.y
+        }
+        /* Gridstack ONLY needs position set above... keep around in case.
+        element: [this.el], // The object representing the element to be resized
+        helper: [], // TODO: not support yet - The object representing the helper that's being resized
+        originalElement: [this.el],// we don't wrap here, so simplify as this.el //The object representing the original element before it is wrapped
+        originalPosition: { // The position represented as { left, top } before the resizable is resized
+          left: this.originalRect.left - containmentRect.left,
+          top: this.originalRect.top - containmentRect.top
+        },
+        originalSize: { // The size represented as { width, height } before the resizable is resized
+          width: this.originalRect.width,
+          height: this.originalRect.height
+        }
+        */
+      };
+    }, this._mouseOver = this._mouseOver.bind(this), this._mouseOut = this._mouseOut.bind(this), this.enable(), this._setupAutoHide(this.option.autoHide), this._setupHandlers();
+  }
+  on(e, t) {
+    super.on(e, t);
+  }
+  off(e) {
+    super.off(e);
+  }
+  enable() {
+    super.enable(), this.el.classList.remove("ui-resizable-disabled"), this._setupAutoHide(this.option.autoHide);
+  }
+  disable() {
+    super.disable(), this.el.classList.add("ui-resizable-disabled"), this._setupAutoHide(!1);
+  }
+  destroy() {
+    this._removeHandlers(), this._setupAutoHide(!1), delete this.el, super.destroy();
+  }
+  updateOption(e) {
+    const t = e.handles && e.handles !== this.option.handles, i = e.autoHide && e.autoHide !== this.option.autoHide;
+    return Object.keys(e).forEach((s) => this.option[s] = e[s]), t && (this._removeHandlers(), this._setupHandlers()), i && this._setupAutoHide(this.option.autoHide), this;
+  }
+  /** @internal turns auto hide on/off */
+  _setupAutoHide(e) {
+    return e ? (this.el.classList.add("ui-resizable-autohide"), this.el.addEventListener("mouseover", this._mouseOver), this.el.addEventListener("mouseout", this._mouseOut)) : (this.el.classList.remove("ui-resizable-autohide"), this.el.removeEventListener("mouseover", this._mouseOver), this.el.removeEventListener("mouseout", this._mouseOut), m.overResizeElement === this && delete m.overResizeElement), this;
+  }
+  /** @internal */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _mouseOver(e) {
+    m.overResizeElement || m.dragElement || (m.overResizeElement = this, this.el.classList.remove("ui-resizable-autohide"));
+  }
+  /** @internal */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _mouseOut(e) {
+    m.overResizeElement === this && (delete m.overResizeElement, this.el.classList.add("ui-resizable-autohide"));
+  }
+  /** @internal */
+  _setupHandlers() {
+    return this.handlers = this.option.handles.split(",").map((e) => e.trim()).map((e) => new ae(this.el, e, {
+      start: (t) => {
+        this._resizeStart(t);
+      },
+      stop: (t) => {
+        this._resizeStop(t);
+      },
+      move: (t) => {
+        this._resizing(t, e);
+      }
+    })), this;
+  }
+  /** @internal */
+  _resizeStart(e) {
+    this.sizeToContent = a.shouldSizeToContent(this.el.gridstackNode, !0), this.originalRect = this.el.getBoundingClientRect(), this.scrollEl = a.getScrollElement(this.el), this.scrollY = this.scrollEl.scrollTop, this.scrolled = 0, this.startEvent = e, this._setupHelper(), this._applyChange();
+    const t = a.initEvent(e, { type: "resizestart", target: this.el });
+    return this.option.start && this.option.start(t, this._ui()), this.el.classList.add("ui-resizable-resizing"), this.triggerEvent("resizestart", t), this;
+  }
+  /** @internal */
+  _resizing(e, t) {
+    this.scrolled = this.scrollEl.scrollTop - this.scrollY, this.temporalRect = this._getChange(e, t), this._applyChange();
+    const i = a.initEvent(e, { type: "resize", target: this.el });
+    return this.option.resize && this.option.resize(i, this._ui()), this.triggerEvent("resize", i), this;
+  }
+  /** @internal */
+  _resizeStop(e) {
+    const t = a.initEvent(e, { type: "resizestop", target: this.el });
+    return this.option.stop && this.option.stop(t), this.el.classList.remove("ui-resizable-resizing"), this.triggerEvent("resizestop", t), this._cleanHelper(), delete this.startEvent, delete this.originalRect, delete this.temporalRect, delete this.scrollY, delete this.scrolled, this;
+  }
+  /** @internal */
+  _setupHelper() {
+    this.elOriginStyleVal = Y._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
+    const e = this.el.parentElement, t = a.getValuesFromTransformedElement(e);
+    return this.rectScale = {
+      x: t.xScale,
+      y: t.yScale
+    }, getComputedStyle(this.el.parentElement).position.match(/static/) && (this.el.parentElement.style.position = "relative"), this.el.style.position = "absolute", this.el.style.opacity = "0.8", this;
+  }
+  /** @internal */
+  _cleanHelper() {
+    return Y._originStyleProp.forEach((e, t) => {
+      this.el.style[e] = this.elOriginStyleVal[t] || null;
+    }), this.el.parentElement.style.position = this.parentOriginStylePosition || null, this;
+  }
+  /** @internal */
+  _getChange(e, t) {
+    const i = this.startEvent, s = {
+      width: this.originalRect.width,
+      height: this.originalRect.height + this.scrolled,
+      left: this.originalRect.left,
+      top: this.originalRect.top - this.scrolled
+    }, r = e.clientX - i.clientX, o = this.sizeToContent ? 0 : e.clientY - i.clientY;
+    let n, l;
+    t.indexOf("e") > -1 ? s.width += r : t.indexOf("w") > -1 && (s.width -= r, s.left += r, n = !0), t.indexOf("s") > -1 ? s.height += o : t.indexOf("n") > -1 && (s.height -= o, s.top += o, l = !0);
+    const h = this._constrainSize(s.width, s.height, n, l);
+    return Math.round(s.width) !== Math.round(h.width) && (t.indexOf("w") > -1 && (s.left += s.width - h.width), s.width = h.width), Math.round(s.height) !== Math.round(h.height) && (t.indexOf("n") > -1 && (s.top += s.height - h.height), s.height = h.height), s;
+  }
+  /** @internal constrain the size to the set min/max values */
+  _constrainSize(e, t, i, s) {
+    const r = this.option, o = (i ? r.maxWidthMoveLeft : r.maxWidth) || Number.MAX_SAFE_INTEGER, n = r.minWidth / this.rectScale.x || e, l = (s ? r.maxHeightMoveUp : r.maxHeight) || Number.MAX_SAFE_INTEGER, h = r.minHeight / this.rectScale.y || t, d = Math.min(o, Math.max(n, e)), u = Math.min(l, Math.max(h, t));
+    return { width: d, height: u };
+  }
+  /** @internal */
+  _applyChange() {
+    let e = { left: 0, top: 0, width: 0, height: 0 };
+    if (this.el.style.position === "absolute") {
+      const t = this.el.parentElement, { left: i, top: s } = t.getBoundingClientRect();
+      e = { left: i, top: s, width: 0, height: 0 };
+    }
+    return this.temporalRect ? (Object.keys(this.temporalRect).forEach((t) => {
+      const i = this.temporalRect[t], s = t === "width" || t === "left" ? this.rectScale.x : t === "height" || t === "top" ? this.rectScale.y : 1;
+      this.el.style[t] = (i - e[t]) * s + "px";
+    }), this) : this;
+  }
+  /** @internal */
+  _removeHandlers() {
+    return this.handlers.forEach((e) => e.destroy()), delete this.handlers, this;
+  }
+}
+Y._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
+const Mt = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
+class X extends ue {
+  constructor(e, t = {}) {
+    var r;
+    super(), this.el = e, this.option = t, this.dragTransform = {
+      xScale: 1,
+      yScale: 1,
+      xOffset: 0,
+      yOffset: 0
+    };
+    const i = (r = t == null ? void 0 : t.handle) == null ? void 0 : r.substring(1), s = e.gridstackNode;
+    this.dragEls = !i || e.classList.contains(i) ? [e] : s != null && s.subGrid ? [e.querySelector(t.handle) || e] : Array.from(e.querySelectorAll(t.handle)), this.dragEls.length === 0 && (this.dragEls = [e]), 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.enable();
+  }
+  on(e, t) {
+    super.on(e, t);
+  }
+  off(e) {
+    super.off(e);
+  }
+  enable() {
+    this.disabled !== !1 && (super.enable(), this.dragEls.forEach((e) => {
+      e.addEventListener("mousedown", this._mouseDown), O && (e.addEventListener("touchstart", ee), e.addEventListener("pointerdown", se));
+    }), this.el.classList.remove("ui-draggable-disabled"));
+  }
+  disable(e = !1) {
+    this.disabled !== !0 && (super.disable(), this.dragEls.forEach((t) => {
+      t.removeEventListener("mousedown", this._mouseDown), O && (t.removeEventListener("touchstart", ee), t.removeEventListener("pointerdown", se));
+    }), e || this.el.classList.add("ui-draggable-disabled"));
+  }
+  destroy() {
+    this.dragTimeout && window.clearTimeout(this.dragTimeout), delete this.dragTimeout, this.mouseDownEvent && this._mouseUp(this.mouseDownEvent), this.disable(!0), delete this.el, delete this.helper, delete this.option, super.destroy();
+  }
+  updateOption(e) {
+    return Object.keys(e).forEach((t) => this.option[t] = e[t]), this;
+  }
+  /** @internal call when mouse goes down before a dragstart happens */
+  _mouseDown(e) {
+    if (!m.mouseHandled)
+      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(Mt) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete m.dragElement, delete m.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), O && (e.currentTarget.addEventListener("touchmove", te), e.currentTarget.addEventListener("touchend", ie)), e.preventDefault(), document.activeElement && document.activeElement.blur(), m.mouseHandled = !0), !0;
+  }
+  /** @internal method to call actual drag event */
+  _callDrag(e) {
+    if (!this.dragging)
+      return;
+    const t = a.initEvent(e, { target: this.el, type: "drag" });
+    this.option.drag && this.option.drag(t, this.ui()), this.triggerEvent("drag", t);
+  }
+  /** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */
+  _mouseMove(e) {
+    var i;
+    const t = this.mouseDownEvent;
+    if (this.lastDrag = e, this.dragging)
+      if (this._dragFollow(e), m.pauseDrag) {
+        const s = Number.isInteger(m.pauseDrag) ? m.pauseDrag : 100;
+        this.dragTimeout && window.clearTimeout(this.dragTimeout), this.dragTimeout = window.setTimeout(() => this._callDrag(e), s);
+      } else
+        this._callDrag(e);
+    else if (Math.abs(e.x - t.x) + Math.abs(e.y - t.y) > 3) {
+      this.dragging = !0, m.dragElement = this;
+      const s = (i = this.el.gridstackNode) == null ? void 0 : i.grid;
+      s ? m.dropElement = s.el.ddElement.ddDroppable : delete m.dropElement, this.helper = this._createHelper(), this._setupHelperContainmentStyle(), this.dragTransform = a.getValuesFromTransformedElement(this.helperContainment), this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment), this._setupHelperStyle(e);
+      const r = a.initEvent(e, { target: this.el, type: "dragstart" });
+      this.option.start && this.option.start(r, this.ui()), this.triggerEvent("dragstart", r), document.addEventListener("keydown", this._keyEvent);
+    }
+    return !0;
+  }
+  /** @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), O && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", te, !0), e.currentTarget.removeEventListener("touchend", ie, !0)), this.dragging) {
+      delete this.dragging, (t = this.el.gridstackNode) == null || delete t._origRotate, document.removeEventListener("keydown", this._keyEvent), ((i = m.dropElement) == null ? void 0 : i.el) === this.el.parentElement && delete m.dropElement, this.helperContainment.style.position = this.parentOriginStylePosition || null, this.helper !== this.el && this.helper.remove(), this._removeHelperStyle();
+      const s = a.initEvent(e, { target: this.el, type: "dragstop" });
+      this.option.stop && this.option.stop(s), this.triggerEvent("dragstop", s), m.dropElement && m.dropElement.drop(e);
+    }
+    delete this.helper, delete this.mouseDownEvent, delete m.dragElement, delete m.dropElement, delete m.mouseHandled, e.preventDefault();
+  }
+  /** @internal call when keys are being pressed - use Esc to cancel, R to rotate */
+  _keyEvent(e) {
+    var s, r;
+    const t = this.el.gridstackNode, i = (t == null ? void 0 : t.grid) || ((r = (s = m.dropElement) == null ? void 0 : s.el) == null ? void 0 : r.gridstack);
+    if (e.key === "Escape")
+      t && t._origRotate && (t._orig = t._origRotate, delete t._origRotate), i == null || i.cancelDrag(), this._mouseUp(this.mouseDownEvent);
+    else if (t && i && (e.key === "r" || e.key === "R")) {
+      if (!a.canBeRotated(t))
+        return;
+      t._origRotate = t._origRotate || { ...t._orig }, delete t._moving, i.setAnimation(!1).rotate(t.el, { top: -this.dragOffset.offsetTop, left: -this.dragOffset.offsetLeft }).setAnimation(), t._moving = !0, this.dragOffset = this._getDragOffset(this.lastDrag, t.el, this.helperContainment), this.helper.style.width = this.dragOffset.width + "px", this.helper.style.height = this.dragOffset.height + "px", a.swap(t._orig, "w", "h"), delete t._rect, this._mouseMove(this.lastDrag);
+    }
+  }
+  /** @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 = a.cloneNode(this.el)), document.body.contains(e) || a.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = X.originStyleProp.map((t) => this.el.style[t]), e;
+  }
+  /** @internal set the fix position of the dragged item */
+  _setupHelperStyle(e) {
+    this.helper.classList.add("ui-draggable-dragging");
+    const t = this.helper.style;
+    return t.pointerEvents = "none", t.width = this.dragOffset.width + "px", t.height = this.dragOffset.height + "px", t.willChange = "left, top", t.position = "fixed", this._dragFollow(e), t.transition = "none", setTimeout(() => {
+      this.helper && (t.transition = null);
+    }, 0), this;
+  }
+  /** @internal restore back the original style before dragging */
+  _removeHelperStyle() {
+    var t;
+    this.helper.classList.remove("ui-draggable-dragging");
+    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", X.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
+    }
+    return delete this.dragElementOriginStyle, this;
+  }
+  /** @internal updates the top/left position to follow the mouse */
+  _dragFollow(e) {
+    const t = { left: 0, top: 0 }, i = this.helper.style, s = this.dragOffset;
+    i.left = (e.clientX + s.offsetLeft - t.left) * this.dragTransform.xScale + "px", i.top = (e.clientY + s.offsetTop - t.top) * this.dragTransform.yScale + "px";
+  }
+  /** @internal */
+  _setupHelperContainmentStyle() {
+    return this.helperContainment = this.helper.parentElement, this.helper.style.position !== "fixed" && (this.parentOriginStylePosition = this.helperContainment.style.position, getComputedStyle(this.helperContainment).position.match(/static/) && (this.helperContainment.style.position = "relative")), this;
+  }
+  /** @internal */
+  _getDragOffset(e, t, i) {
+    let s = 0, r = 0;
+    i && (s = this.dragTransform.xOffset, r = this.dragTransform.yOffset);
+    const o = t.getBoundingClientRect();
+    return {
+      left: o.left,
+      top: o.top,
+      offsetLeft: -e.clientX + o.left - s,
+      offsetTop: -e.clientY + o.top - r,
+      width: o.width * this.dragTransform.xScale,
+      height: o.height * this.dragTransform.yScale
+    };
+  }
+  /** @internal TODO: set to public as called by DDDroppable! */
+  ui() {
+    const t = this.el.parentElement.getBoundingClientRect(), i = this.helper.getBoundingClientRect();
+    return {
+      position: {
+        top: (i.top - t.top) * this.dragTransform.yScale,
+        left: (i.left - t.left) * this.dragTransform.xScale
+      }
+      /* not used by GridStack for now...
+      helper: [this.helper], //The object arr representing the helper that's being dragged.
+      offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.
+      */
+    };
+  }
+}
+X.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
+class It extends ue {
+  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();
+  }
+  on(e, t) {
+    super.on(e, t);
+  }
+  off(e) {
+    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), O && (this.el.addEventListener("pointerenter", be), this.el.addEventListener("pointerleave", we)));
+  }
+  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), O && (this.el.removeEventListener("pointerenter", be), this.el.removeEventListener("pointerleave", we)));
+  }
+  destroy() {
+    this.disable(!0), this.el.classList.remove("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), super.destroy();
+  }
+  updateOption(e) {
+    return Object.keys(e).forEach((t) => this.option[t] = e[t]), this._setupAccept(), this;
+  }
+  /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */
+  _mouseEnter(e) {
+    if (!m.dragElement || !this._canDrop(m.dragElement.el))
+      return;
+    e.preventDefault(), e.stopPropagation(), m.dropElement && m.dropElement !== this && m.dropElement._mouseLeave(e, !0), m.dropElement = this;
+    const t = a.initEvent(e, { target: this.el, type: "dropover" });
+    this.option.over && this.option.over(t, this._ui(m.dragElement)), this.triggerEvent("dropover", t), this.el.classList.add("ui-droppable-over");
+  }
+  /** @internal called when the item is leaving our area, stop tracking if we had moving item */
+  _mouseLeave(e, t = !1) {
+    var s;
+    if (!m.dragElement || m.dropElement !== this)
+      return;
+    e.preventDefault(), e.stopPropagation();
+    const i = a.initEvent(e, { target: this.el, type: "dropout" });
+    if (this.option.out && this.option.out(i, this._ui(m.dragElement)), this.triggerEvent("dropout", i), m.dropElement === this && (delete m.dropElement, !t)) {
+      let r, o = this.el.parentElement;
+      for (; !r && o; )
+        r = (s = o.ddElement) == null ? void 0 : s.ddDroppable, o = o.parentElement;
+      r && r._mouseEnter(e);
+    }
+  }
+  /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */
+  drop(e) {
+    e.preventDefault();
+    const t = a.initEvent(e, { target: this.el, type: "drop" });
+    this.option.drop && this.option.drop(t, this._ui(m.dragElement)), this.triggerEvent("drop", t);
+  }
+  /** @internal true if element matches the string/method accept option */
+  _canDrop(e) {
+    return e && (!this.accept || this.accept(e));
+  }
+  /** @internal */
+  _setupAccept() {
+    return this.option.accept ? (typeof this.option.accept == "string" ? this.accept = (e) => e.classList.contains(this.option.accept) || e.matches(this.option.accept) : this.accept = this.option.accept, this) : this;
+  }
+  /** @internal */
+  _ui(e) {
+    return {
+      draggable: e.el,
+      ...e.ui()
+    };
+  }
+}
+class ce {
+  static init(e) {
+    return e.ddElement || (e.ddElement = new ce(e)), e.ddElement;
+  }
+  constructor(e) {
+    this.el = e;
+  }
+  on(e, t) {
+    return this.ddDraggable && ["drag", "dragstart", "dragstop"].indexOf(e) > -1 ? this.ddDraggable.on(e, t) : this.ddDroppable && ["drop", "dropover", "dropout"].indexOf(e) > -1 ? this.ddDroppable.on(e, t) : this.ddResizable && ["resizestart", "resize", "resizestop"].indexOf(e) > -1 && this.ddResizable.on(e, t), this;
+  }
+  off(e) {
+    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 X(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 Y(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 It(this.el, e), this;
+  }
+  cleanDroppable() {
+    return this.ddDroppable && (this.ddDroppable.destroy(), delete this.ddDroppable), this;
+  }
+}
+class Pt {
+  resizable(e, t, i, s) {
+    return this._getDDElements(e).forEach((r) => {
+      if (t === "disable" || t === "enable")
+        r.ddResizable && r.ddResizable[t]();
+      else if (t === "destroy")
+        r.ddResizable && r.cleanResizable();
+      else if (t === "option")
+        r.setupResizable({ [i]: s });
+      else {
+        const n = r.el.gridstackNode.grid;
+        let l = r.el.getAttribute("gs-resize-handles") || n.opts.resizable.handles || "e,s,se";
+        l === "all" && (l = "n,e,s,w,se,sw,ne,nw");
+        const h = !n.opts.alwaysShowResizeHandle;
+        r.setupResizable({
+          ...n.opts.resizable,
+          handles: l,
+          autoHide: h,
+          start: t.start,
+          stop: t.stop,
+          resize: t.resize
+        });
+      }
+    }), this;
+  }
+  draggable(e, t, i, s) {
+    return this._getDDElements(e).forEach((r) => {
+      if (t === "disable" || t === "enable")
+        r.ddDraggable && r.ddDraggable[t]();
+      else if (t === "destroy")
+        r.ddDraggable && r.cleanDraggable();
+      else if (t === "option")
+        r.setupDraggable({ [i]: s });
+      else {
+        const o = r.el.gridstackNode.grid;
+        r.setupDraggable({
+          ...o.opts.draggable,
+          // containment: (grid.parentGridNode && grid.opts.dragOut === false) ? grid.el.parentElement : (grid.opts.draggable.containment || null),
+          start: t.start,
+          stop: t.stop,
+          drag: t.drag
+        });
+      }
+    }), this;
+  }
+  dragIn(e, t) {
+    return this._getDDElements(e).forEach((i) => i.setupDraggable(t)), this;
+  }
+  droppable(e, t, i, s) {
+    return typeof t.accept == "function" && !t._accept && (t._accept = t.accept, t.accept = (r) => t._accept(r)), this._getDDElements(e).forEach((r) => {
+      t === "disable" || t === "enable" ? r.ddDroppable && r.ddDroppable[t]() : t === "destroy" ? r.ddDroppable && r.cleanDroppable() : t === "option" ? r.setupDroppable({ [i]: s }) : r.setupDroppable(t);
+    }), this;
+  }
+  /** true if element is droppable */
+  isDroppable(e) {
+    var t;
+    return !!((t = e == null ? void 0 : e.ddElement) != null && t.ddDroppable && !e.ddElement.ddDroppable.disabled);
+  }
+  /** true if element is draggable */
+  isDraggable(e) {
+    var t;
+    return !!((t = e == null ? void 0 : e.ddElement) != null && t.ddDraggable && !e.ddElement.ddDraggable.disabled);
+  }
+  /** true if element is draggable */
+  isResizable(e) {
+    var t;
+    return !!((t = e == null ? void 0 : e.ddElement) != null && t.ddResizable && !e.ddElement.ddResizable.disabled);
+  }
+  on(e, t, i) {
+    return this._getDDElements(e).forEach((s) => s.on(t, (r) => {
+      i(r, m.dragElement ? m.dragElement.el : r.target, m.dragElement ? m.dragElement.helper : null);
+    })), this;
+  }
+  off(e, t) {
+    return this._getDDElements(e).forEach((i) => i.off(t)), this;
+  }
+  /** @internal returns a list of DD elements, creating them on the fly by default */
+  _getDDElements(e, t = !0) {
+    const i = a.getElements(e);
+    if (!i.length)
+      return [];
+    const s = i.map((r) => r.ddElement || (t ? ce.init(r) : null));
+    return t || s.filter((r) => r), s;
+  }
+}
+/*!
+ * GridStack 11.3.0
+ * https://gridstackjs.com/
+ *
+ * Copyright (c) 2021-2024  Alain Dumesny
+ * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
+ */
+const k = new Pt();
+class g {
+  /**
+   * 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
+   * multiple grids initialization at once. Or you can use addGrid() to create the entire grid from JSON.
+   * @param options grid options (optional)
+   * @param elOrString element or CSS selector (first one used) to convert to a grid (default to '.grid-stack' class selector)
+   *
+   * @example
+   * const grid = GridStack.init();
+   *
+   * Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later
+   * const grid = document.querySelector('.grid-stack').gridstack;
+   */
+  static init(e = {}, t = ".grid-stack") {
+    if (typeof document > "u")
+      return null;
+    const i = g.getGridElement(t);
+    return i ? (i.gridstack || (i.gridstack = new g(i, a.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);
+  }
+  /**
+   * Will initialize a list of elements (given a selector) and return an array of grids.
+   * @param options grid options (optional)
+   * @param selector elements selector to convert to grids (default to '.grid-stack' class selector)
+   *
+   * @example
+   * const grids = GridStack.initAll();
+   * grids.forEach(...)
+   */
+  static initAll(e = {}, t = ".grid-stack") {
+    const i = [];
+    return typeof document > "u" || (g.getGridElements(t).forEach((s) => {
+      s.gridstack || (s.gridstack = new g(s, a.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;
+  }
+  /**
+   * call to create a grid with the given options, including loading any children from JSON structure. This will call GridStack.init(), then
+   * grid.load() on any passed children (recursively). Great alternative to calling init() if you want entire grid to come from
+   * JSON serialized data, including options.
+   * @param parent HTML element parent to the grid
+   * @param opt grids options used to initialize the grid, and list of children
+   */
+  static addGrid(e, t = {}) {
+    if (!e)
+      return null;
+    let i = e;
+    if (i.gridstack) {
+      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") || g.addRemoveCB) && (g.addRemoveCB ? i = g.addRemoveCB(e, t, !0, !0) : i = a.createDiv(["grid-stack", t.class], e)), g.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) {
+    g.engineClass = e;
+  }
+  /** @internal create placeholder DIV as needed */
+  get placeholder() {
+    if (!this._placeholder) {
+      this._placeholder = a.createDiv([this.opts.placeholderClass, A.itemClass, this.opts.itemClass]);
+      const e = a.createDiv(["placeholder-content"], this._placeholder);
+      this.opts.placeholderText && (e.textContent = this.opts.placeholderText);
+    }
+    return this._placeholder;
+  }
+  /**
+   * Construct a grid item from the given element and options
+   * @param el the HTML element tied to this grid after it's been initialized
+   * @param opts grid options - public for classes to access, but use methods to modify!
+   */
+  constructor(e, t = {}) {
+    var u, f, _;
+    this.el = e, this.opts = t, this.animationDelay = 310, this._gsEventHandler = {}, this._extraDragRow = 0, this.dragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 }, e.gridstack = this, this.opts = t = t || {}, e.classList.contains("grid-stack") || this.el.classList.add("grid-stack"), t.row && (t.minRow = t.maxRow = t.row, delete t.row);
+    const i = a.toNumber(e.getAttribute("gs-row"));
+    t.column === "auto" && delete t.column, t.alwaysShowResizeHandle !== void 0 && (t._alwaysShowResizeHandle = t.alwaysShowResizeHandle);
+    let s = (u = t.columnOpts) == null ? void 0 : u.breakpoints;
+    const r = t;
+    if (r.oneColumnModeDomSort && (delete r.oneColumnModeDomSort, console.log("warning: Gridstack oneColumnModeDomSort no longer supported. Use GridStackOptions.columnOpts instead.")), r.oneColumnSize || r.disableOneColumnMode === !1) {
+      const v = r.oneColumnSize || 768;
+      delete r.oneColumnSize, delete r.disableOneColumnMode, t.columnOpts = t.columnOpts || {}, s = t.columnOpts.breakpoints = t.columnOpts.breakpoints || [];
+      let b = s.find((p) => p.c === 1);
+      b ? b.w = v : (b = { c: 1, w: v }, s.push(b, { c: 12, w: v + 1 }));
+    }
+    const o = t.columnOpts;
+    o && (!o.columnWidth && !((f = o.breakpoints) != null && f.length) ? (delete t.columnOpts, s = void 0) : o.columnMax = o.columnMax || 12), (s == null ? void 0 : s.length) > 1 && s.sort((v, b) => (b.w || 0) - (v.w || 0));
+    const n = {
+      ...a.cloneDeep(A),
+      column: a.toNumber(e.getAttribute("gs-column")) || A.column,
+      minRow: i || a.toNumber(e.getAttribute("gs-min-row")) || A.minRow,
+      maxRow: i || a.toNumber(e.getAttribute("gs-max-row")) || A.maxRow,
+      staticGrid: a.toBool(e.getAttribute("gs-static")) || A.staticGrid,
+      sizeToContent: a.toBool(e.getAttribute("gs-size-to-content")) || void 0,
+      draggable: {
+        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || A.draggable.handle
+      },
+      removableOptions: {
+        accept: t.itemClass || A.removableOptions.accept,
+        decline: A.removableOptions.decline
+      }
+    };
+    e.getAttribute("gs-animate") && (n.animate = a.toBool(e.getAttribute("gs-animate"))), t = a.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 l = this.el.closest("." + A.itemClass), h = l == null ? void 0 : l.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 !== A.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = O), this._styleSheetClass = "gs-id-" + P._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
+    const d = t.engineClass || g.engineClass || P;
+    if (this.engine = new d({
+      column: this.getColumn(),
+      float: t.float,
+      maxRow: t.maxRow,
+      onChange: (v) => {
+        let b = 0;
+        this.engine.nodes.forEach((p) => {
+          b = Math.max(b, p.y + p.h);
+        }), v.forEach((p) => {
+          const w = p.el;
+          w && (p._removeDOM ? (w && w.remove(), delete p._removeDOM) : this._writePosAttr(w, p));
+        }), this._updateStyles(!1, b);
+      }
+    }), this._updateStyles(!1, 0), t.auto && (this.batchUpdate(), this.engine._loading = !0, this.getGridItems().forEach((v) => this._prepareElement(v)), delete this.engine._loading, this.batchUpdate(!1)), t.children) {
+      const v = t.children;
+      delete t.children, v.length && this.load(v);
+    }
+    this.setAnimation(), t.subGridDynamic && !m.pauseDrag && (m.pauseDrag = !0), ((_ = t.draggable) == null ? void 0 : _.pause) !== void 0 && (m.pauseDrag = t.draggable.pause), this._setupRemoveDrop(), this._setupAcceptWidget(), this._updateResizeEvent();
+  }
+  /**
+   * add a new widget and returns it.
+   *
+   * Widget will be always placed even if result height is more than actual grid height.
+   * You need to use `willItFit()` before calling addWidget for additional check.
+   * See also `makeWidget(el)` for DOM element.
+   *
+   * @example
+   * const grid = GridStack.init();
+   * grid.addWidget({w: 3, content: 'hello'});
+   *
+   * @param w GridStackWidget definition. used MakeWidget(el) if you have dom element instead.
+   */
+  addWidget(e) {
+    if (typeof e == "string") {
+      console.error("V11: GridStack.addWidget() does not support string anymore. see #2736");
+      return;
+    }
+    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 : g.addRemoveCB ? t = g.addRemoveCB(this.el, e, !0, !1) : t = a.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;
+    const s = this._readAttr(t);
+    return a.defaults(e, s), this.engine.prepareNode(e), this.el.appendChild(t), this.makeWidget(t, e), t;
+  }
+  /**
+   * Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them
+   * from the parent's subGrid options.
+   * @param el gridItem element to convert
+   * @param ops (optional) sub-grid options, else default to node, then parent settings, else defaults
+   * @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item)
+   * @param saveContent if true (default) the html inside .grid-stack-content will be saved to child widget
+   * @returns newly created grid
+   */
+  makeSubGrid(e, t, i, s = !0) {
+    var _, v, b;
+    let r = e.gridstackNode;
+    if (r || (r = this.makeWidget(e).gridstackNode), (_ = r.subGrid) != null && _.el)
+      return r.subGrid;
+    let o, n = this;
+    for (; n && !o; )
+      o = (v = n.opts) == null ? void 0 : v.subGridOpts, n = (b = n.parentGridNode) == null ? void 0 : b.grid;
+    t = a.cloneDeep({
+      // by default sub-grid inherit from us | parent, other than id, children, etc...
+      ...this.opts,
+      id: void 0,
+      children: void 0,
+      column: "auto",
+      columnOpts: void 0,
+      layout: "list",
+      subGridOpts: void 0,
+      ...o || {},
+      ...t || r.subGridOpts || {}
+    }), r.subGridOpts = t;
+    let l;
+    t.column === "auto" && (l = !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"), d, u;
+    if (s && (this._removeDD(r.el), u = { ...r, x: 0, y: 0 }, a.removeInternalForSave(u), delete u.subGridOpts, r.content && (u.content = r.content, delete r.content), g.addRemoveCB ? d = g.addRemoveCB(this.el, u, !0, !1) : (d = a.createDiv(["grid-stack-item"]), d.appendChild(h), h = a.createDiv(["grid-stack-item-content"], r.el)), this._prepareDragDropByNode(r)), i) {
+      const p = l ? t.column : r.w, w = r.h + i.h, C = r.el.style;
+      C.transition = "none", this.update(r.el, { w: p, h: w }), setTimeout(() => C.transition = null);
+    }
+    const f = r.subGrid = g.addGrid(h, t);
+    return i != null && i._moving && (f._isTemp = !0), l && (f._autoColumn = !0), s && f.makeWidget(d, u), i && (i._moving ? window.setTimeout(() => a.simulateMouseEvent(i._event, "mouseenter", f.el), 0) : f.makeWidget(r.el, r)), this.resizeToContentCheck(!1, r), f;
+  }
+  /**
+   * called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back
+   * to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple)
+   */
+  removeAsSubGrid(e) {
+    var i;
+    const t = (i = this.parentGridNode) == null ? void 0 : i.grid;
+    t && (t.batchUpdate(), t.removeWidget(this.parentGridNode.el, !0, !0), this.engine.nodes.forEach((s) => {
+      s.x += this.parentGridNode.x, s.y += this.parentGridNode.y, t.makeWidget(s.el, s);
+    }), t.batchUpdate(!1), this.parentGridNode && delete this.parentGridNode.subGrid, delete this.parentGridNode, e && window.setTimeout(() => a.simulateMouseEvent(e._event, "mouseenter", t.el), 0));
+  }
+  /**
+   * saves the current layout returning a list of widgets for serialization which might include any nested grids.
+   * @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will
+   * be removed.
+   * @param saveGridOpt if true (default false), save the grid options itself, so you can call the new GridStack.addGrid()
+   * to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.
+   * @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 = g.saveCB) {
+    const s = this.engine.save(e, i);
+    if (s.forEach((r) => {
+      var o;
+      if (e && r.el && !r.subGrid && !i) {
+        const n = r.el.querySelector(".grid-stack-item-content");
+        r.content = n == null ? void 0 : n.innerHTML, r.content || delete r.content;
+      } else if (!e && !i && delete r.content, (o = r.subGrid) != null && o.el) {
+        const n = r.subGrid.save(e, t, i);
+        r.subGridOpts = t ? n : { children: n }, delete r.subGrid;
+      }
+      delete r.el;
+    }), t) {
+      const r = a.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, a.removeInternalAndSame(r, A), r.children = s, r;
+    }
+    return s;
+  }
+  /**
+   * load the widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.
+   *
+   * @param layout list of widgets definition to update/create
+   * @param addAndRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving
+   * the user control of insertion.
+   *
+   * @example
+   * see http://gridstackjs.com/demo/serialization.html
+   */
+  load(e, t = g.addRemoveCB || !0) {
+    var h;
+    e = a.cloneDeep(e);
+    const i = this.getColumn();
+    e.forEach((d) => {
+      d.w = d.w || 1, d.h = d.h || 1;
+    }), e = a.sort(e), this.engine.skipCacheUpdate = this._ignoreLayoutsNodeChange = !0;
+    let s = 0;
+    e.forEach((d) => {
+      s = Math.max(s, (d.x || 0) + d.w);
+    }), s > this.engine.defaultColumn && (this.engine.defaultColumn = s), s > i && this.engine.cacheLayout(e, s, !0);
+    const r = g.addRemoveCB;
+    typeof t == "function" && (g.addRemoveCB = t);
+    const o = [];
+    this.batchUpdate();
+    const n = !this.engine.nodes.length;
+    n && this.setAnimation(!1), !n && t && [...this.engine.nodes].forEach((u) => {
+      if (!u.id)
+        return;
+      a.find(e, u.id) || (g.addRemoveCB && g.addRemoveCB(this.el, u, !1, !1), o.push(u), this.removeWidget(u.el, !0, !1));
+    }), this.engine._loading = !0;
+    const l = [];
+    return this.engine.nodes = this.engine.nodes.filter((d) => a.find(e, d.id) ? (l.push(d), !1) : !0), e.forEach((d) => {
+      var f;
+      const u = a.find(l, d.id);
+      if (u) {
+        if (a.shouldSizeToContent(u) && (d.h = u.h), this.engine.nodeBoundFix(d), (d.autoPosition || d.x === void 0 || d.y === void 0) && (d.w = d.w || u.w, d.h = d.h || u.h, this.engine.findEmptyPosition(d)), this.engine.nodes.push(u), a.samePos(u, d) && this.engine.nodes.length > 1 && (this.moveNode(u, { ...d, forceCollide: !0 }), a.copyPos(d, u)), this.update(u.el, d), (f = d.subGridOpts) != null && f.children) {
+          const _ = u.el.querySelector(".grid-stack");
+          _ && _.gridstack && _.gridstack.load(d.subGridOpts.children);
+        }
+      } else t && this.addWidget(d);
+    }), delete this.engine._loading, this.engine.removedNodes = o, this.batchUpdate(!1), delete this._ignoreLayoutsNodeChange, delete this.engine.skipCacheUpdate, r ? g.addRemoveCB = r : delete g.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)
+   * and get a single event callback. You will see no changes until `batchUpdate(false)` is called.
+   */
+  batchUpdate(e = !0) {
+    return this.engine.batchUpdate(e), e || (this._updateContainerHeight(), this._triggerRemoveEvent(), this._triggerAddEvent(), this._triggerChangeEvent()), this;
+  }
+  /**
+   * Gets current cell height.
+   */
+  getCellHeight(e = !1) {
+    if (this.opts.cellHeight && this.opts.cellHeight !== "auto" && (!e || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === "px"))
+      return this.opts.cellHeight;
+    if (this.opts.cellHeightUnit === "rem")
+      return this.opts.cellHeight * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    if (this.opts.cellHeightUnit === "em")
+      return this.opts.cellHeight * parseFloat(getComputedStyle(this.el).fontSize);
+    if (this.opts.cellHeightUnit === "cm")
+      return this.opts.cellHeight * (96 / 2.54);
+    if (this.opts.cellHeightUnit === "mm")
+      return this.opts.cellHeight * (96 / 2.54) / 10;
+    const t = this.el.querySelector("." + this.opts.itemClass);
+    if (t) {
+      const s = a.toNumber(t.getAttribute("gs-h")) || 1;
+      return Math.round(t.offsetHeight / s);
+    }
+    const i = parseInt(this.el.getAttribute("gs-current-row"));
+    return i ? Math.round(this.el.getBoundingClientRect().height / i) : this.opts.cellHeight;
+  }
+  /**
+   * Update current cell height - see `GridStackOptions.cellHeight` for format.
+   * This method rebuilds an internal CSS style sheet.
+   * Note: You can expect performance issues if call this method too often.
+   *
+   * @param val the cell height. If not passed (undefined), cells content will be made square (match width minus margin),
+   * if pass 0 the CSS will be generated by the application instead.
+   * @param update (Optional) if false, styles will not be updated
+   *
+   * @example
+   * grid.cellHeight(100); // same as 100px
+   * grid.cellHeight('70px');
+   * grid.cellHeight(grid.cellWidth() * 1.2);
+   */
+  cellHeight(e, t = !0) {
+    if (t && e !== void 0 && this._isAutoCellHeight !== (e === "auto") && (this._isAutoCellHeight = e === "auto", this._updateResizeEvent()), (e === "initial" || e === "auto") && (e = void 0), e === void 0) {
+      const s = -this.opts.marginRight - this.opts.marginLeft + this.opts.marginTop + this.opts.marginBottom;
+      e = this.cellWidth() + s;
+    }
+    const i = a.parseHeight(e);
+    return this.opts.cellHeightUnit === i.unit && this.opts.cellHeight === i.h ? this : (this.opts.cellHeightUnit = i.unit, this.opts.cellHeight = i.h, this.resizeToContentCheck(), t && this._updateStyles(!0), this);
+  }
+  /** Gets current cell width. */
+  cellWidth() {
+    return this._widthOrContainer() / this.getColumn();
+  }
+  /** return our expected width (or parent) , and optionally of window for dynamic column check */
+  _widthOrContainer(e = !1) {
+    var t;
+    return e && ((t = this.opts.columnOpts) != null && t.breakpointForWindow) ? window.innerWidth : this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth;
+  }
+  /** checks for dynamic column count for our current size, returning true if changed */
+  checkDynamicColumn() {
+    var r, o;
+    const e = this.opts.columnOpts;
+    if (!e || !e.columnWidth && !((r = e.breakpoints) != null && r.length))
+      return !1;
+    const t = this.getColumn();
+    let i = t;
+    const s = this._widthOrContainer(!0);
+    if (e.columnWidth)
+      i = Math.min(Math.round(s / e.columnWidth) || 1, e.columnMax);
+    else {
+      i = e.columnMax;
+      let n = 0;
+      for (; n < e.breakpoints.length && s <= e.breakpoints[n].w; )
+        i = e.breakpoints[n++].c || t;
+    }
+    if (i !== t) {
+      const n = (o = e.breakpoints) == null ? void 0 : o.find((l) => l.c === i);
+      return this.column(i, (n == null ? void 0 : n.layout) || e.layout), !0;
+    }
+    return !1;
+  }
+  /**
+   * re-layout grid items to reclaim any empty space. Options are:
+   * 'list' keep the widget left->right order the same, even if that means leaving an empty slot if things don't fit
+   * 'compact' might re-order items to fill any empty space
+   *
+   * doSort - 'false' to let you do your own sorting ahead in case you need to control a different order. (default to sort)
+   */
+  compact(e = "compact", t = !0) {
+    return this.engine.compact(e, t), this._triggerChangeEvent(), this;
+  }
+  /**
+   * set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
+   * as well as cache the original layout so you can revert back to previous positions without loss.
+   * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11],
+   * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
+   * @param column - Integer > 0 (default 12).
+   * @param layout specify the type of re-layout that will happen (position, size, etc...).
+   * Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column
+   */
+  column(e, t = "moveScale") {
+    if (!e || e < 1 || this.opts.column === e)
+      return this;
+    const i = this.getColumn();
+    return this.opts.column = e, this.engine ? (this.engine.column = e, this.el.classList.remove("gs-" + i), this.el.classList.add("gs-" + e), this.engine.columnChanged(i, e, t), this._isAutoCellHeight && this.cellHeight(), this.resizeToContentCheck(!0), this._ignoreLayoutsNodeChange = !0, this._triggerChangeEvent(), delete this._ignoreLayoutsNodeChange, this) : this;
+  }
+  /**
+   * get the number of columns in the grid (default 12)
+   */
+  getColumn() {
+    return this.opts.column;
+  }
+  /** returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order */
+  getGridItems() {
+    return Array.from(this.el.children).filter((e) => e.matches("." + this.opts.itemClass) && !e.matches("." + this.opts.placeholderClass));
+  }
+  /** true if changeCB should be ignored due to column change, sizeToContent, loading, etc... which caller can ignore for dirty flag case */
+  isIgnoreChangeCB() {
+    return this._ignoreLayoutsNodeChange;
+  }
+  /**
+   * Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.
+   * @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`).
+   */
+  destroy(e = !0) {
+    var t, i;
+    if (this.el)
+      return this.offAll(), this._updateResizeEvent(!0), this.setStatic(!0, !1), this.setAnimation(!1), e ? this.el.parentNode.removeChild(this.el) : (this.removeAll(e), this.el.classList.remove(this._styleSheetClass), this.el.removeAttribute("gs-current-row")), this._removeStylesheet(), (t = this.parentGridNode) == null || delete t.subGrid, delete this.parentGridNode, delete this.opts, (i = this._placeholder) == null || delete i.gridstackNode, delete this._placeholder, delete this.engine, delete this.el.gridstack, delete this.el, this;
+  }
+  /**
+   * enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
+   */
+  float(e) {
+    return this.opts.float !== e && (this.opts.float = this.engine.float = e, this._triggerChangeEvent()), this;
+  }
+  /**
+   * get the current float mode
+   */
+  getFloat() {
+    return this.engine.float;
+  }
+  /**
+   * Get the position of the cell under a pixel on screen.
+   * @param position the position of the pixel to resolve in
+   * absolute coordinates, as an object with top and left properties
+   * @param useDocRelative if true, value will be based on document position vs parent position (Optional. Default false).
+   * Useful when grid is within `position: relative` element
+   *
+   * Returns an object with properties `x` and `y` i.e. the column and row in the grid.
+   */
+  getCellFromPixel(e, t = !1) {
+    const i = this.el.getBoundingClientRect();
+    let s;
+    t ? s = { top: i.top + document.documentElement.scrollTop, left: i.left } : s = { top: this.el.offsetTop, left: this.el.offsetLeft };
+    const r = e.left - s.left, o = e.top - s.top, n = i.width / this.getColumn(), l = i.height / parseInt(this.el.getAttribute("gs-current-row"));
+    return { x: Math.floor(r / n), y: Math.floor(o / l) };
+  }
+  /** returns the current number of rows, which will be at least `minRow` if set */
+  getRow() {
+    return Math.max(this.engine.getRow(), this.opts.minRow);
+  }
+  /**
+   * Checks if specified area is empty.
+   * @param x the position x.
+   * @param y the position y.
+   * @param w the width of to check
+   * @param h the height of to check
+   */
+  isAreaEmpty(e, t, i, s) {
+    return this.engine.isAreaEmpty(e, t, i, s);
+  }
+  /**
+   * If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets.
+   * If you want gridstack to add the elements for you, use `addWidget()` instead.
+   * Makes the given element a widget and returns it.
+   * @param els widget or single selector to convert.
+   * @param options widget definition to use instead of reading attributes or using default sizing values
+   *
+   * @example
+   * const grid = GridStack.init();
+   * grid.el.innerHtml = '<div id="1" gs-w="3"></div><div id="2"></div>';
+   * grid.makeWidget('1');
+   * grid.makeWidget('2', {w:2, content: 'hello'});
+   */
+  makeWidget(e, t) {
+    const i = g.getElement(e);
+    if (!i)
+      return;
+    i.parentElement || this.el.appendChild(i), this._prepareElement(i, !0, t);
+    const s = i.gridstackNode;
+    this._updateContainerHeight(), s.subGridOpts && this.makeSubGrid(i, s.subGridOpts, void 0, !1);
+    let r;
+    return this.opts.column === 1 && !this._ignoreLayoutsNodeChange && (r = this._ignoreLayoutsNodeChange = !0), this._triggerAddEvent(), this._triggerChangeEvent(), r && delete this._ignoreLayoutsNodeChange, i;
+  }
+  on(e, t) {
+    return e.indexOf(" ") !== -1 ? (e.split(" ").forEach((s) => this.on(s, t)), this) : (e === "change" || e === "added" || e === "removed" || e === "enable" || e === "disable" ? (e === "enable" || e === "disable" ? this._gsEventHandler[e] = (s) => t(s) : this._gsEventHandler[e] = (s) => {
+      s.detail && t(s, s.detail);
+    }, this.el.addEventListener(e, this._gsEventHandler[e])) : e === "drag" || e === "dragstart" || e === "dragstop" || e === "resizestart" || e === "resize" || e === "resizestop" || e === "dropped" || e === "resizecontent" ? this._gsEventHandler[e] = t : console.error("GridStack.on(" + e + ") event not supported"), this);
+  }
+  /**
+   * unsubscribe from the 'on' event GridStackEvent
+   * @param name of the event (see possible values) or list of names space separated
+   */
+  off(e) {
+    return e.indexOf(" ") !== -1 ? (e.split(" ").forEach((i) => this.off(i)), this) : ((e === "change" || e === "added" || e === "removed" || e === "enable" || e === "disable") && this._gsEventHandler[e] && this.el.removeEventListener(e, this._gsEventHandler[e]), delete this._gsEventHandler[e], this);
+  }
+  /** remove all event handlers */
+  offAll() {
+    return Object.keys(this._gsEventHandler).forEach((e) => this.off(e)), this;
+  }
+  /**
+   * Removes widget from the grid.
+   * @param el  widget or selector to modify
+   * @param removeDOM if `false` DOM element won't be removed from the tree (Default? true).
+   * @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 ? (g.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 && g.addRemoveCB && g.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);
+  }
+  /**
+   * Removes all widgets from the grid.
+   * @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).
+   * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
+   */
+  removeAll(e = !0, t = !0) {
+    return this.engine.nodes.forEach((i) => {
+      e && g.addRemoveCB && g.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;
+  }
+  /**
+   * Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
+   * @param doAnimate if true the grid will animate.
+   * @param delay if true setting will be set on next event loop.
+   */
+  setAnimation(e = this.opts.animate, t) {
+    return t ? setTimeout(() => {
+      this.opts && this.setAnimation(e);
+    }) : e ? this.el.classList.add("grid-stack-animate") : this.el.classList.remove("grid-stack-animate"), this;
+  }
+  /** @internal */
+  hasAnimationCSS() {
+    return this.el.classList.contains("grid-stack-animate");
+  }
+  /**
+   * Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
+   * Also toggle the grid-stack-static class.
+   * @param val if true the grid become static.
+   * @param updateClass true (default) if css class gets updated
+   * @param recurse true (default) if sub-grids also get updated
+   */
+  setStatic(e, t = !0, i = !0) {
+    return !!this.opts.staticGrid === e ? this : (e ? this.opts.staticGrid = !0 : delete this.opts.staticGrid, this._setupRemoveDrop(), this._setupAcceptWidget(), this.engine.nodes.forEach((s) => {
+      this._prepareDragDropByNode(s), s.subGrid && i && s.subGrid.setStatic(e, t, i);
+    }), t && this._setStaticClass(), this);
+  }
+  /**
+   * Updates widget position/size and other info. Note: if you need to call this on all nodes, use load() instead which will update what changed.
+   * @param els  widget or selector of objects to modify (note: setting the same x,y for multiple items will be indeterministic and likely unwanted)
+   * @param opt new widget options (x,y,w,h, etc..). Only those set will be updated.
+   */
+  update(e, t) {
+    if (arguments.length > 2) {
+      console.warn("gridstack.ts: `update(el, x, y, w, h)` is deprecated. Use `update(el, {x, w, content, ...})`. It will be removed soon");
+      const i = arguments;
+      let s = 1;
+      return t = { x: i[s++], y: i[s++], w: i[s++], h: i[s++] }, this.update(e, t);
+    }
+    return g.getElements(e).forEach((i) => {
+      var d;
+      const s = i == null ? void 0 : i.gridstackNode;
+      if (!s)
+        return;
+      const r = a.cloneDeep(t);
+      this.engine.nodeBoundFix(r), delete r.autoPosition;
+      const o = ["x", "y", "w", "h"];
+      let n;
+      if (o.some((u) => r[u] !== void 0 && r[u] !== s[u]) && (n = {}, o.forEach((u) => {
+        n[u] = r[u] !== void 0 ? r[u] : s[u], delete r[u];
+      })), !n && (r.minW || r.minH || r.maxW || r.maxH) && (n = {}), r.content !== void 0) {
+        const u = i.querySelector(".grid-stack-item-content");
+        u && u.textContent !== r.content && (s.content = r.content, g.renderCB(u, r), (d = s.subGrid) != null && d.el && (u.appendChild(s.subGrid.el), s.subGrid.opts.styleInHead || s.subGrid._updateStyles(!0))), delete r.content;
+      }
+      let l = !1, h = !1;
+      for (const u in r)
+        u[0] !== "_" && s[u] !== r[u] && (s[u] = r[u], l = !0, h = h || !this.opts.staticGrid && (u === "noResize" || u === "noMove" || u === "locked"));
+      if (a.sanitizeMinMax(s), n) {
+        const u = n.w !== void 0 && n.w !== s.w;
+        this.moveNode(s, n), u && s.subGrid ? s.subGrid.onResize(this.hasAnimationCSS() ? s.w : void 0) : this.resizeToContentCheck(u, s), delete s._orig;
+      }
+      (n || l) && this._writeAttr(i, s), h && this._prepareDragDropByNode(s);
+    }), this;
+  }
+  moveNode(e, t) {
+    const i = e._updating;
+    i || this.engine.cleanNodes().beginUpdate(e), this.engine.moveNode(e, t), this._updateContainerHeight(), i || (this._triggerChangeEvent(), this.engine.endUpdate());
+  }
+  /**
+   * Updates widget height to match the content height to avoid v-scrollbar or dead space.
+   * Note: this assumes only 1 child under resizeToContentParent='.grid-stack-item-content' (sized to gridItem minus padding) that is at the entire content size wanted.
+   * @param el grid item element
+   * @param useNodeH set to true if GridStackNode.h should be used instead of actual container height when we don't need to wait for animation to finish to get actual DOM heights
+   */
+  resizeToContent(e) {
+    var f, _;
+    if (!e || (e.classList.remove("size-to-content-max"), !e.clientHeight))
+      return;
+    const t = e.gridstackNode;
+    if (!t)
+      return;
+    const i = t.grid;
+    if (!i || e.parentElement !== i.el)
+      return;
+    const s = i.getCellHeight(!0);
+    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(g.resizeToContentParent)), !o)
+      return;
+    const n = e.clientHeight - o.clientHeight, l = t.h ? t.h * s - n : o.clientHeight;
+    let h;
+    if (t.subGrid) {
+      h = t.subGrid.getRow() * t.subGrid.getCellHeight(!0);
+      const v = t.subGrid.el.getBoundingClientRect(), b = t.subGrid.el.parentElement.getBoundingClientRect();
+      h += v.top - b.top;
+    } else {
+      if ((_ = (f = t.subGridOpts) == null ? void 0 : f.children) != null && _.length)
+        return;
+      {
+        const v = o.firstElementChild;
+        if (!v) {
+          console.error(`Error: GridStack.resizeToContent() widget id:${t.id} '${g.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
+          return;
+        }
+        h = v.getBoundingClientRect().height || l;
+      }
+    }
+    if (l === h)
+      return;
+    r += h - l;
+    let d = Math.ceil(r / s);
+    const u = Number.isInteger(t.sizeToContent) ? t.sizeToContent : 0;
+    u && d > u && (d = u, e.classList.add("size-to-content-max")), t.minH && d < t.minH ? d = t.minH : t.maxH && d > t.maxH && (d = t.maxH), d !== t.h && (i._ignoreLayoutsNodeChange = !0, i.moveNode(t, { h: d }), delete i._ignoreLayoutsNodeChange);
+  }
+  /** call the user resize (so they can do extra work) else our build in version */
+  resizeToContentCBCheck(e) {
+    g.resizeToContentCB ? g.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 g.getElements(e).forEach((i) => {
+      const s = i.gridstackNode;
+      if (!a.canBeRotated(s))
+        return;
+      const r = { w: s.h, h: s.w, minH: s.minW, minW: s.minH, maxH: s.maxW, maxW: s.maxH };
+      if (t) {
+        const n = t.left > 0 ? Math.floor(t.left / this.cellWidth()) : 0, l = t.top > 0 ? Math.floor(t.top / this.opts.cellHeight) : 0;
+        r.x = s.x + n - (s.h - (l + 1)), r.y = s.y + l - n;
+      }
+      Object.keys(r).forEach((n) => {
+        r[n] === void 0 && delete r[n];
+      });
+      const o = s._orig;
+      this.update(i, r), s._orig = o;
+    }), this;
+  }
+  /**
+   * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).
+   * @param value margin value
+   */
+  margin(e) {
+    if (!(typeof e == "string" && e.split(" ").length > 1)) {
+      const i = a.parseHeight(e);
+      if (this.opts.marginUnit === i.unit && this.opts.margin === i.h)
+        return;
+    }
+    return this.opts.margin = e, this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = void 0, this._initMargin(), this._updateStyles(!0), this;
+  }
+  /** returns current margin number value (undefined if 4 sides don't match) */
+  getMargin() {
+    return this.opts.margin;
+  }
+  /**
+   * Returns true if the height of the grid will be less than the vertical
+   * constraint. Always returns true if grid doesn't have height constraint.
+   * @param node contains x,y,w,h,auto-position options
+   *
+   * @example
+   * if (grid.willItFit(newWidget)) {
+   *   grid.addWidget(newWidget);
+   * } else {
+   *   alert('Not enough free space to place the widget');
+   * }
+   */
+  willItFit(e) {
+    if (arguments.length > 1) {
+      console.warn("gridstack.ts: `willItFit(x,y,w,h,autoPosition)` is deprecated. Use `willItFit({x, y,...})`. It will be removed soon");
+      const t = arguments;
+      let i = 0, s = { x: t[i++], y: t[i++], w: t[i++], h: t[i++], autoPosition: t[i++] };
+      return this.willItFit(s);
+    }
+    return this.engine.willItFit(e);
+  }
+  /** @internal */
+  _triggerChangeEvent() {
+    if (this.engine.batchMode)
+      return this;
+    const e = this.engine.getDirtyNodes(!0);
+    return e && e.length && (this._ignoreLayoutsNodeChange || this.engine.layoutsNodesChange(e), this._triggerEvent("change", e)), this.engine.saveInitial(), this;
+  }
+  /** @internal */
+  _triggerAddEvent() {
+    var e;
+    if (this.engine.batchMode)
+      return this;
+    if ((e = this.engine.addedNodes) != null && e.length) {
+      this._ignoreLayoutsNodeChange || this.engine.layoutsNodesChange(this.engine.addedNodes), this.engine.addedNodes.forEach((i) => {
+        delete i._dirty;
+      });
+      const t = [...this.engine.addedNodes];
+      this.engine.addedNodes = [], this._triggerEvent("added", t);
+    }
+    return this;
+  }
+  /** @internal */
+  _triggerRemoveEvent() {
+    var e;
+    if (this.engine.batchMode)
+      return this;
+    if ((e = this.engine.removedNodes) != null && e.length) {
+      const t = [...this.engine.removedNodes];
+      this.engine.removedNodes = [], this._triggerEvent("removed", t);
+    }
+    return this;
+  }
+  /** @internal */
+  _triggerEvent(e, t) {
+    const i = t ? new CustomEvent(e, { bubbles: !1, detail: t }) : new Event(e);
+    return this.el.dispatchEvent(i), this;
+  }
+  /** @internal called to delete the current dynamic style sheet used for our layout */
+  _removeStylesheet() {
+    if (this._styles) {
+      const e = this.opts.styleInHead ? void 0 : this.el.parentNode;
+      a.removeStylesheet(this._styleSheetClass, e), delete this._styles;
+    }
+    return this;
+  }
+  /** @internal updated/create the CSS styles for row based layout and initial margin setting */
+  _updateStyles(e = !1, t) {
+    if (e && this._removeStylesheet(), t === void 0 && (t = this.getRow()), this._updateContainerHeight(), this.opts.cellHeight === 0)
+      return this;
+    const i = this.opts.cellHeight, s = this.opts.cellHeightUnit, r = `.${this._styleSheetClass} > .${this.opts.itemClass}`;
+    if (!this._styles) {
+      const o = this.opts.styleInHead ? void 0 : this.el.parentNode;
+      if (this._styles = a.createStylesheet(this._styleSheetClass, o, {
+        nonce: this.opts.nonce
+      }), !this._styles)
+        return this;
+      this._styles._max = 0, a.addCSSRule(this._styles, r, `height: ${i}${s}`);
+      const n = this.opts.marginTop + this.opts.marginUnit, l = this.opts.marginBottom + this.opts.marginUnit, h = this.opts.marginRight + this.opts.marginUnit, d = this.opts.marginLeft + this.opts.marginUnit, u = `${r} > .grid-stack-item-content`, f = `.${this._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`;
+      a.addCSSRule(this._styles, u, `top: ${n}; right: ${h}; bottom: ${l}; left: ${d};`), a.addCSSRule(this._styles, f, `top: ${n}; right: ${h}; bottom: ${l}; left: ${d};`), a.addCSSRule(this._styles, `${r} > .ui-resizable-n`, `top: ${n};`), a.addCSSRule(this._styles, `${r} > .ui-resizable-s`, `bottom: ${l}`), a.addCSSRule(this._styles, `${r} > .ui-resizable-ne`, `right: ${h}; top: ${n}`), a.addCSSRule(this._styles, `${r} > .ui-resizable-e`, `right: ${h}`), a.addCSSRule(this._styles, `${r} > .ui-resizable-se`, `right: ${h}; bottom: ${l}`), a.addCSSRule(this._styles, `${r} > .ui-resizable-nw`, `left: ${d}; top: ${n}`), a.addCSSRule(this._styles, `${r} > .ui-resizable-w`, `left: ${d}`), a.addCSSRule(this._styles, `${r} > .ui-resizable-sw`, `left: ${d}; bottom: ${l}`);
+    }
+    if (t = t || this._styles._max, t > this._styles._max) {
+      const o = (n) => i * n + s;
+      for (let n = this._styles._max + 1; n <= t; n++)
+        a.addCSSRule(this._styles, `${r}[gs-y="${n}"]`, `top: ${o(n)}`), a.addCSSRule(this._styles, `${r}[gs-h="${n + 1}"]`, `height: ${o(n + 1)}`);
+      this._styles._max = t;
+    }
+    return this;
+  }
+  /** @internal */
+  _updateContainerHeight() {
+    if (!this.engine || this.engine.batchMode)
+      return this;
+    const e = this.parentGridNode;
+    let t = this.getRow() + this._extraDragRow;
+    const i = this.opts.cellHeight, s = this.opts.cellHeightUnit;
+    if (!i)
+      return this;
+    if (!e) {
+      const r = a.parseHeight(getComputedStyle(this.el).minHeight);
+      if (r.h > 0 && r.unit === s) {
+        const o = Math.floor(r.h / i);
+        t < o && (t = o);
+      }
+    }
+    return this.el.setAttribute("gs-current-row", String(t)), this.el.style.removeProperty("min-height"), this.el.style.removeProperty("height"), t && (this.el.style[e ? "minHeight" : "height"] = t * i + s), e && !e.grid.engine.batchMode && a.shouldSizeToContent(e) && e.grid.resizeToContentCBCheck(e.el), this;
+  }
+  /** @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(A.itemClass, this.opts.itemClass);
+    const s = a.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;
+  }
+  /** @internal call to write position x,y,w,h attributes back to element */
+  _writePosAttr(e, t) {
+    return t.x !== void 0 && t.x !== null && e.setAttribute("gs-x", String(t.x)), t.y !== void 0 && t.y !== null && e.setAttribute("gs-y", String(t.y)), t.w > 1 ? e.setAttribute("gs-w", String(t.w)) : e.removeAttribute("gs-w"), t.h > 1 ? e.setAttribute("gs-h", String(t.h)) : e.removeAttribute("gs-h"), this;
+  }
+  /** @internal call to write any default attributes back to element */
+  _writeAttr(e, t) {
+    if (!t)
+      return this;
+    this._writePosAttr(e, t);
+    const i = {
+      // autoPosition: 'gs-auto-position', // no need to write out as already in node and doesn't affect CSS
+      noResize: "gs-no-resize",
+      noMove: "gs-no-move",
+      locked: "gs-locked",
+      id: "gs-id",
+      sizeToContent: "gs-size-to-content"
+    };
+    for (const s in i)
+      t[s] ? e.setAttribute(i[s], String(t[s])) : e.removeAttribute(i[s]);
+    return this;
+  }
+  /** @internal call to read any default attributes from element */
+  _readAttr(e, t = !0) {
+    const i = {};
+    i.x = a.toNumber(e.getAttribute("gs-x")), i.y = a.toNumber(e.getAttribute("gs-y")), i.w = a.toNumber(e.getAttribute("gs-w")), i.h = a.toNumber(e.getAttribute("gs-h")), i.autoPosition = a.toBool(e.getAttribute("gs-auto-position")), i.noResize = a.toBool(e.getAttribute("gs-no-resize")), i.noMove = a.toBool(e.getAttribute("gs-no-move")), i.locked = a.toBool(e.getAttribute("gs-locked")), i.sizeToContent = a.toBool(e.getAttribute("gs-size-to-content")), i.id = e.getAttribute("gs-id"), i.maxW = a.toNumber(e.getAttribute("gs-max-w")), i.minW = a.toNumber(e.getAttribute("gs-min-w")), i.maxH = a.toNumber(e.getAttribute("gs-max-h")), i.minH = a.toNumber(e.getAttribute("gs-min-h")), t && (i.w === 1 && e.removeAttribute("gs-w"), i.h === 1 && e.removeAttribute("gs-h"), i.maxW && e.removeAttribute("gs-max-w"), i.minW && e.removeAttribute("gs-min-w"), i.maxH && e.removeAttribute("gs-max-h"), i.minH && e.removeAttribute("gs-min-h"));
+    for (const s in i) {
+      if (!i.hasOwnProperty(s))
+        return;
+      !i[s] && i[s] !== 0 && delete i[s];
+    }
+    return i;
+  }
+  /** @internal */
+  _setStaticClass() {
+    const e = ["grid-stack-static"];
+    return this.opts.staticGrid ? (this.el.classList.add(...e), this.el.setAttribute("gs-static", "true")) : (this.el.classList.remove(...e), this.el.removeAttribute("gs-static")), this;
+  }
+  /**
+   * called when we are being resized - check if the one Column Mode needs to be turned on/off
+   * and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
+   * or `sizeToContent` gridItem options.
+   */
+  onResize(e = ((t) => (t = this.el) == null ? void 0 : t.clientWidth)()) {
+    if (!e || this.prevWidth === e)
+      return;
+    this.prevWidth = e, this.batchUpdate();
+    let i = !1;
+    return this._autoColumn && this.parentGridNode ? this.opts.column !== this.parentGridNode.w && (this.column(this.parentGridNode.w, this.opts.layout || "list"), i = !0) : i = this.checkDynamicColumn(), this._isAutoCellHeight && this.cellHeight(), this.engine.nodes.forEach((s) => {
+      s.subGrid && s.subGrid.onResize();
+    }), this._skipInitialResize || this.resizeToContentCheck(i), delete this._skipInitialResize, this.batchUpdate(!1), this;
+  }
+  /** resizes content for given node (or all) if shouldSizeToContent() is true */
+  resizeToContentCheck(e = !1, t = void 0) {
+    if (this.engine) {
+      if (e && this.hasAnimationCSS())
+        return setTimeout(() => this.resizeToContentCheck(!1, t), this.animationDelay);
+      if (t)
+        a.shouldSizeToContent(t) && this.resizeToContentCBCheck(t.el);
+      else if (this.engine.nodes.some((i) => a.shouldSizeToContent(i))) {
+        const i = [...this.engine.nodes];
+        this.batchUpdate(), i.forEach((s) => {
+          a.shouldSizeToContent(s) && this.resizeToContentCBCheck(s.el);
+        }), this.batchUpdate(!1);
+      }
+      this._gsEventHandler.resizecontent && this._gsEventHandler.resizecontent(null, t ? [t] : this.engine.nodes);
+    }
+  }
+  /** add or remove the grid element size event handler */
+  _updateResizeEvent(e = !1) {
+    const t = !this.parentGridNode && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.columnOpts || this.engine.nodes.find((i) => i.sizeToContent));
+    return !e && t && !this.resizeObserver ? (this._sizeThrottle = a.throttle(() => this.onResize(), this.opts.cellHeightThrottle), this.resizeObserver = new ResizeObserver(() => this._sizeThrottle()), this.resizeObserver.observe(this.el), this._skipInitialResize = !0) : (e || !t) && this.resizeObserver && (this.resizeObserver.disconnect(), delete this.resizeObserver, delete this._sizeThrottle), this;
+  }
+  /** @internal convert a potential selector into actual element */
+  static getElement(e = ".grid-stack-item") {
+    return a.getElement(e);
+  }
+  /** @internal */
+  static getElements(e = ".grid-stack-item") {
+    return a.getElements(e);
+  }
+  /** @internal */
+  static getGridElement(e) {
+    return g.getElement(e);
+  }
+  /** @internal */
+  static getGridElements(e) {
+    return a.getElements(e);
+  }
+  /** @internal initialize margin top/bottom/left/right and units */
+  _initMargin() {
+    let e, t = 0, i = [];
+    return typeof this.opts.margin == "string" && (i = this.opts.margin.split(" ")), i.length === 2 ? (this.opts.marginTop = this.opts.marginBottom = i[0], this.opts.marginLeft = this.opts.marginRight = i[1]) : i.length === 4 ? (this.opts.marginTop = i[0], this.opts.marginRight = i[1], this.opts.marginBottom = i[2], this.opts.marginLeft = i[3]) : (e = a.parseHeight(this.opts.margin), this.opts.marginUnit = e.unit, t = this.opts.margin = e.h), this.opts.marginTop === void 0 ? this.opts.marginTop = t : (e = a.parseHeight(this.opts.marginTop), this.opts.marginTop = e.h, delete this.opts.margin), this.opts.marginBottom === void 0 ? this.opts.marginBottom = t : (e = a.parseHeight(this.opts.marginBottom), this.opts.marginBottom = e.h, delete this.opts.margin), this.opts.marginRight === void 0 ? this.opts.marginRight = t : (e = a.parseHeight(this.opts.marginRight), this.opts.marginRight = e.h, delete this.opts.margin), this.opts.marginLeft === void 0 ? this.opts.marginLeft = t : (e = a.parseHeight(this.opts.marginLeft), this.opts.marginLeft = e.h, delete this.opts.margin), this.opts.marginUnit = e.unit, this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight && (this.opts.margin = this.opts.marginTop), this;
+  }
+  /* ===========================================================================================
+   * drag&drop methods that used to be stubbed out and implemented in dd-gridstack.ts
+   * but caused loading issues in prod - see https://github.com/gridstack/gridstack.js/issues/2039
+   * ===========================================================================================
+   */
+  /** get the global (but static to this code) DD implementation */
+  static getDD() {
+    return k;
+  }
+  /**
+   * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
+   * Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
+   * is dynamically create and needs to be set later.
+   * @param dragIn string selector (ex: '.sidebar-item') or list of dom elements
+   * @param dragInOptions options - see DDDragOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
+   * @param widgets GridStackWidget def to assign to each element which defines what to create on drop
+   * @param root optional root which defaults to document (for shadow dom pass the parent HTMLDocument)
+   */
+  static setupDragIn(e, t, i, s = document) {
+    (t == null ? void 0 : t.pause) !== void 0 && (m.pauseDrag = t.pause), t = { appendTo: "body", helper: "clone", ...t || {} }, (typeof e == "string" ? a.getElements(e, s) : e).forEach((o, n) => {
+      k.isDraggable(o) || k.dragIn(o, t), i != null && i[n] && (o.gridstackNode = i[n]);
+    });
+  }
+  /**
+   * Enables/Disables dragging by the user of specific grid element. If you want all items, and have it affect future items, use enableMove() instead. No-op for static grids.
+   * IF you are looking to prevent an item from moving (due to being pushed around by another during collision) use locked property instead.
+   * @param els widget or selector to modify.
+   * @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 : (g.getElements(e).forEach((i) => {
+      const s = i.gridstackNode;
+      s && (t ? delete s.noMove : s.noMove = !0, this._prepareDragDropByNode(s));
+    }), this);
+  }
+  /**
+   * Enables/Disables user resizing of specific grid element. If you want all items, and have it affect future items, use enableResize() instead. No-op for static grids.
+   * @param els  widget or selector to modify
+   * @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 : (g.getElements(e).forEach((i) => {
+      const s = i.gridstackNode;
+      s && (t ? delete s.noResize : s.noResize = !0, this._prepareDragDropByNode(s));
+    }), this);
+  }
+  /**
+   * Temporarily disables widgets moving/resizing.
+   * If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
+   * Note: no-op for static grid
+   * This is a shortcut for:
+   * @example
+   *  grid.enableMove(false);
+   *  grid.enableResize(false);
+   * @param recurse true (default) if sub-grids also get updated
+   */
+  disable(e = !0) {
+    if (!this.opts.staticGrid)
+      return this.enableMove(!1, e), this.enableResize(!1, e), this._triggerEvent("disable"), this;
+  }
+  /**
+   * Re-enables widgets moving/resizing - see disable().
+   * Note: no-op for static grid.
+   * This is a shortcut for:
+   * @example
+   *  grid.enableMove(true);
+   *  grid.enableResize(true);
+   * @param recurse true (default) if sub-grids also get updated
+   */
+  enable(e = !0) {
+    if (!this.opts.staticGrid)
+      return this.enableMove(!0, e), this.enableResize(!0, e), this._triggerEvent("enable"), this;
+  }
+  /**
+   * Enables/disables widget moving. No-op for static grids, and locally defined items still overrule
+   * @param recurse true (default) if sub-grids also get updated
+   */
+  enableMove(e, t = !0) {
+    return this.opts.staticGrid ? this : (e ? delete this.opts.disableDrag : this.opts.disableDrag = !0, this.engine.nodes.forEach((i) => {
+      this._prepareDragDropByNode(i), i.subGrid && t && i.subGrid.enableMove(e, t);
+    }), this);
+  }
+  /**
+   * Enables/disables widget resizing. No-op for static grids.
+   * @param recurse true (default) if sub-grids also get updated
+   */
+  enableResize(e, t = !0) {
+    return this.opts.staticGrid ? this : (e ? delete this.opts.disableResize : this.opts.disableResize = !0, this.engine.nodes.forEach((i) => {
+      this._prepareDragDropByNode(i), i.subGrid && t && i.subGrid.enableResize(e, t);
+    }), this);
+  }
+  /** @internal call when drag (and drop) needs to be cancelled (Esc key) */
+  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 && g._itemRemoving(e.el, !1), this.engine.restoreInitial());
+  }
+  /** @internal removes any drag&drop present (called during destroy) */
+  _removeDD(e) {
+    return k.draggable(e, "destroy").resizable(e, "destroy"), e.gridstackNode && delete e.gridstackNode._initDD, delete e.ddElement, this;
+  }
+  /** @internal called to add drag over to support widgets being added externally */
+  _setupAcceptWidget() {
+    if (this.opts.staticGrid || !this.opts.acceptWidgets && !this.opts.removable)
+      return k.droppable(this.el, "destroy"), this;
+    let e, t;
+    const i = (s, r, o) => {
+      var f;
+      o = o || r;
+      const n = o.gridstackNode;
+      if (!n)
+        return;
+      if (!((f = n.grid) != null && f.el)) {
+        o.style.transform = `scale(${1 / this.dragTransform.xScale},${1 / this.dragTransform.yScale})`;
+        const _ = o.getBoundingClientRect();
+        o.style.left = _.x + (this.dragTransform.xScale - 1) * (s.clientX - _.x) / this.dragTransform.xScale + "px", o.style.top = _.y + (this.dragTransform.yScale - 1) * (s.clientY - _.y) / this.dragTransform.yScale + "px", o.style.transformOrigin = "0px 0px";
+      }
+      let { top: l, left: h } = o.getBoundingClientRect();
+      const d = this.el.getBoundingClientRect();
+      h -= d.left, l -= d.top;
+      const u = {
+        position: {
+          top: l * this.dragTransform.xScale,
+          left: h * this.dragTransform.yScale
+        }
+      };
+      if (n._temporaryRemoved) {
+        if (n.x = Math.max(0, Math.round(h / t)), n.y = Math.max(0, Math.round(l / e)), delete n.autoPosition, this.engine.nodeBoundFix(n), !this.engine.willItFit(n)) {
+          if (n.autoPosition = !0, !this.engine.willItFit(n)) {
+            k.off(r, "drag");
+            return;
+          }
+          n._willFitPos && (a.copyPos(n, n._willFitPos), delete n._willFitPos);
+        }
+        this._onStartMoving(o, s, u, n, t, e);
+      } else
+        this._dragOrResize(o, s, u, n, t, e);
+    };
+    return k.droppable(this.el, {
+      accept: (s) => {
+        const r = s.gridstackNode || this._readAttr(s, !1);
+        if ((r == null ? void 0 : r.grid) === this)
+          return !0;
+        if (!this.opts.acceptWidgets)
+          return !1;
+        let o = !0;
+        if (typeof this.opts.acceptWidgets == "function")
+          o = this.opts.acceptWidgets(s);
+        else {
+          const n = this.opts.acceptWidgets === !0 ? ".grid-stack-item" : this.opts.acceptWidgets;
+          o = s.matches(n);
+        }
+        if (o && r && this.opts.maxRow) {
+          const n = { w: r.w, h: r.h, minW: r.minW, minH: r.minH };
+          o = this.engine.willItFit(n);
+        }
+        return o;
+      }
+    }).on(this.el, "dropover", (s, r, o) => {
+      let n = (o == null ? void 0 : o.gridstackNode) || r.gridstackNode;
+      if ((n == null ? void 0 : n.grid) === this && !n._temporaryRemoved)
+        return !1;
+      if (n != null && n.grid && n.grid !== this && !n._temporaryRemoved && n.grid._leave(r, o), o = o || r, t = this.cellWidth(), e = this.getCellHeight(!0), !n) {
+        const d = o.getAttribute("data-gs-widget") || o.getAttribute("gridstacknode");
+        if (d) {
+          try {
+            n = JSON.parse(d);
+          } catch {
+            console.error("Gridstack dropover: Bad JSON format: ", d);
+          }
+          o.removeAttribute("data-gs-widget"), o.removeAttribute("gridstacknode");
+        }
+        n || (n = this._readAttr(o));
+      }
+      n.grid || (n.el || (n = { ...n }), n._isExternal = !0, o.gridstackNode = n);
+      const l = 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: l, 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 = l, n.h = h, n._temporaryRemoved = !0), g._itemRemoving(n.el, !1), k.on(r, "drag", i), i(s, r, o), !1;
+    }).on(this.el, "dropout", (s, r, o) => {
+      const n = (o == null ? void 0 : o.gridstackNode) || r.gridstackNode;
+      return n && (!n.grid || n.grid === this) && (this._leave(r, o), this._isTemp && this.removeAsSubGrid(n)), !1;
+    }).on(this.el, "drop", (s, r, o) => {
+      var _, v, b;
+      const n = (o == null ? void 0 : o.gridstackNode) || r.gridstackNode;
+      if ((n == null ? void 0 : n.grid) === this && !n._isExternal)
+        return !1;
+      const l = !!this.placeholder.parentElement, h = r !== o;
+      this.placeholder.remove(), delete this.placeholder.gridstackNode;
+      const d = l && this.opts.animate;
+      d && this.setAnimation(!1);
+      const u = r._gridstackNodeOrig;
+      if (delete r._gridstackNodeOrig, l && (u != null && u.grid) && u.grid !== this) {
+        const p = u.grid;
+        p.engine.removeNodeFromLayoutCache(u), p.engine.removedNodes.push(u), p._triggerRemoveEvent()._triggerChangeEvent(), p.parentGridNode && !p.engine.nodes.length && p.opts.subGridDynamic && p.removeAsSubGrid();
+      }
+      if (!n || (l && (this.engine.cleanupNode(n), n.grid = this), (_ = n.grid) == null || delete _._isTemp, k.off(r, "drag"), o !== r ? (o.remove(), r = o) : r.remove(), this._removeDD(r), !l))
+        return !1;
+      const f = (b = (v = n.subGrid) == null ? void 0 : v.el) == null ? void 0 : b.gridstack;
+      return a.copyPos(n, this._readAttr(this.placeholder)), a.removePositioningStyles(r), h && (n.content || n.subGridOpts || g.addRemoveCB) ? (delete n.el, r = this.addWidget(n)) : (this._prepareElement(r, !0, n), this.el.appendChild(r), this.resizeToContentCheck(!1, n), f && (f.parentGridNode = n, f.opts.styleInHead || f._updateStyles(!0)), this._updateContainerHeight()), this.engine.addedNodes.push(n), this._triggerAddEvent(), this._triggerChangeEvent(), this.engine.endUpdate(), this._gsEventHandler.dropped && this._gsEventHandler.dropped({ ...s, type: "dropped" }, u && u.grid ? u : void 0, n), d && this.setAnimation(this.opts.animate, !0), !1;
+    }), this;
+  }
+  /** @internal mark item for removal */
+  static _itemRemoving(e, t) {
+    if (!e)
+      return;
+    const i = e ? e.gridstackNode : void 0;
+    !(i != null && i.grid) || e.classList.contains(i.grid.opts.removableOptions.decline) || (t ? i._isAboutToRemove = !0 : delete i._isAboutToRemove, t ? e.classList.add("grid-stack-item-removing") : e.classList.remove("grid-stack-item-removing"));
+  }
+  /** @internal called to setup a trash drop zone if the user specifies it */
+  _setupRemoveDrop() {
+    if (typeof this.opts.removable != "string")
+      return this;
+    const e = document.querySelector(this.opts.removable);
+    return e ? (!this.opts.staticGrid && !k.isDroppable(e) && k.droppable(e, this.opts.removableOptions).on(e, "dropover", (t, i) => g._itemRemoving(i, !0)).on(e, "dropout", (t, i) => g._itemRemoving(i, !1)), this) : this;
+  }
+  /** @internal prepares the element for drag&drop */
+  _prepareDragDropByNode(e) {
+    const t = e.el, i = e.noMove || this.opts.disableDrag, s = e.noResize || this.opts.disableResize;
+    if (this.opts.staticGrid || i && s)
+      return e._initDD && (this._removeDD(t), delete e._initDD), t.classList.add("ui-draggable-disabled", "ui-resizable-disabled"), this;
+    if (!e._initDD) {
+      let r, o;
+      const n = (d, u) => {
+        this._gsEventHandler[d.type] && this._gsEventHandler[d.type](d, d.target), r = this.cellWidth(), o = this.getCellHeight(!0), this._onStartMoving(t, d, u, e, r, o);
+      }, l = (d, u) => {
+        this._dragOrResize(t, d, u, e, r, o);
+      }, h = (d) => {
+        this.placeholder.remove(), delete this.placeholder.gridstackNode, delete e._moving, delete e._event, delete e._lastTried;
+        const u = e.w !== e._orig.w, f = d.target;
+        if (!(!f.gridstackNode || f.gridstackNode.grid !== this)) {
+          if (e.el = f, e._isAboutToRemove) {
+            const _ = t.gridstackNode.grid;
+            _._gsEventHandler[d.type] && _._gsEventHandler[d.type](d, f), _.engine.nodes.push(e), _.removeWidget(t, !0, !0);
+          } else
+            a.removePositioningStyles(f), e._temporaryRemoved ? (a.copyPos(e, e._orig), this._writePosAttr(f, e), this.engine.addNode(e)) : this._writePosAttr(f, e), this._gsEventHandler[d.type] && this._gsEventHandler[d.type](d, f);
+          this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), d.type === "resizestop" && (Number.isInteger(e.sizeToContent) && (e.sizeToContent = e.h), this.resizeToContentCheck(u, e));
+        }
+      };
+      k.draggable(t, {
+        start: n,
+        stop: h,
+        drag: l
+      }).resizable(t, {
+        start: n,
+        stop: h,
+        resize: l
+      }), e._initDD = !0;
+    }
+    return k.draggable(t, i ? "disable" : "enable").resizable(t, s ? "disable" : "enable"), this;
+  }
+  /** @internal handles actual drag/resize start */
+  _onStartMoving(e, t, i, s, r, o) {
+    var n;
+    if (this.engine.cleanNodes().beginUpdate(s), this._writePosAttr(this.placeholder, s), this.el.appendChild(this.placeholder), this.placeholder.gridstackNode = s, (n = s.grid) != null && n.el)
+      this.dragTransform = a.getValuesFromTransformedElement(e);
+    else if (this.placeholder && this.placeholder.closest(".grid-stack")) {
+      const l = this.placeholder.closest(".grid-stack");
+      this.dragTransform = a.getValuesFromTransformedElement(l);
+    } else
+      this.dragTransform = {
+        xScale: 1,
+        xOffset: 0,
+        yScale: 1,
+        yOffset: 0
+      };
+    if (s.el = this.placeholder, s._lastUiPosition = i.position, s._prevYPix = i.position.top, s._moving = t.type === "dragstart", delete s._lastTried, t.type === "dropover" && s._temporaryRemoved && (this.engine.addNode(s), s._moving = !0), this.engine.cacheRects(r, o, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft), t.type === "resizestart") {
+      const l = this.getColumn() - s.x, h = (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - s.y;
+      k.resizable(e, "option", "minWidth", r * Math.min(s.minW || 1, l)).resizable(e, "option", "minHeight", o * Math.min(s.minH || 1, h)).resizable(e, "option", "maxWidth", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, l)).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 */
+  _dragOrResize(e, t, i, s, r, o) {
+    const n = { ...s._orig };
+    let l, h = this.opts.marginLeft, d = this.opts.marginRight, u = this.opts.marginTop, f = this.opts.marginBottom;
+    const _ = Math.round(o * 0.1), v = Math.round(r * 0.1);
+    if (h = Math.min(h, v), d = Math.min(d, v), u = Math.min(u, _), f = Math.min(f, _), t.type === "drag") {
+      if (s._temporaryRemoved)
+        return;
+      const p = i.position.top - s._prevYPix;
+      s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && a.updateScrollPosition(e, i.position, p);
+      const w = i.position.left + (i.position.left > s._lastUiPosition.left ? -d : h), C = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : u);
+      n.x = Math.round(w / r), n.y = Math.round(C / o);
+      const D = this._extraDragRow;
+      if (this.engine.collide(s, n)) {
+        const z = this.getRow();
+        let R = Math.max(0, n.y + s.h - z);
+        this.opts.maxRow && z + R > this.opts.maxRow && (R = Math.max(0, this.opts.maxRow - z)), this._extraDragRow = R;
+      } else
+        this._extraDragRow = 0;
+      if (this._extraDragRow !== D && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
+        return;
+    } else if (t.type === "resize") {
+      if (n.x < 0 || (a.updateScrollResize(t, e, o), n.w = Math.round((i.size.width - h) / r), n.h = Math.round((i.size.height - u) / o), s.w === n.w && s.h === n.h) || s._lastTried && s._lastTried.w === n.w && s._lastTried.h === n.h)
+        return;
+      const p = i.position.left + h, w = i.position.top + u;
+      n.x = Math.round(p / r), n.y = Math.round(w / o), l = !0;
+    }
+    s._event = t, s._lastTried = n;
+    const b = {
+      x: i.position.left + h,
+      y: i.position.top + u,
+      w: (i.size ? i.size.width : s.w * r) - h - d,
+      h: (i.size ? i.size.height : s.h * o) - u - f
+    };
+    if (this.engine.moveNodeCheck(s, { ...n, cellWidth: r, cellHeight: o, rect: b, resizing: l })) {
+      s._lastUiPosition = i.position, this.engine.cacheRects(r, o, u, d, f, h), delete s._skipDown, l && s.subGrid && s.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
+      const p = t.target;
+      this._writePosAttr(p, s), this._gsEventHandler[t.type] && this._gsEventHandler[t.type](t, p);
+    }
+  }
+  /** @internal called when item leaving our area by either cursor dropout event
+   * or shape is outside our boundaries. remove it from us, and mark temporary if this was
+   * our item to start with else restore prev node values from prev grid it came from.
+   */
+  _leave(e, t) {
+    t = t || e;
+    const i = t.gridstackNode;
+    i && (t.style.transform = t.style.transformOrigin = null, k.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 && g._itemRemoving(e, !0), e._gridstackNodeOrig ? (e.gridstackNode = e._gridstackNodeOrig, delete e._gridstackNodeOrig) : i._isExternal && this.engine.restoreInitial()));
+  }
+  // legacy method removed
+  commit() {
+    return Ot(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
+  }
+}
+g.renderCB = (c, e) => {
+  c && (e != null && e.content) && (c.textContent = e.content);
+};
+g.resizeToContentParent = ".grid-stack-item-content";
+g.Utils = a;
+g.Engine = P;
+g.GDRev = "11.3.0";
+const Bt = ["data-index", "gs-h", "gs-w", "gs-x", "gs-y"], qt = { class: "grid-stack-item-content" }, Ut = /* @__PURE__ */ M({
+  __name: "DraggableGridLayout",
+  props: {
+    tiles: {},
+    gridSize: {},
+    tileHeight: { default: 200 }
+  },
+  emits: ["update-tiles"],
+  setup(c, { emit: e }) {
+    const t = c, i = e, s = U(null);
+    let r = null;
+    return De(() => {
+      s.value && (r = g.init({
+        column: t.gridSize.cols,
+        cellHeight: t.tileHeight,
+        resizable: { handles: "all" }
+      }, s.value), r.on("change", (o, n) => {
+        const l = t.tiles.map((h, d) => {
+          const u = n.find((f) => {
+            var _;
+            return Number((_ = f.el) == null ? void 0 : _.getAttribute("data-index")) === d;
+          });
+          return u ? {
+            ...h,
+            layout: {
+              position: { col: u.x, row: u.y },
+              size: { cols: u.w, rows: u.h }
+            }
+          } : h;
+        });
+        i("update-tiles", l);
+      }));
+    }), le(() => {
+      r && r.destroy(!1);
+    }), Ee(() => t.tiles, (o) => {
+      r && s.value && o.forEach((n, l) => {
+        var d;
+        const h = (d = s.value) == null ? void 0 : d.querySelector(`[data-index="${l}"]`);
+        h && (r == null || r.update(h, {
+          x: n.layout.position.col,
+          y: n.layout.position.row,
+          w: n.layout.size.cols,
+          h: n.layout.size.rows
+        }));
+      });
+    }, { deep: !0 }), (o, n) => (E(), L("div", {
+      ref_key: "gridContainer",
+      ref: s,
+      class: "grid-stack"
+    }, [
+      (E(!0), L(ze, null, Se(o.tiles, (l, h) => (E(), L("div", {
+        key: "tile-" + h,
+        class: "grid-stack-item",
+        "data-index": h,
+        "gs-h": l.layout.size.rows,
+        "gs-w": l.layout.size.cols,
+        "gs-x": l.layout.position.col,
+        "gs-y": l.layout.position.row
+      }, [
+        K("div", qt, [
+          ne(o.$slots, "tile", { tile: l })
+        ])
+      ], 8, Bt))), 128))
+    ], 512));
+  }
+}), $t = { class: "kong-ui-public-dashboard-renderer" }, Ft = {
   key: 0,
   class: "tile-container"
-}, ft = /* @__PURE__ */ k({
+}, Gt = /* @__PURE__ */ M({
   __name: "DashboardRenderer",
   props: {
     context: {},
-    config: {}
+    config: {},
+    draggable: { type: Boolean, default: !1 }
   },
-  emits: ["edit-tile"],
-  setup(a, { expose: t, emit: e }) {
-    const r = a, s = e, { i18n: o } = $.useI18n(), c = O(0), i = B(P);
-    i || (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"));
-    const u = Fe(), y = g(() => r.context.timeSpec ? r.context.timeSpec : {
+  emits: ["edit-tile", "update-tiles"],
+  setup(c, { expose: e, emit: t }) {
+    const i = c, s = t, { i18n: r } = F.useI18n(), o = U(0), n = j(Q);
+    n || (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"));
+    const l = tt(), h = S(() => i.context.timeSpec ? i.context.timeSpec : {
       type: "relative",
-      time_range: u.defaultQueryTimeForOrg
-    }), D = g(() => !!r.context.timeSpec || !u.loading), x = g(() => r.config.tiles.map((h, E) => {
-      var v;
-      let p = h.definition;
-      if ("description" in p.chart) {
-        const T = (v = p.chart.description) == null ? void 0 : v.replace(Ge, () => {
-          const f = `renderer.trendRange.${y.value.type === "absolute" ? "custom" : y.value.time_range}`;
-          return o.te(f) ? o.t(f) : "";
+      time_range: l.defaultQueryTimeForOrg
+    }), d = S(() => !!i.context.timeSpec || !l.loading), u = S(() => i.config.tiles.map((p, w) => {
+      var D;
+      let C = p.definition;
+      if ("description" in C.chart) {
+        const z = (D = C.chart.description) == null ? void 0 : D.replace(ut, () => {
+          const y = `renderer.trendRange.${h.value.type === "absolute" ? "custom" : h.value.time_range}`;
+          return r.te(y) ? r.t(y) : "";
         });
-        p = {
-          ...p,
+        C = {
+          ...C,
           chart: {
-            ...p.chart,
-            description: T
+            ...C.chart,
+            description: z
           }
         };
       }
       return {
-        layout: h.layout,
-        meta: p,
+        layout: p.layout,
+        meta: C,
         // Add a unique key to each tile internally.
-        id: E
+        id: w
       };
-    })), m = g(() => {
-      let { tz: h, refreshInterval: E, editable: p } = r.context;
-      return h || (h = new Intl.DateTimeFormat().resolvedOptions().timeZone), E === void 0 && (E = Ve), p === void 0 && (p = !1), {
-        ...r.context,
-        tz: h,
-        timeSpec: y.value,
-        refreshInterval: E,
-        editable: p
+    })), f = S(() => {
+      let { tz: p, refreshInterval: w, editable: C } = i.context;
+      return p || (p = new Intl.DateTimeFormat().resolvedOptions().timeZone), w === void 0 && (w = ct), C === void 0 && (C = !1), {
+        ...i.context,
+        tz: p,
+        timeSpec: h.value,
+        refreshInterval: w,
+        editable: C
       };
-    }), I = (h) => {
-      s("edit-tile", h);
+    }), _ = (p) => {
+      s("edit-tile", p);
+    }, v = () => {
+      o.value++;
+    }, b = (p) => {
+      const w = p.map((C) => ({
+        layout: C.layout,
+        definition: C.meta
+      }));
+      s("update-tiles", w);
     };
-    return t({ refresh: () => {
-      c.value++;
-    } }), (h, E) => {
-      const p = N("KAlert");
-      return d(), R("div", ht, [
-        l(i) ? (d(), _(yt, {
+    return e({ refresh: v }), (p, w) => {
+      const C = W("KAlert");
+      return E(), L("div", $t, [
+        x(n) ? (E(), T(Re(p.draggable ? Ut : Lt), {
           key: 1,
-          "grid-size": h.config.gridSize,
-          "tile-height": h.config.tileHeight,
-          tiles: x.value
+          "grid-size": p.config.gridSize,
+          "tile-height": p.config.tileHeight,
+          tiles: u.value,
+          onUpdateTiles: b
         }, {
-          tile: b(({ tile: v }) => [
-            v.meta.chart.type === "slottable" ? (d(), R("div", mt, [
-              V(h.$slots, v.meta.chart.id, {}, void 0, !0)
-            ])) : (d(), _(ut, {
+          tile: H(({ tile: D }) => [
+            D.meta.chart.type === "slottable" ? (E(), L("div", Ft, [
+              ne(p.$slots, D.meta.chart.id, {}, void 0, !0)
+            ])) : (E(), T(Nt, {
               key: 1,
               class: "tile-container",
-              context: m.value,
-              definition: v.meta,
-              height: v.layout.size.rows * (h.config.tileHeight || l(H)) + parseInt(l(se), 10),
-              "query-ready": D.value,
-              "refresh-counter": c.value,
-              "tile-id": v.id,
-              onEditTile: (T) => I(v)
+              context: f.value,
+              definition: D.meta,
+              height: D.layout.size.rows * (p.config.tileHeight || x(he)) + parseInt(x(He), 10),
+              "query-ready": d.value,
+              "refresh-counter": o.value,
+              "tile-id": D.id,
+              onEditTile: (z) => _(D)
             }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "tile-id", "onEditTile"]))
           ]),
           _: 3
-        }, 8, ["grid-size", "tile-height", "tiles"])) : (d(), _(p, {
+        }, 40, ["grid-size", "tile-height", "tiles"])) : (E(), T(C, {
           key: 0,
           appearance: "danger"
         }, {
-          default: b(() => [
-            U(L(l(o).t("renderer.noQueryBridge")), 1)
+          default: H(() => [
+            re(G(x(r).t("renderer.noQueryBridge")), 1)
           ]),
           _: 1
         }))
       ]);
     };
   }
-}), kt = /* @__PURE__ */ z(ft, [["__scopeId", "data-v-6ee19c24"]]);
+}), ii = /* @__PURE__ */ V(Gt, [["__scopeId", "data-v-57e1dfb8"]]);
 export {
-  Ue as CP_ID_TOKEN,
-  H as DEFAULT_TILE_HEIGHT,
-  Ve as DEFAULT_TILE_REFRESH_INTERVAL_MS,
-  kt as DashboardRenderer,
-  Z as ENTITY_ID_TOKEN,
-  yt as GridLayout,
-  P as INJECT_QUERY_PROVIDER,
-  Ge as TIMEFRAME_TOKEN
+  dt as CP_ID_TOKEN,
+  he as DEFAULT_TILE_HEIGHT,
+  ct as DEFAULT_TILE_REFRESH_INTERVAL_MS,
+  ii as DashboardRenderer,
+  pe as ENTITY_ID_TOKEN,
+  Lt as GridLayout,
+  Q as INJECT_QUERY_PROVIDER,
+  ut as TIMEFRAME_TOKEN
 };