@tenorlab/vue-dashboard 1.4.3 → 1.4.4

package/dist/vue-dashboard.es.js

@@ -1,127 +1,127 @@
-import { reactive as ie, computed as p, readonly as fe, defineComponent as b, createElementBlock as C, openBlock as d, normalizeClass as h, createElementVNode as o, createStaticVNode as te, withModifiers as T, normalizeStyle as se, renderSlot as z, mergeProps as G, createBlock as K, withCtx as B, unref as f, toDisplayString as E, ref as R, onMounted as Ce, onUnmounted as ve, shallowRef as we, watchEffect as ye, defineAsyncComponent as xe, resolveComponent as be, Suspense as _e, resolveDynamicComponent as ae, createCommentVNode as O, Fragment as U, renderList as F, createVNode as I, createTextVNode as re, withKeys as oe, watch as ke } from "vue";
-import { blankDashboardConfig as ee, ensureContainersSequence as $e, getDistinctCssClasses as L, ensureZoomScaleIsWithinRange as Ie, parseContainerTitle as de, dashboardSettingsUtils as De, getWidgetMetaFromCatalog as We } from "./core.es.js";
-const Be = (t) => {
-  const s = t.widgets.filter((i) => i.includes("WidgetContainer")).map((i) => Number(i.split("_")[1].replace("container", "")));
+import { reactive as de, computed as f, readonly as we, defineComponent as b, createElementBlock as C, openBlock as d, normalizeClass as h, createElementVNode as o, createStaticVNode as se, withModifiers as j, normalizeStyle as oe, renderSlot as A, mergeProps as G, createBlock as S, withCtx as B, unref as w, toDisplayString as H, ref as R, onMounted as ye, onUnmounted as xe, shallowRef as ne, watchEffect as be, markRaw as re, h as O, resolveComponent as _e, Suspense as ke, resolveDynamicComponent as le, createSlots as $e, Fragment as U, renderList as F, createVNode as D, createTextVNode as ce, withKeys as ie, watch as Ie, createCommentVNode as Y } from "vue";
+import { blankDashboardConfig as te, ensureContainersSequence as De, getDistinctCssClasses as L, ensureZoomScaleIsWithinRange as We, parseContainerTitle as ue, dashboardSettingsUtils as Be, getWidgetMetaFromCatalog as Ke } from "./core.es.js";
+const Me = (t) => {
+  const s = t.widgets.filter((n) => n.includes("WidgetContainer")).map((n) => Number(n.split("_")[1].replace("container", "")));
   return `container${s.length > 0 ? Math.max(...s) + 1 : 1}`;
-}, Ke = (t, s) => {
-  const e = Be(t);
+}, Se = (t, s) => {
+  const e = Me(t);
   return `${s}_${e}`;
-}, Me = (t) => {
-  const { dashboardConfig: s, widgetKey: e, parentWidgetKey: i, noDuplicatedWidgets: n } = t;
-  if (i) {
-    if (n && s.childWidgetsConfig.find(
-      (r) => r.parentWidgetKey === i && r.widgetKey === e
+}, Ee = (t) => {
+  const { dashboardConfig: s, widgetKey: e, parentWidgetKey: n, noDuplicatedWidgets: r } = t;
+  if (n) {
+    if (r && s.childWidgetsConfig.find(
+      (l) => l.parentWidgetKey === n && l.widgetKey === e
     ))
       return {
         success: !1,
         message: `DashboardStore: addWidget: Widget already added (${e})`,
         updatedDashboardConfig: s
       };
-    const a = [
+    const i = [
       ...s.childWidgetsConfig,
-      { parentWidgetKey: i, widgetKey: e }
+      { parentWidgetKey: n, widgetKey: e }
       // new entry
     ];
     return {
       success: !0,
       updatedDashboardConfig: {
         ...s,
-        childWidgetsConfig: a
+        childWidgetsConfig: i
       }
     };
   } else {
-    if (n && s.widgets.includes(e))
+    if (r && s.widgets.includes(e))
       return {
         success: !1,
         message: `DashboardStore: addWidget: Widget already added (${e})`,
         updatedDashboardConfig: s
       };
-    const a = [...s.widgets, e];
+    const i = [...s.widgets, e];
     return {
       success: !0,
       updatedDashboardConfig: {
         ...s,
-        widgets: a
+        widgets: i
       }
     };
   }
-}, Se = (t, s, e) => {
+}, Ne = (t, s, e) => {
   if ((e || "").trim().length > 0) {
-    const i = t.childWidgetsConfig.filter(
+    const n = t.childWidgetsConfig.filter(
       (c) => c.parentWidgetKey !== e
-    ), n = t.childWidgetsConfig.filter(
+    ), r = t.childWidgetsConfig.filter(
       (c) => c.parentWidgetKey === e && c.widgetKey !== s
-    ), a = [...i, ...n];
-    let r = {
+    ), i = [...n, ...r];
+    let l = {
       ...t,
-      childWidgetsConfig: a
+      childWidgetsConfig: i
     };
-    return `${s}`.includes("Container") && (r = $e(r)), {
+    return `${s}`.includes("Container") && (l = De(l)), {
       success: !0,
-      updatedDashboardConfig: r
+      updatedDashboardConfig: l
     };
   } else {
-    const i = t.widgets.filter((a) => a !== s), n = t.childWidgetsConfig.filter(
-      (a) => a.parentWidgetKey !== s
+    const n = t.widgets.filter((i) => i !== s), r = t.childWidgetsConfig.filter(
+      (i) => i.parentWidgetKey !== s
     );
     return {
       success: !0,
       updatedDashboardConfig: {
         ...t,
-        widgets: i,
-        childWidgetsConfig: n
+        widgets: n,
+        childWidgetsConfig: r
       }
     };
   }
-}, Ee = (t, s, e, i) => {
-  if ((i || "").trim().length > 0) {
-    const n = t.childWidgetsConfig.filter(
-      (u) => u.parentWidgetKey !== i
+}, Le = (t, s, e, n) => {
+  if ((n || "").trim().length > 0) {
+    const r = t.childWidgetsConfig.filter(
+      (p) => p.parentWidgetKey !== n
     );
-    let a = t.childWidgetsConfig.filter(
-      (u) => u.parentWidgetKey === i
+    let i = t.childWidgetsConfig.filter(
+      (p) => p.parentWidgetKey === n
     );
-    const r = a.indexOf(e);
-    let w = r + s;
-    if (w = Math.max(0, w), w = Math.min(a.length - 1, w), w === r)
+    const l = i.indexOf(e);
+    let m = l + s;
+    if (m = Math.max(0, m), m = Math.min(i.length - 1, m), m === l)
       return {
         success: !1,
         message: `DashboardStore: moveWidget: Widget already at min/max position (${e})`,
         updatedDashboardConfig: t
       };
-    const c = [...a], [g] = c.splice(r, 1);
-    return c.splice(w, 0, g), {
+    const c = [...i], [y] = c.splice(l, 1);
+    return c.splice(m, 0, y), {
       success: !0,
       updatedDashboardConfig: {
         ...t,
-        childWidgetsConfig: [...n, ...c]
+        childWidgetsConfig: [...r, ...c]
       }
     };
   } else {
-    const n = t.widgets || [], a = n.indexOf(e);
-    let r = a + s;
-    if (r = Math.max(0, r), r = Math.min(n.length - 1, r), r === a)
+    const r = t.widgets || [], i = r.indexOf(e);
+    let l = i + s;
+    if (l = Math.max(0, l), l = Math.min(r.length - 1, l), l === i)
       return {
         success: !1,
         message: `DashboardStore: moveWidget: Widget already at min/max position (${e})`,
         updatedDashboardConfig: t
       };
-    const w = [...n], [c] = w.splice(a, 1);
-    return w.splice(r, 0, c), {
+    const m = [...r], [c] = m.splice(i, 1);
+    return m.splice(l, 0, c), {
       success: !0,
       updatedDashboardConfig: {
         ...t,
-        widgets: w
+        widgets: m
       }
     };
   }
-}, Le = () => ({
+}, Te = () => ({
   isLoading: !1,
   // Start uninitialized/not loading
   isEditing: !1,
-  allDashboardConfigs: [ee],
-  currentDashboardConfig: ee
-}), x = ie(Le()), S = {
+  allDashboardConfigs: [te],
+  currentDashboardConfig: te
+}), x = de(Te()), N = {
   setIsLoading: (t) => x.isLoading = t,
   setIsEditing: (t) => x.isEditing = t,
   setTargetContainerKey: (t) => x.targetContainerKey = t,
@@ -142,19 +142,19 @@ const Be = (t) => {
   },
   deleteDashboardConfigById: (t) => {
     const s = [...x.allDashboardConfigs.filter((e) => e.dashboardId !== t)];
-    return x.allDashboardConfigs = s, x.currentDashboardConfig = s[0] || ee, s;
+    return x.allDashboardConfigs = s, x.currentDashboardConfig = s[0] || te, s;
   },
   selectDashboardById: (t) => {
     const s = x.allDashboardConfigs.find((e) => e.dashboardId === t);
     return s && (x.currentDashboardConfig = s), s;
   },
   addWidget: (t) => {
-    const s = Me({
+    const s = Ee({
       dashboardConfig: x.currentDashboardConfig,
       ...t
     }), e = [
       ...x.allDashboardConfigs.filter(
-        (i) => i.dashboardId !== s.updatedDashboardConfig.dashboardId
+        (n) => n.dashboardId !== s.updatedDashboardConfig.dashboardId
       ),
       s.updatedDashboardConfig
     ];
@@ -164,132 +164,132 @@ const Be = (t) => {
     };
   },
   removeWidget: (t, s) => {
-    const e = Se(x.currentDashboardConfig, t, s), i = [
+    const e = Ne(x.currentDashboardConfig, t, s), n = [
       ...x.allDashboardConfigs.filter(
-        (n) => n.dashboardId !== e.updatedDashboardConfig.dashboardId
+        (r) => r.dashboardId !== e.updatedDashboardConfig.dashboardId
       ),
       e.updatedDashboardConfig
     ];
-    return e.success && (x.allDashboardConfigs = i, x.currentDashboardConfig = e.updatedDashboardConfig), {
+    return e.success && (x.allDashboardConfigs = n, x.currentDashboardConfig = e.updatedDashboardConfig), {
       ...e,
-      allUpdatedDashboardConfigs: i
+      allUpdatedDashboardConfigs: n
     };
   },
   moveWidget: (t, s, e) => {
-    const i = Ee(x.currentDashboardConfig, t, s, e), n = [
+    const n = Le(x.currentDashboardConfig, t, s, e), r = [
       ...x.allDashboardConfigs.filter(
-        (a) => a.dashboardId !== i.updatedDashboardConfig.dashboardId
+        (i) => i.dashboardId !== n.updatedDashboardConfig.dashboardId
       ),
-      i.updatedDashboardConfig
+      n.updatedDashboardConfig
     ];
-    return i.success && (x.allDashboardConfigs = n, x.currentDashboardConfig = i.updatedDashboardConfig), {
-      ...i,
-      allUpdatedDashboardConfigs: n
+    return n.success && (x.allDashboardConfigs = r, x.currentDashboardConfig = n.updatedDashboardConfig), {
+      ...n,
+      allUpdatedDashboardConfigs: r
     };
   }
-}, ne = {
-  setIsLoading: (t) => S.setIsLoading(t),
-  setIsEditing: (t) => (t || S.setTargetContainerKey(void 0), S.setIsEditing(t), t),
-  setTargetContainerKey: (t) => S.setTargetContainerKey(t),
-  setAllDashboardConfigs: (t) => S.setAllDashboardConfigs(t),
-  setCurrentDashboardConfig: (t) => S.setCurrentDashboardConfig(t),
-  addDashboardConfig: (t) => S.addDashboardConfig(t),
-  deleteDashboardConfigById: (t) => S.deleteDashboardConfigById(t),
-  selectDashboardById: (t) => S.selectDashboardById(t),
-  addWidget: (t) => S.addWidget(t),
-  removeWidget: (t, s) => S.removeWidget(t, s),
-  moveWidget: (t, s, e) => S.moveWidget(t, s, e)
-}, Ne = {
-  getNextContainerKey: (t) => Ke(x.currentDashboardConfig, t),
+}, ae = {
+  setIsLoading: (t) => N.setIsLoading(t),
+  setIsEditing: (t) => (t || N.setTargetContainerKey(void 0), N.setIsEditing(t), t),
+  setTargetContainerKey: (t) => N.setTargetContainerKey(t),
+  setAllDashboardConfigs: (t) => N.setAllDashboardConfigs(t),
+  setCurrentDashboardConfig: (t) => N.setCurrentDashboardConfig(t),
+  addDashboardConfig: (t) => N.addDashboardConfig(t),
+  deleteDashboardConfigById: (t) => N.deleteDashboardConfigById(t),
+  selectDashboardById: (t) => N.selectDashboardById(t),
+  addWidget: (t) => N.addWidget(t),
+  removeWidget: (t, s) => N.removeWidget(t, s),
+  moveWidget: (t, s, e) => N.moveWidget(t, s, e)
+}, je = {
+  getNextContainerKey: (t) => Se(x.currentDashboardConfig, t),
   getCurrentDashboardConfig: () => x.currentDashboardConfig,
   getCurrentDashboardId: () => x.currentDashboardConfig.dashboardId,
   getIsResponsive: () => x.currentDashboardConfig.responsiveGrid || !1,
   getTargetContainerKey: () => x.targetContainerKey
-}, Te = {
-  isLoading: p(() => x.isLoading),
-  isEditing: p(() => x.isEditing),
-  targetContainerKey: p(() => x.targetContainerKey),
-  currentDashboardConfig: p(() => x.currentDashboardConfig),
-  allDashboardConfigs: p(() => x.allDashboardConfigs.sort((t, s) => {
-    const e = t.dashboardId === "default", i = s.dashboardId === "default";
-    return e && !i ? -1 : i && !e ? 1 : t.dashboardId.localeCompare(s.dashboardId);
+}, ze = {
+  isLoading: f(() => x.isLoading),
+  isEditing: f(() => x.isEditing),
+  targetContainerKey: f(() => x.targetContainerKey),
+  currentDashboardConfig: f(() => x.currentDashboardConfig),
+  allDashboardConfigs: f(() => x.allDashboardConfigs.sort((t, s) => {
+    const e = t.dashboardId === "default", n = s.dashboardId === "default";
+    return e && !n ? -1 : n && !e ? 1 : t.dashboardId.localeCompare(s.dashboardId);
   }))
-}, je = {
-  ...ne,
-  actions: ne,
-  getters: Ne,
-  computed: Te
-}, qt = () => je, M = ie({
+}, He = {
+  ...ae,
+  actions: ae,
+  getters: je,
+  computed: ze
+}, es = () => He, E = de({
   currentDashboardId: "",
   undoHistory: {},
   historyIndex: {}
-}), q = (t) => M.undoHistory[t] || [], Z = (t) => M.historyIndex[t] ?? -1, X = (t, s) => {
-  M.historyIndex[t] = s;
-}, ze = (t) => {
+}), q = (t) => E.undoHistory[t] || [], Z = (t) => E.historyIndex[t] ?? -1, X = (t, s) => {
+  E.historyIndex[t] = s;
+}, Ae = (t) => {
   const s = t.dashboardId;
-  if (M.currentDashboardId !== s) {
-    M.currentDashboardId = s;
+  if (E.currentDashboardId !== s) {
+    E.currentDashboardId = s;
     const e = {
       undoIndex: 0,
       config: t
     };
-    X(s, 0), M.undoHistory[s] = [e];
+    X(s, 0), E.undoHistory[s] = [e];
   }
-}, Ae = (t) => {
-  const s = t.dashboardId, e = q(s), i = Z(s), n = e.slice(0, i + 1), a = {
-    undoIndex: n.length,
-    config: t
-  }, r = [...n, a];
-  M.undoHistory[s] = r, X(s, r.length - 1);
-}, He = (t) => {
-  delete M.undoHistory[t], delete M.historyIndex[t];
 }, Re = (t) => {
-  const s = q(t), e = Z(t), i = Math.max(0, e - 1);
-  if (i !== e)
-    return X(t, i), s[i]?.config;
+  const s = t.dashboardId, e = q(s), n = Z(s), r = e.slice(0, n + 1), i = {
+    undoIndex: r.length,
+    config: t
+  }, l = [...r, i];
+  E.undoHistory[s] = l, X(s, l.length - 1);
 }, Ve = (t) => {
-  const s = q(t), e = s.length, i = Z(t), n = Math.min(e - 1, i + 1);
-  if (n !== i)
+  delete E.undoHistory[t], delete E.historyIndex[t];
+}, Ue = (t) => {
+  const s = q(t), e = Z(t), n = Math.max(0, e - 1);
+  if (n !== e)
     return X(t, n), s[n]?.config;
-}, le = () => {
-  const t = M.currentDashboardId || "", s = Z(t), e = q(t).length, i = s <= 0, n = s >= e - 1;
+}, Fe = (t) => {
+  const s = q(t), e = s.length, n = Z(t), r = Math.min(e - 1, n + 1);
+  if (r !== n)
+    return X(t, r), s[r]?.config;
+}, ge = () => {
+  const t = E.currentDashboardId || "", s = Z(t), e = q(t).length, n = s <= 0, r = s >= e - 1;
   return {
-    isUndoDisabled: i,
-    isRedoDisabled: n,
+    isUndoDisabled: n,
+    isRedoDisabled: r,
     // Optional debugging fields
     _currentIndex: s,
     _historyLength: e
   };
-}, Ue = p(() => le()), Zt = () => ({
-  initializeHistoryForDashboard: ze,
+}, Oe = f(() => ge()), ts = () => ({
+  initializeHistoryForDashboard: Ae,
   resetAllHistory: () => {
-    M.undoHistory = {}, M.historyIndex = {};
+    E.undoHistory = {}, E.historyIndex = {};
   },
-  addUndoEntry: Ae,
-  removeUndoHistoryForDashboard: He,
-  getPreviousChanges: Re,
-  getNextChanges: Ve,
-  computedUndoStatus: Ue,
+  addUndoEntry: Re,
+  removeUndoHistoryForDashboard: Ve,
+  getPreviousChanges: Ue,
+  getNextChanges: Fe,
+  computedUndoStatus: Oe,
   // Function that returns a Vue ComputedRef
-  getUndoStatus: le,
+  getUndoStatus: ge,
   // for unit tests only
   // Expose reactive state for debugging or advanced external use (optional)
-  historyState: fe(M)
+  historyState: we(E)
 });
 function Q(t) {
   return {
-    removeClick: (n, a) => {
-      t("removeClick", n, a);
+    removeClick: (r, i) => {
+      t("removeClick", r, i);
     },
-    moveClick: (n, a, r) => {
-      t("moveClick", n, a, r);
+    moveClick: (r, i, l) => {
+      t("moveClick", r, i, l);
     },
-    selectContainer: (n) => {
-      t("selectContainer", n);
+    selectContainer: (r) => {
+      t("selectContainer", r);
     }
   };
 }
-const Xt = /* @__PURE__ */ b({
+const ss = /* @__PURE__ */ b({
   __name: "AddIcon",
   props: {
     cssClass: {}
@@ -316,7 +316,7 @@ const Xt = /* @__PURE__ */ b({
       o("path", { d: "M12 8v8" }, null, -1)
     ])], 2));
   }
-}), Qt = /* @__PURE__ */ b({
+}), os = /* @__PURE__ */ b({
   __name: "DeleteIcon",
   props: {
     cssClass: {}
@@ -334,10 +334,10 @@ const Xt = /* @__PURE__ */ b({
       "stroke-linejoin": "round",
       class: h(`lucide lucide-trash2-icon lucide-trash-2 ${t.cssClass || ""}`.trim())
     }, [...e[0] || (e[0] = [
-      te('<path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>', 5)
+      se('<path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>', 5)
     ])], 2));
   }
-}), Yt = /* @__PURE__ */ b({
+}), ns = /* @__PURE__ */ b({
   __name: "EditIcon",
   props: {
     cssClass: {}
@@ -359,7 +359,7 @@ const Xt = /* @__PURE__ */ b({
       o("path", { d: "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" }, null, -1)
     ])], 2));
   }
-}), Jt = /* @__PURE__ */ b({
+}), rs = /* @__PURE__ */ b({
   __name: "GridIcon",
   props: {
     cssClass: {}
@@ -377,10 +377,10 @@ const Xt = /* @__PURE__ */ b({
       "stroke-linejoin": "round",
       class: h(`lucide lucide-grid3x3-icon lucide-grid-3x3 ${t.cssClass || ""}`.trim())
     }, [...e[0] || (e[0] = [
-      te('<rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path><path d="M9 3v18"></path><path d="M15 3v18"></path>', 5)
+      se('<rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path><path d="M9 3v18"></path><path d="M15 3v18"></path>', 5)
     ])], 2));
   }
-}), Fe = /* @__PURE__ */ b({
+}), Pe = /* @__PURE__ */ b({
   __name: "SettingsIcon",
   props: {
     cssClass: {}
@@ -406,7 +406,7 @@ const Xt = /* @__PURE__ */ b({
       }, null, -1)
     ])], 2));
   }
-}), es = /* @__PURE__ */ b({
+}), is = /* @__PURE__ */ b({
   __name: "ZoomInIcon",
   props: {
     cssClass: {}
@@ -449,7 +449,7 @@ const Xt = /* @__PURE__ */ b({
       }, null, -1)
     ])], 2));
   }
-}), ts = /* @__PURE__ */ b({
+}), as = /* @__PURE__ */ b({
   __name: "ZoomOutIcon",
   props: {
     cssClass: {}
@@ -486,7 +486,7 @@ const Xt = /* @__PURE__ */ b({
       }, null, -1)
     ])], 2));
   }
-}), ce = /* @__PURE__ */ b({
+}), pe = /* @__PURE__ */ b({
   __name: "MoveLeftIcon",
   props: {
     cssClass: {}
@@ -515,7 +515,7 @@ const Xt = /* @__PURE__ */ b({
       o("path", { d: "M16 12H8" }, null, -1)
     ])], 2));
   }
-}), ue = /* @__PURE__ */ b({
+}), he = /* @__PURE__ */ b({
   __name: "MoveRightIcon",
   props: {
     cssClass: {}
@@ -544,7 +544,7 @@ const Xt = /* @__PURE__ */ b({
       o("path", { d: "M8 12h8" }, null, -1)
     ])], 2));
   }
-}), ge = /* @__PURE__ */ b({
+}), me = /* @__PURE__ */ b({
   __name: "XCircleIcon",
   props: {
     cssClass: {}
@@ -571,7 +571,7 @@ const Xt = /* @__PURE__ */ b({
       o("path", { d: "m9 9 6 6" }, null, -1)
     ])], 2));
   }
-}), ss = /* @__PURE__ */ b({
+}), ds = /* @__PURE__ */ b({
   __name: "MonitorSmartphoneIcon",
   props: {
     cssClass: {}
@@ -603,7 +603,7 @@ const Xt = /* @__PURE__ */ b({
       }, null, -1)
     ])], 2));
   }
-}), os = /* @__PURE__ */ b({
+}), ls = /* @__PURE__ */ b({
   __name: "TabletSmartphoneIcon",
   props: {
     cssClass: {}
@@ -634,7 +634,7 @@ const Xt = /* @__PURE__ */ b({
       o("path", { d: "M8 18h.01" }, null, -1)
     ])], 2));
   }
-}), ns = /* @__PURE__ */ b({
+}), cs = /* @__PURE__ */ b({
   __name: "MonitorIcon",
   props: {
     cssClass: {}
@@ -673,7 +673,7 @@ const Xt = /* @__PURE__ */ b({
       }, null, -1)
     ])], 2));
   }
-}), Pe = /* @__PURE__ */ b({
+}), Ge = /* @__PURE__ */ b({
   __name: "TimerResetIcon",
   props: {
     cssClass: {}
@@ -697,7 +697,7 @@ const Xt = /* @__PURE__ */ b({
       o("path", { d: "M9 17H4v5" }, null, -1)
     ])], 2));
   }
-}), Oe = /* @__PURE__ */ b({
+}), qe = /* @__PURE__ */ b({
   __name: "UndoIcon",
   props: {
     cssClass: {}
@@ -719,7 +719,7 @@ const Xt = /* @__PURE__ */ b({
       o("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" }, null, -1)
     ])], 2));
   }
-}), Ge = /* @__PURE__ */ b({
+}), Ze = /* @__PURE__ */ b({
   __name: "RedoIcon",
   props: {
     cssClass: {}
@@ -741,7 +741,7 @@ const Xt = /* @__PURE__ */ b({
       o("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" }, null, -1)
     ])], 2));
   }
-}), qe = /* @__PURE__ */ b({
+}), Xe = /* @__PURE__ */ b({
   __name: "HandIcon",
   props: {
     cssClass: {}
@@ -765,7 +765,7 @@ const Xt = /* @__PURE__ */ b({
       o("path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" }, null, -1)
     ])], 2));
   }
-}), Ze = /* @__PURE__ */ b({
+}), Qe = /* @__PURE__ */ b({
   __name: "HandGrabIcon",
   props: {
     cssClass: {}
@@ -783,10 +783,10 @@ const Xt = /* @__PURE__ */ b({
       "stroke-linejoin": "round",
       class: h(`lucide lucide-hand-grab-icon lucide-hand-grab ${t.cssClass || ""}`.trim())
     }, [...e[0] || (e[0] = [
-      te('<path d="M18 11.5V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1.4"></path><path d="M14 10V8a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2"></path><path d="M10 9.9V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v5"></path><path d="M6 14a2 2 0 0 0-2-2a2 2 0 0 0-2 2"></path><path d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8 2 2 0 1 1 4 0"></path>', 5)
+      se('<path d="M18 11.5V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1.4"></path><path d="M14 10V8a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2"></path><path d="M10 9.9V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v5"></path><path d="M6 14a2 2 0 0 0-2-2a2 2 0 0 0-2 2"></path><path d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8 2 2 0 1 1 4 0"></path>', 5)
     ])], 2));
   }
-}), Xe = /* @__PURE__ */ b({
+}), Ye = /* @__PURE__ */ b({
   __name: "CrosshairIcon",
   props: {
     cssClass: {}
@@ -830,7 +830,7 @@ const Xt = /* @__PURE__ */ b({
       }, null, -1)
     ])], 2));
   }
-}), is = /* @__PURE__ */ b({
+}), us = /* @__PURE__ */ b({
   __name: "TargetIcon",
   props: {
     cssClass: {}
@@ -865,7 +865,7 @@ const Xt = /* @__PURE__ */ b({
       }, null, -1)
     ])], 2));
   }
-}), Qe = /* @__PURE__ */ b({
+}), Je = /* @__PURE__ */ b({
   __name: "CircleQuestionMarkIcon",
   props: {
     cssClass: {}
@@ -894,7 +894,7 @@ const Xt = /* @__PURE__ */ b({
       o("path", { d: "M12 17h.01" }, null, -1)
     ])], 2));
   }
-}), Ye = ["title", "disabled"], j = /* @__PURE__ */ b({
+}), et = ["title", "disabled"], z = /* @__PURE__ */ b({
   __name: "Button",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -916,7 +916,7 @@ const Xt = /* @__PURE__ */ b({
   },
   emits: ["click"],
   setup(t, { emit: s }) {
-    const e = t, i = s, n = /* @__PURE__ */ new Map([
+    const e = t, n = s, r = /* @__PURE__ */ new Map([
       [
         "normal",
         "group bg-[category] content-[category] hover:bg-[category] group-hover:bg-[category] focus:outline-[category] focus:outline-offset-[category]"
@@ -925,55 +925,55 @@ const Xt = /* @__PURE__ */ b({
         "ghost",
         "group bg-transparent border-[category] text-[category] hover:text-[category] group-hover:text-[category] focus:outline-[category] focus:outline-offset-[category]"
       ]
-    ]), a = p(() => {
-      const c = e.isIconButton || !1, g = e.category || "primary", u = e.type || "normal", y = e.disabled || !1, k = e.className || "", $ = e.font || "", D = Number((e.border || 0) > 0 ? e.border : 0);
-      let _ = (e.borderColor || "").trim();
-      _ = _.length > 0 ? _ : "";
-      const W = Number((e.borderHover || 0) > 0 ? e.borderHover : 0), H = e.shadow || "sm", N = e.shadowHover || "md", A = (e.addCss || "").trim(), m = e.justifyCss || "justify-center";
+    ]), i = f(() => {
+      const c = e.isIconButton || !1, y = e.category || "primary", p = e.type || "normal", v = e.disabled || !1, $ = e.className || "", _ = e.font || "", W = Number((e.border || 0) > 0 ? e.border : 0);
+      let K = (e.borderColor || "").trim();
+      K = K.length > 0 ? K : "";
+      const T = Number((e.borderHover || 0) > 0 ? e.borderHover : 0), k = e.shadow || "sm", I = e.shadowHover || "md", M = (e.addCss || "").trim(), u = e.justifyCss || "justify-center";
       if (c)
         return L(
           "flex flex-row items-center",
-          y ? "text-disabled" : `text-${g} hover:brightness-110 cursor-pointer`,
-          k || ""
+          v ? "text-disabled" : `text-${y} hover:brightness-110 cursor-pointer`,
+          $ || ""
         );
-      const l = [
+      const a = [
         "relative cursor-pointer",
         "rounded-sm focus:outline-none focus:ring focus:ring-offset",
         "transition-all duration-150",
         "text-sm",
-        `font-${$}`
+        `font-${_}`
       ];
-      if (y)
-        u === "ghost" ? l.push("text-disabled border-disabled cursor-not-allowed") : l.push("bg-disabled content-disabled border-disabled cursor-not-allowed");
+      if (v)
+        p === "ghost" ? a.push("text-disabled border-disabled cursor-not-allowed") : a.push("bg-disabled content-disabled border-disabled cursor-not-allowed");
       else {
-        l.push("cursor-pointer");
-        let v = "";
-        n.has(u) ? v = `${n.get(u)}` : v = `${n.get("normal")}`, D < 1 && (v = v.replace("border-[category]", ""));
-        const V = v.replaceAll("[category]", g).trim();
-        l.push(V);
+        a.push("cursor-pointer");
+        let g = "";
+        r.has(p) ? g = `${r.get(p)}` : g = `${r.get("normal")}`, W < 1 && (g = g.replace("border-[category]", ""));
+        const V = g.replaceAll("[category]", y).trim();
+        a.push(V);
       }
-      return D > 0 ? (l.push(`border-[${D}px]`), l.push(`border-${_}`)) : (l.push("border-[1px]"), l.push("border-transparent")), W > 0 ? (l.push(`hover:border-[${W}px] group-hover:border-[${W}px]`), l.push(`hover:border-${_} group-hover:border-${_}`)) : l.push("hover:border-[1px] group-hover:border-[1px]"), l.push(`shadow-${H}`), l.push(`hover:shadow-${N} group-hover:shadow-${N}`), A.length > 0 && l.push(A), A.indexOf("hidden") === -1 && l.push("inline-flex"), l.push(m), l.join(" ").trim();
-    }), r = p(() => ({
+      return W > 0 ? (a.push(`border-[${W}px]`), a.push(`border-${K}`)) : (a.push("border-[1px]"), a.push("border-transparent")), T > 0 ? (a.push(`hover:border-[${T}px] group-hover:border-[${T}px]`), a.push(`hover:border-${K} group-hover:border-${K}`)) : a.push("hover:border-[1px] group-hover:border-[1px]"), a.push(`shadow-${k}`), a.push(`hover:shadow-${I} group-hover:shadow-${I}`), M.length > 0 && a.push(M), M.indexOf("hidden") === -1 && a.push("inline-flex"), a.push(u), a.join(" ").trim();
+    }), l = f(() => ({
       padding: e.isIconButton ? 0 : `${e.py}rem ${e.px}rem `
-    })), w = (c) => {
+    })), m = (c) => {
       if (e.disabled) {
         c.preventDefault();
         return;
       }
-      i("click", c);
+      n("click", c);
     };
-    return (c, g) => (d(), C("button", {
+    return (c, y) => (d(), C("button", {
       type: "button",
-      class: h(a.value),
-      style: se(r.value),
+      class: h(i.value),
+      style: oe(l.value),
       title: t.tooltip?.title,
       disabled: t.disabled,
-      onClick: T(w, ["stop"])
+      onClick: j(m, ["stop"])
     }, [
-      z(c.$slots, "default")
-    ], 14, Ye));
+      A(c.$slots, "default")
+    ], 14, et));
   }
-}), Je = ["data-testid"], et = /* @__PURE__ */ b({
+}), tt = ["data-testid"], st = /* @__PURE__ */ b({
   __name: "Stack",
   props: {
     testId: {},
@@ -982,18 +982,18 @@ const Xt = /* @__PURE__ */ b({
     style: {}
   },
   setup(t) {
-    const s = t, e = p(() => {
-      const { testId: n, classNames: a, direction: r, ...w } = s;
-      return w;
-    }), i = p(() => s.direction === "row" ? L("flex flex-row items-center gap-2", s.classNames || "") : L("flex flex-col gap-2 w-full", s.classNames || ""));
-    return (n, a) => (d(), C("div", G({
+    const s = t, e = f(() => {
+      const { testId: r, classNames: i, direction: l, ...m } = s;
+      return m;
+    }), n = f(() => s.direction === "row" ? L("flex flex-row items-center gap-2", s.classNames || "") : L("flex flex-col gap-2 w-full", s.classNames || ""));
+    return (r, i) => (d(), C("div", G({
       "data-testid": t.testId || "not-set",
-      class: i.value
+      class: n.value
     }, e.value), [
-      z(n.$slots, "default")
-    ], 16, Je));
+      A(r.$slots, "default")
+    ], 16, tt));
   }
-}), as = /* @__PURE__ */ b({
+}), gs = /* @__PURE__ */ b({
   __name: "ListItem",
   props: {
     testId: {},
@@ -1003,35 +1003,35 @@ const Xt = /* @__PURE__ */ b({
     innerClass: {}
   },
   setup(t) {
-    const s = t, e = p(() => {
-      const { classNames: a, direction: r, innerClass: w, ...c } = s;
+    const s = t, e = f(() => {
+      const { classNames: i, direction: l, innerClass: m, ...c } = s;
       return c;
-    }), i = p(() => L(s.classNames || "", "w-full")), n = L(
+    }), n = f(() => L(s.classNames || "", "w-full")), r = L(
       `w-full flex overflow-hidden justify-between items-center gap-0 
       rounded-md border`,
       s.innerClass || ""
     );
-    return (a, r) => (d(), K(et, G({
+    return (i, l) => (d(), S(st, G({
       direction: "row",
-      class: i.value
+      class: n.value
     }, e.value), {
       default: B(() => [
         o("div", {
-          class: h(f(n))
+          class: h(w(r))
         }, [
-          z(a.$slots, "default")
+          A(i.$slots, "default")
         ], 2)
       ]),
       _: 3
     }, 16, ["class"]));
   }
-}), tt = ["for"], st = ["id", "value", "placeholder", "aria-label"], ot = `
+}), ot = ["for"], nt = ["id", "value", "placeholder", "aria-label"], rt = `
   block w-full rounded-md px-3 py-1.5 text-base 
   bg-formfield content-formfield
   outline-1 -outline-offset-1 outline-primary 
   placeholder:text-disabled 
   focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-200 sm:text-sm/6
-`, he = /* @__PURE__ */ b({
+`, fe = /* @__PURE__ */ b({
   __name: "TextField",
   props: {
     label: {},
@@ -1042,29 +1042,29 @@ const Xt = /* @__PURE__ */ b({
   },
   emits: ["update:modelValue", "keydown"],
   setup(t, { emit: s }) {
-    const e = t, i = s, n = (c) => {
-      i("update:modelValue", c.target.value);
-    }, a = p(() => e.size === "small" ? "py-1.5 px-3 text-sm" : "py-2.5 px-4 text-base"), r = p(() => `flex flex-col mb-4 ${e.className}`), w = p(() => `${ot} ${a.value}`);
-    return (c, g) => (d(), C("div", {
-      class: h(r.value)
+    const e = t, n = s, r = (c) => {
+      n("update:modelValue", c.target.value);
+    }, i = f(() => e.size === "small" ? "py-1.5 px-3 text-sm" : "py-2.5 px-4 text-base"), l = f(() => `flex flex-col mb-4 ${e.className}`), m = f(() => `${rt} ${i.value}`);
+    return (c, y) => (d(), C("div", {
+      class: h(l.value)
     }, [
       o("label", {
         for: e.label,
         class: "block text-sm/6 font-medium mb-1.5"
-      }, E(e.label), 9, tt),
+      }, H(e.label), 9, ot),
       o("input", {
         id: e.label,
         type: "text",
         value: e.modelValue,
         placeholder: e.placeholder,
-        class: h(w.value),
+        class: h(m.value),
         "aria-label": e.label,
-        onInput: n,
-        onKeydown: g[0] || (g[0] = (u) => i("keydown", u))
-      }, null, 42, st)
+        onInput: r,
+        onKeydown: y[0] || (y[0] = (p) => n("keydown", p))
+      }, null, 42, nt)
     ], 2));
   }
-}), nt = ["data-testid"], it = /* @__PURE__ */ b({
+}), it = ["data-testid"], at = /* @__PURE__ */ b({
   __name: "DraggablePanel",
   props: {
     testId: {},
@@ -1074,7 +1074,7 @@ const Xt = /* @__PURE__ */ b({
   },
   emits: ["draggingChange"],
   setup(t, { emit: s }) {
-    const e = t, i = s, n = R(null), a = R({ x: 0, y: 0 }), r = R({ x: 0, y: 0 }), w = R({ x: 0, y: 0 }), c = {
+    const e = t, n = s, r = R(null), i = R({ x: 0, y: 0 }), l = R({ x: 0, y: 0 }), m = R({ x: 0, y: 0 }), c = {
       // 1. Take it out of the document flow
       position: "fixed",
       // 2. Set initial viewport position (e.g., top right)
@@ -1088,65 +1088,65 @@ const Xt = /* @__PURE__ */ b({
       borderStyle: "solid",
       borderWidth: "3px",
       boxShadow: "rgba(0, 0, 0, 0.5) 7px 7px 10px 0px"
-    }, g = p(() => ({
+    }, y = f(() => ({
       ...c,
       ...e.style || {},
       // Override top/right with CSS transform based on position state for dragging
-      transform: `translate(${a.value.x}px, ${a.value.y}px)`,
+      transform: `translate(${i.value.x}px, ${i.value.y}px)`,
       top: c.top,
       right: c.right,
       // When translating, setting 'left' and 'top' to 0 helps maintain consistent behavior
       left: "initial"
-    })), u = ($) => {
-      $.target.closest(".handle") && ($.preventDefault(), i("draggingChange", !0), r.value = { x: $.clientX, y: $.clientY }, w.value = { x: a.value.x, y: a.value.y }, window.addEventListener("mousemove", y), window.addEventListener("mouseup", k));
-    }, y = ($) => {
-      const D = $.clientX - r.value.x, _ = $.clientY - r.value.y;
-      a.value = {
-        x: w.value.x + D,
-        y: w.value.y + _
+    })), p = (_) => {
+      _.target.closest(".handle") && (_.preventDefault(), n("draggingChange", !0), l.value = { x: _.clientX, y: _.clientY }, m.value = { x: i.value.x, y: i.value.y }, window.addEventListener("mousemove", v), window.addEventListener("mouseup", $));
+    }, v = (_) => {
+      const W = _.clientX - l.value.x, K = _.clientY - l.value.y;
+      i.value = {
+        x: m.value.x + W,
+        y: m.value.y + K
       };
-    }, k = () => {
-      window.removeEventListener("mousemove", y), window.removeEventListener("mouseup", k), setTimeout(() => {
-        i("draggingChange", !1);
+    }, $ = () => {
+      window.removeEventListener("mousemove", v), window.removeEventListener("mouseup", $), setTimeout(() => {
+        n("draggingChange", !1);
       }, 100);
     };
-    return Ce(() => {
-      n.value && n.value.addEventListener("mousedown", u);
-    }), ve(() => {
-      n.value && n.value.removeEventListener("mousedown", u), window.removeEventListener("mousemove", y), window.removeEventListener("mouseup", k);
-    }), ($, D) => (d(), C("div", {
+    return ye(() => {
+      r.value && r.value.addEventListener("mousedown", p);
+    }), xe(() => {
+      r.value && r.value.removeEventListener("mousedown", p), window.removeEventListener("mousemove", v), window.removeEventListener("mouseup", $);
+    }), (_, W) => (d(), C("div", {
       ref_key: "panelRef",
-      ref: n,
+      ref: r,
       "data-testid": e.testId || "draggable-panel",
       class: h(e.className),
-      style: se(g.value)
+      style: oe(y.value)
     }, [
-      z($.$slots, "default")
-    ], 14, nt));
+      A(_.$slots, "default")
+    ], 14, it));
   }
-}), pe = (t, s) => {
+}), Ce = (t, s) => {
   const e = t.__vccOpts || t;
-  for (const [i, n] of s)
-    e[i] = n;
+  for (const [n, r] of s)
+    e[n] = r;
   return e;
-}, at = {}, rt = {
+}, dt = {}, lt = {
   class: "w-full h-full flex-1 flex flex-col gap-2 items-end justify-end content-end",
   style: { "min-height": "140px" }
 };
-function dt(t, s) {
-  return d(), C("div", rt, [
-    z(t.$slots, "default")
+function ct(t, s) {
+  return d(), C("div", lt, [
+    A(t.$slots, "default")
   ]);
 }
-const rs = /* @__PURE__ */ pe(at, [["render", dt]]), lt = {}, ct = { className: "w-full flex flex-col items-end" };
-function ut(t, s) {
-  return d(), C("div", ct, [
-    z(t.$slots, "default")
+const ps = /* @__PURE__ */ Ce(dt, [["render", ct]]), ut = {}, gt = { className: "w-full flex flex-col items-end" };
+function pt(t, s) {
+  return d(), C("div", gt, [
+    A(t.$slots, "default")
   ]);
 }
-const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
+const hs = /* @__PURE__ */ Ce(ut, [["render", pt]]), ms = (t) => {
   console.warn("showToast TODO", t);
-}, cs = /* @__PURE__ */ b({
+}, fs = /* @__PURE__ */ b({
   __name: "DashboardGrid",
   props: {
     isEditing: { type: Boolean },
@@ -1154,29 +1154,29 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
     responsiveGrid: { type: Boolean }
   },
   setup(t) {
-    const s = t, e = (a) => a < 0.8 ? 1 : a <= 1 ? 0 : a > 1 ? -1 : 0, i = p(() => {
-      let a = Ie(Number(s.zoomScale || 0));
+    const s = t, e = (i) => i < 0.8 ? 1 : i <= 1 ? 0 : i > 1 ? -1 : 0, n = f(() => {
+      let i = We(Number(s.zoomScale || 0));
       return {
-        "--bwj-dashboard-transform-scale": a,
-        "--bwj-dashboard-add-cols": e(a)
+        "--bwj-dashboard-transform-scale": i,
+        "--bwj-dashboard-add-cols": e(i)
       };
-    }), n = p(() => L(
+    }), r = f(() => L(
       "dashboard-main-grid w-full",
       s.isEditing ? "editing" : "",
       s.responsiveGrid ? "responsive-grid" : "",
       `border border-dashed ${s.isEditing ? "border-primary border-opacity-50" : "border-transparent"}`
     ));
-    return (a, r) => (d(), C("div", {
-      class: h(n.value),
-      style: se(i.value)
+    return (i, l) => (d(), C("div", {
+      class: h(r.value),
+      style: oe(n.value)
     }, [
-      z(a.$slots, "default")
+      A(i.$slots, "default")
     ], 6));
   }
-}), gt = {
+}), ht = { key: 0 }, mt = {
   key: 1,
-  class: "flex flex-col"
-}, us = /* @__PURE__ */ b({
+  class: "flex items-center justify-center p-8 border border-dashed border-base-300"
+}, ft = { class: "text-sm animate-pulse" }, Ct = { class: "relative min-h-12 flex flex-col items-center justify-center bg-base-200 rounded-lg" }, vt = { class: "z-10 text-primary font-bold mb-4" }, Cs = /* @__PURE__ */ b({
   __name: "DynamicWidgetLoader",
   props: {
     index: {},
@@ -1191,74 +1191,112 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
   },
   emits: ["removeClick", "moveClick", "selectContainer"],
   setup(t, { emit: s }) {
-    const e = t, n = Q(s), a = p(() => `${e.widgetKey}`.split("_")), r = p(() => a.value.length > 1), w = p(() => r.value ? a.value[0] : e.widgetKey), c = p(() => r.value ? de(e.widgetKey) : ""), g = p(() => e.widgetCatalog.get(w.value)), u = we(null);
-    ye(async () => {
-      const _ = g.value;
-      if (_) {
-        if (_.component)
-          u.value = _.component;
-        else if (_.loader)
-          if (_.loader) {
-            const W = await _.loader();
-            u.value = W.default || W;
-          } else
-            u.value = xe(_.loader);
+    const e = (k, I) => {
+      const M = (g) => g.replace(/[^0-9.]/g, ""), u = M(k).split(".").map(Number), a = M(I).split(".").map(Number);
+      return !(u[0] !== a[0] || u[1] < a[1]);
+    }, n = t, i = Q(s), l = f(() => `${n.widgetKey}`.split("_")), m = f(() => l.value.length > 1), c = f(() => m.value ? l.value[0] : n.widgetKey), y = f(() => m.value ? ue(n.widgetKey) : ""), p = f(() => n.widgetCatalog.get(c.value)), v = ne(null), $ = ne(null);
+    be(async () => {
+      const k = p.value;
+      if (k) {
+        if ($.value = null, k.component) {
+          v.value = k.component;
+          return;
+        }
+        if (k.loader)
+          try {
+            const I = typeof __HOST_VUE_VERSION__ < "u" ? __HOST_VUE_VERSION__ : "3.5.0", u = (k.meta?.externalDependencies || []).find((g) => g.startsWith("vue@"));
+            if (u) {
+              const g = u.split("@")[1];
+              if (!e(I, g))
+                throw new Error(`Incompatible Vue version. Required: ${g}, Host: ${I}`);
+            }
+            console.log("Loading widget", n.widgetKey, k.meta);
+            const a = await k.loader();
+            v.value = re(a.default || a);
+          } catch (I) {
+            console.error(`Widget Load Error [${n.widgetKey}]:`, I), v.value = re({
+              name: "WidgetErrorFallback",
+              render: () => O(
+                "div",
+                { class: "p-4 border border-dashed border-error bg-error/10 text-error rounded" },
+                [
+                  O("p", { class: "font-bold" }, `Failed to load "${n.widgetKey}"`),
+                  O(
+                    "p",
+                    { class: "text-xs italic" },
+                    I.message || "The remote plugin is unavailable."
+                  ),
+                  k.meta ? O(
+                    "pre",
+                    { class: "text-[10px] mt-2 opacity-70 overflow-auto" },
+                    JSON.stringify(k.meta, null, 2)
+                  ) : null
+                ]
+              )
+            });
+          }
       }
     });
-    const y = p(() => r.value ? (e.childWidgetsConfig || []).filter((_) => _.parentWidgetKey === e.widgetKey) : []), k = (_, W) => {
-      n.removeClick(_, W);
-    }, $ = (_, W, H) => {
-      n.moveClick(_, W, H);
-    }, D = (_) => {
-      n.selectContainer(_);
+    const _ = f(() => m.value ? (n.childWidgetsConfig || []).filter((k) => k.parentWidgetKey === n.widgetKey) : []), W = (k, I) => {
+      i.removeClick(k, I);
+    }, K = (k, I, M) => {
+      i.moveClick(k, I, M);
+    }, T = (k) => {
+      i.selectContainer(k);
     };
-    return (_, W) => {
-      const H = be("DynamicWidgetLoaderDEV");
-      return d(), K(_e, null, {
-        fallback: B(() => [
-          o("div", null, "Loading " + E(g.value?.meta?.name || g.value?.title), 1)
-        ]),
+    return (k, I) => {
+      const M = _e("DynamicWidgetLoaderDEV");
+      return d(), S(ke, null, {
         default: B(() => [
-          u.value ? (d(), K(ae(u.value), {
-            key: 0,
-            index: t.index,
-            maxIndex: y.value.length - 1,
-            widgetKey: t.widgetKey,
-            parentWidgetKey: t.parentWidgetKey,
-            widgetCatalog: t.widgetCatalog,
-            isEditing: t.isEditing,
-            highlight: r.value && t.targetContainerKey === t.widgetKey || !1,
-            title: (r.value ? c.value : g.value?.meta?.name) || !1,
-            extraProps: t.extraProps,
-            onRemoveClick: k,
-            onMoveClick: $,
-            onSelectContainer: D
-          }, {
-            default: B(() => [
-              r.value ? (d(!0), C(U, { key: 0 }, F(y.value, (N, A) => (d(), K(H, {
-                key: `${N.widgetKey}_${A}`,
-                index: A,
-                maxIndex: y.value.length - 1,
-                widgetKey: N.widgetKey,
-                parentWidgetKey: N.parentWidgetKey,
-                widgetCatalog: t.widgetCatalog,
-                isEditing: t.isEditing,
-                onRemoveClick: k,
-                onMoveClick: $
-              }, null, 8, ["index", "maxIndex", "widgetKey", "parentWidgetKey", "widgetCatalog", "isEditing"]))), 128)) : O("", !0)
-            ]),
-            _: 1
-          }, 40, ["index", "maxIndex", "widgetKey", "parentWidgetKey", "widgetCatalog", "isEditing", "highlight", "title", "extraProps"])) : (d(), C("div", gt, [
-            W[0] || (W[0] = o("span", null, " Widget not found or loader failed: ", -1)),
-            o("span", null, E(g.value?.meta?.name || g.value?.title), 1),
-            o("span", null, E(t.widgetKey), 1)
+          v.value ? (d(), C("div", ht, [
+            (d(), S(le(v.value), {
+              index: t.index,
+              maxIndex: _.value.length - 1,
+              widgetKey: t.widgetKey,
+              parentWidgetKey: t.parentWidgetKey,
+              widgetCatalog: t.widgetCatalog,
+              isEditing: t.isEditing,
+              highlight: m.value && t.targetContainerKey === t.widgetKey || !1,
+              title: m.value ? y.value : p.value?.meta?.name || p.value?.title,
+              extraProps: t.extraProps,
+              onRemoveClick: W,
+              onMoveClick: K,
+              onSelectContainer: T
+            }, $e({ _: 2 }, [
+              m.value ? {
+                name: "default",
+                fn: B(() => [
+                  (d(!0), C(U, null, F(_.value, (u, a) => (d(), S(M, {
+                    key: `${u.widgetKey}_${a}`,
+                    index: a,
+                    maxIndex: _.value.length - 1,
+                    widgetKey: u.widgetKey,
+                    parentWidgetKey: u.parentWidgetKey,
+                    widgetCatalog: t.widgetCatalog,
+                    isEditing: t.isEditing,
+                    onRemoveClick: W,
+                    onMoveClick: K
+                  }, null, 8, ["index", "maxIndex", "widgetKey", "parentWidgetKey", "widgetCatalog", "isEditing"]))), 128))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1064, ["index", "maxIndex", "widgetKey", "parentWidgetKey", "widgetCatalog", "isEditing", "highlight", "title", "extraProps"]))
+          ])) : (d(), C("div", mt, [
+            o("p", ft, "Initializing " + H(t.widgetKey) + "...", 1)
           ]))
         ]),
+        fallback: B(() => [
+          o("div", Ct, [
+            o("div", vt, " Loading " + H(p.value?.title || "Widget"), 1),
+            I[0] || (I[0] = o("div", { class: "animate-ping absolute h-24 w-24 rounded-full border-4 border-primary opacity-20" }, null, -1)),
+            I[1] || (I[1] = o("div", { class: "animate-spin h-12 w-12 rounded-full border-4 border-primary border-t-transparent" }, null, -1))
+          ])
+        ]),
         _: 1
       });
     };
   }
-}), ht = { class: "widget-title-wrapper w-full flex flex-row gap-2 items-center justify-between" }, pt = { class: "widget-title" }, mt = { "data-testid": "collapse-and-other-actions" }, ft = { class: "actions-inner" }, Ct = { class: "actions-buttons-container" }, vt = { class: "widget-inner" }, Y = "size-5", gs = /* @__PURE__ */ b({
+}), wt = { class: "widget-title-wrapper w-full flex flex-row gap-2 items-center justify-between" }, yt = { class: "widget-title" }, xt = { "data-testid": "collapse-and-other-actions" }, bt = { class: "actions-inner" }, _t = { class: "actions-buttons-container" }, kt = { class: "widget-inner" }, J = "size-5", vs = /* @__PURE__ */ b({
   __name: "DashboardWidgetBase",
   props: {
     index: {},
@@ -1281,39 +1319,39 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
   },
   emits: ["removeClick", "moveClick", "selectContainer"],
   setup(t, { emit: s }) {
-    const e = t, i = s, n = p(() => e.hideTitle && !e.isEditing), a = p(() => {
-      const g = e.borderCssClasses || "", u = e.noBorder;
-      let y = `dashboard-widget ${e.isEditing ? "editing" : ""} border border-solid`;
-      return u ? y = `${y} border-transparent border-opacity-0` : (g || "").trim().length > 0 ? y = `${y} ${g}` : y = `${y} border-card-invert border-opacity-20`, e.noShadow && (y = `${y} no-shadow`), e.noPadding && (y = `${y} no-padding p-0`), (e.backgroundCssClasses || "").trim().length > 0 ? y = `${y} ${e.backgroundCssClasses}` : y = `${y} bg-card content-card`, ["large", "xlarge"].indexOf(e.size || "") > -1 && (y = `${y} ${e.size}-widget`), L(y);
-    }), r = p(() => {
-      const g = n.value;
+    const e = t, n = s, r = f(() => e.hideTitle && !e.isEditing), i = f(() => {
+      const y = e.borderCssClasses || "", p = e.noBorder;
+      let v = `dashboard-widget ${e.isEditing ? "editing" : ""} border border-solid`;
+      return p ? v = `${v} border-transparent border-opacity-0` : (y || "").trim().length > 0 ? v = `${v} ${y}` : v = `${v} border-card-invert border-opacity-20`, e.noShadow && (v = `${v} no-shadow`), e.noPadding && (v = `${v} no-padding p-0`), (e.backgroundCssClasses || "").trim().length > 0 ? v = `${v} ${e.backgroundCssClasses}` : v = `${v} bg-card content-card`, ["large", "xlarge"].indexOf(e.size || "") > -1 && (v = `${v} ${e.size}-widget`), L(v);
+    }), l = f(() => {
+      const y = r.value;
       return L(
         "widget-header",
-        g ? "hidden" : "flex items-center justify-between border-b border-solid border-card-invert",
-        g ? "border-opacity-0" : "border-opacity-20"
+        y ? "hidden" : "flex items-center justify-between border-b border-solid border-card-invert",
+        y ? "border-opacity-0" : "border-opacity-20"
       );
-    }), w = () => {
-      e.widgetKey && i("removeClick", e.widgetKey, e.parentWidgetKey);
-    }, c = (g) => {
-      e.widgetKey && i("moveClick", g, e.widgetKey, e.parentWidgetKey);
+    }), m = () => {
+      e.widgetKey && n("removeClick", e.widgetKey, e.parentWidgetKey);
+    }, c = (y) => {
+      e.widgetKey && n("moveClick", y, e.widgetKey, e.parentWidgetKey);
     };
-    return (g, u) => (d(), C("div", {
-      class: h(a.value)
+    return (y, p) => (d(), C("div", {
+      class: h(i.value)
     }, [
       o("div", {
-        class: h(r.value)
+        class: h(l.value)
       }, [
-        o("div", ht, [
-          o("h2", pt, E(e.title), 1),
-          u[2] || (u[2] = o("div", null, null, -1))
+        o("div", wt, [
+          o("h2", yt, H(e.title), 1),
+          p[2] || (p[2] = o("div", null, null, -1))
         ]),
-        o("div", mt, [
-          o("div", ft, [
-            u[3] || (u[3] = o("div", null, [
+        o("div", xt, [
+          o("div", bt, [
+            p[3] || (p[3] = o("div", null, [
               o("span", { class: "hidden" }, "Widget")
             ], -1)),
-            o("div", Ct, [
-              I(f(j), {
+            o("div", _t, [
+              D(w(z), {
                 "data-testid": `move-widget-left_${e.title}`,
                 isIconButton: !0,
                 disabled: e.index < 1,
@@ -1321,16 +1359,16 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
                   placement: "top",
                   title: `${e.index < 1 ? "Already at min position" : "Move Widget to the left/up"}`
                 },
-                onClick: u[0] || (u[0] = T((y) => c(-1), ["stop"]))
+                onClick: p[0] || (p[0] = j((v) => c(-1), ["stop"]))
               }, {
                 default: B(() => [
-                  I(f(ce), {
-                    class: h(Y)
+                  D(w(pe), {
+                    class: h(J)
                   })
                 ]),
                 _: 1
               }, 8, ["data-testid", "disabled", "tooltip"]),
-              I(f(j), {
+              D(w(z), {
                 "data-testid": `move-widget-right_${e.title}`,
                 isIconButton: !0,
                 disabled: e.index >= e.maxIndex,
@@ -1338,27 +1376,27 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
                   placement: "top",
                   title: `${e.index >= e.maxIndex ? "Already at max position" : "Move Widget to the right/down"}`
                 },
-                onClick: u[1] || (u[1] = T((y) => c(1), ["stop"]))
+                onClick: p[1] || (p[1] = j((v) => c(1), ["stop"]))
               }, {
                 default: B(() => [
-                  I(f(ue), {
-                    class: h(Y)
+                  D(w(he), {
+                    class: h(J)
                   })
                 ]),
                 _: 1
               }, 8, ["data-testid", "disabled", "tooltip"]),
-              I(f(j), {
+              D(w(z), {
                 "data-testid": `remove-container_${e.title}`,
                 isIconButton: !0,
                 tooltip: {
                   placement: "top",
                   title: "Remove Widget"
                 },
-                onClick: T(w, ["stop"])
+                onClick: j(m, ["stop"])
               }, {
                 default: B(() => [
-                  I(f(ge), {
-                    class: h(Y)
+                  D(w(me), {
+                    class: h(J)
                   })
                 ]),
                 _: 1
@@ -1367,12 +1405,12 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
           ])
         ])
       ], 2),
-      o("div", vt, [
-        z(g.$slots, "default")
+      o("div", kt, [
+        A(y.$slots, "default")
       ])
     ], 2));
   }
-}), wt = ["data-testid"], yt = { class: "text-sm font-semibold capitalize" }, xt = { "data-testid": "collapse-and-other-actions" }, bt = { class: "actions-inner" }, _t = { class: "actions-buttons-container" }, kt = ["data-testid"], P = "size-5", $t = "border-transparent", It = "border-card-invert", me = /* @__PURE__ */ b({
+}), $t = ["data-testid"], It = { class: "text-sm font-semibold capitalize" }, Dt = { "data-testid": "collapse-and-other-actions" }, Wt = { class: "actions-inner" }, Bt = { class: "actions-buttons-container" }, Kt = ["data-testid"], P = "size-5", Mt = "border-transparent", St = "border-card-invert", ve = /* @__PURE__ */ b({
   __name: "WidgetContainer",
   props: {
     index: {},
@@ -1395,66 +1433,66 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
   },
   emits: ["removeClick", "moveClick", "selectContainer"],
   setup(t, { emit: s }) {
-    const e = t, n = Q(s), a = p(() => e.maxIndex > -1), r = p(() => {
-      const k = a.value;
-      return e.highlight ? $t : e.isEditing && !k ? It : "border-transparent";
-    }), w = p(() => {
-      const k = e.highlight || !1, $ = e.direction || "column", D = a.value, _ = e.isEditing || !1;
-      let N = k ? "border-transparent" : _ ? "border-card-invert" : "border-transparent";
-      const A = ["large", "xlarge"].includes(e.size || "");
-      let m = "";
-      ["large", "xlarge"].indexOf(e.size || "") > -1 && (m = `${e.size}-widget`);
-      let l = "";
-      return $ === "row" && !D ? l = "min-h-48" : $ === "column" && !D && (l = "min-h-96"), L(
+    const e = t, r = Q(s), i = f(() => e.maxIndex > -1), l = f(() => {
+      const $ = i.value;
+      return e.highlight ? Mt : e.isEditing && !$ ? St : "border-transparent";
+    }), m = f(() => {
+      const $ = e.highlight || !1, _ = e.direction || "column", W = i.value, K = e.isEditing || !1;
+      let I = $ ? "border-transparent" : K ? "border-card-invert" : "border-transparent";
+      const M = ["large", "xlarge"].includes(e.size || "");
+      let u = "";
+      ["large", "xlarge"].indexOf(e.size || "") > -1 && (u = `${e.size}-widget`);
+      let a = "";
+      return _ === "row" && !W ? a = "min-h-48" : _ === "column" && !W && (a = "min-h-96"), L(
         "dashboard-widget-container relative ",
-        D ? "" : "has-no-children",
-        _ ? "editing" : "",
-        l,
-        m,
-        A ? "widget-container-grid" : "widget-container-flex",
-        `direction-${$}`,
-        `border ${N}`,
-        `${k ? "highlight-container" : ""} ${N}`
+        W ? "" : "has-no-children",
+        K ? "editing" : "",
+        a,
+        u,
+        M ? "widget-container-grid" : "widget-container-flex",
+        `direction-${_}`,
+        `border ${I}`,
+        `${$ ? "highlight-container" : ""} ${I}`
       );
-    }), c = p(() => `widget-container-header direction-${e.direction} flex items-center border ${r.value}`), g = () => {
-      e.widgetKey && n.removeClick(e.widgetKey);
-    }, u = (k) => {
-      e.widgetKey && n.moveClick(k, e.widgetKey, e.parentWidgetKey);
-    }, y = () => {
-      e.widgetKey && n.selectContainer(e.widgetKey);
+    }), c = f(() => `widget-container-header direction-${e.direction} flex items-center border ${l.value}`), y = () => {
+      e.widgetKey && r.removeClick(e.widgetKey);
+    }, p = ($) => {
+      e.widgetKey && r.moveClick($, e.widgetKey, e.parentWidgetKey);
+    }, v = () => {
+      e.widgetKey && r.selectContainer(e.widgetKey);
     };
-    return (k, $) => (d(), C("div", {
+    return ($, _) => (d(), C("div", {
       "data-testid": `container_${e.widgetKey}`,
       "data-change": "asd",
-      class: h(w.value)
+      class: h(m.value)
     }, [
       o("div", {
         class: h(c.value)
       }, [
         o("div", {
           class: "widget-title-wrapper w-full flex whitespace-nowrap",
-          onClick: T(y, ["stop"])
+          onClick: j(v, ["stop"])
         }, [
-          o("span", yt, E(e.title), 1)
+          o("span", It, H(e.title), 1)
         ]),
-        o("div", xt, [
-          o("div", bt, [
-            o("div", _t, [
-              I(f(j), {
+        o("div", Dt, [
+          o("div", Wt, [
+            o("div", Bt, [
+              D(w(z), {
                 "data-testid": `open-widgets-catalog-from-container_${e.title}`,
                 isIconButton: !0,
                 class: "whitespace-nowrap",
                 tooltip: { placement: "top", title: "Target this Container" },
-                onClick: T(y, ["stop"])
+                onClick: j(v, ["stop"])
               }, {
                 default: B(() => [
-                  I(f(Xe), {
+                  D(w(Ye), {
                     class: h(`${P} ${e.highlight ? "text-success" : "text-disabled"}`)
                   }, null, 8, ["class"])
                 ]),
                 _: 1
               }, 8, ["data-testid"]),
-              I(f(j), {
+              D(w(z), {
                 "data-testid": `move-container-left_${e.title}`,
                 isIconButton: !0,
                 disabled: e.index < 1,
@@ -1462,16 +1500,16 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
                   placement: "top",
                   title: e.index < 1 ? "Already at min position" : "Move Container to the left/up"
                 },
-                onClick: $[0] || ($[0] = T((D) => u(-1), ["stop"]))
+                onClick: _[0] || (_[0] = j((W) => p(-1), ["stop"]))
               }, {
                 default: B(() => [
-                  I(f(ce), {
+                  D(w(pe), {
                     class: h(P)
                   })
                 ]),
                 _: 1
               }, 8, ["data-testid", "disabled", "tooltip"]),
-              I(f(j), {
+              D(w(z), {
                 "data-testid": `move-container-right_${e.title}`,
                 isIconButton: !0,
                 disabled: e.index >= e.maxIndex,
@@ -1479,23 +1517,23 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
                   placement: "top",
                   title: e.index >= e.maxIndex ? "Already at max position" : "Move Container to the right/down"
                 },
-                onClick: $[1] || ($[1] = T((D) => u(1), ["stop"]))
+                onClick: _[1] || (_[1] = j((W) => p(1), ["stop"]))
               }, {
                 default: B(() => [
-                  I(f(ue), {
+                  D(w(he), {
                     class: h(P)
                   })
                 ]),
                 _: 1
               }, 8, ["data-testid", "disabled", "tooltip"]),
-              I(f(j), {
+              D(w(z), {
                 "data-testid": `remove-container_${e.title}`,
                 isIconButton: !0,
                 tooltip: { placement: "top", title: "Remove Container" },
-                onClick: T(g, ["stop"])
+                onClick: j(y, ["stop"])
               }, {
                 default: B(() => [
-                  I(f(ge), {
+                  D(w(me), {
                     class: h(P)
                   })
                 ]),
@@ -1509,11 +1547,11 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
         "data-testid": `childrenwrapper_${e.widgetKey}`,
         class: "widget-container-inner"
       }, [
-        z(k.$slots, "default")
-      ], 8, kt)
-    ], 10, wt));
+        A($.$slots, "default")
+      ], 8, Kt)
+    ], 10, $t));
   }
-}), hs = /* @__PURE__ */ b({
+}), ws = /* @__PURE__ */ b({
   __name: "WidgetContainerRow",
   props: {
     index: {},
@@ -1536,22 +1574,22 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
   },
   emits: ["removeClick", "moveClick", "selectContainer"],
   setup(t, { emit: s }) {
-    const e = t, i = s, { removeClick: n, moveClick: a, selectContainer: r } = Q(i), w = p(() => {
-      const { direction: c, ...g } = e;
-      return g;
+    const e = t, n = s, { removeClick: r, moveClick: i, selectContainer: l } = Q(n), m = f(() => {
+      const { direction: c, ...y } = e;
+      return y;
     });
-    return (c, g) => (d(), K(me, G({ direction: "row" }, w.value, {
-      onRemoveClick: f(n),
-      onMoveClick: f(a),
-      onSelectContainer: f(r)
+    return (c, y) => (d(), S(ve, G({ direction: "row" }, m.value, {
+      onRemoveClick: w(r),
+      onMoveClick: w(i),
+      onSelectContainer: w(l)
     }), {
       default: B(() => [
-        z(c.$slots, "default")
+        A(c.$slots, "default")
       ]),
       _: 3
     }, 16, ["onRemoveClick", "onMoveClick", "onSelectContainer"]));
   }
-}), ps = /* @__PURE__ */ b({
+}), ys = /* @__PURE__ */ b({
   __name: "WidgetContainerLarge",
   props: {
     index: {},
@@ -1574,22 +1612,22 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
   },
   emits: ["removeClick", "moveClick", "selectContainer"],
   setup(t, { emit: s }) {
-    const e = t, i = s, { removeClick: n, moveClick: a, selectContainer: r } = Q(i), w = p(() => {
-      const { size: c, ...g } = e;
-      return g;
+    const e = t, n = s, { removeClick: r, moveClick: i, selectContainer: l } = Q(n), m = f(() => {
+      const { size: c, ...y } = e;
+      return y;
     });
-    return (c, g) => (d(), K(me, G({ size: "large" }, w.value, {
-      onRemoveClick: f(n),
-      onMoveClick: f(a),
-      onSelectContainer: f(r)
+    return (c, y) => (d(), S(ve, G({ size: "large" }, m.value, {
+      onRemoveClick: w(r),
+      onMoveClick: w(i),
+      onSelectContainer: w(l)
     }), {
       default: B(() => [
-        z(c.$slots, "default")
+        A(c.$slots, "default")
       ]),
       _: 3
     }, 16, ["onRemoveClick", "onMoveClick", "onSelectContainer"]));
   }
-}), Dt = { class: "w-full" }, Wt = { class: "flex flex-row items-center gap-2 justify-between" }, Bt = { class: "font-bold" }, Kt = { class: "text-xs" }, Mt = { class: "flex flex-col gap-2 text-xs" }, J = /* @__PURE__ */ b({
+}), Et = { class: "w-full" }, Nt = { class: "flex flex-row items-center gap-2 justify-between" }, Lt = { class: "font-bold" }, Tt = { class: "text-xs" }, jt = { class: "flex flex-col gap-2 text-xs" }, ee = /* @__PURE__ */ b({
   __name: "WidgetListItem",
   props: {
     widgetKey: {},
@@ -1598,79 +1636,79 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
   },
   emits: ["addWidget"],
   setup(t, { emit: s }) {
-    const e = t, i = s, n = e.metaData?.icon || Qe, a = e.metaData?.name || "Unknown", r = e.metaData?.description || "---", w = e.metaData?.noDuplicatedWidgets || !1, c = p(() => w && e?.alreadyAdded), g = p(() => L(`
+    const e = t, n = s, r = e.metaData?.icon || Je, i = e.metaData?.name || "Unknown", l = e.metaData?.description || "---", m = e.metaData?.noDuplicatedWidgets || !1, c = f(() => m && e?.alreadyAdded), y = f(() => L(`
     flex flex-row gap-2 p-2 rounded-md border text-sm bg-card content-card backdrop-opacity-100
     ${c.value ? "border-disabled fill-disabled text-disabled" : "cursor-pointer border-primary fill-danger hover:fill-primary content-primary hover:brightness-110"}
-  `)), u = () => {
-      c.value || i("addWidget");
+  `)), p = () => {
+      c.value || n("addWidget");
     };
-    return (y, k) => (d(), C("div", {
-      class: h(g.value),
+    return (v, $) => (d(), C("div", {
+      class: h(y.value),
       style: { width: "calc(100% - 1rem)" },
-      onClick: u
+      onClick: p
     }, [
-      (d(), K(ae(f(n)), { class: "" })),
-      o("div", Dt, [
-        o("div", Wt, [
-          o("span", Bt, E(f(a)), 1),
-          o("div", Kt, E(c.value ? "(Added)" : ""), 1)
+      (d(), S(le(w(r)), { class: "" })),
+      o("div", Et, [
+        o("div", Nt, [
+          o("span", Lt, H(w(i)), 1),
+          o("div", Tt, H(c.value ? "(Added)" : ""), 1)
         ]),
-        o("div", Mt, [
-          o("div", null, E(f(r)), 1)
+        o("div", jt, [
+          o("div", null, H(w(l)), 1)
         ])
       ])
     ], 2));
   }
-}), St = { class: "w-full" }, Et = { class: "flex flex-row items-center gap-2 justify-between" }, Lt = { class: "font-bold" }, Nt = { class: "flex flex-col gap-2 text-xs" }, Tt = /* @__PURE__ */ b({
+}), zt = { class: "w-full" }, Ht = { class: "flex flex-row items-center gap-2 justify-between" }, At = { class: "font-bold" }, Rt = { class: "flex flex-col gap-2 text-xs" }, Vt = /* @__PURE__ */ b({
   __name: "SettingListItem",
   props: {
     item: {}
   },
   emits: ["settingChanged"],
   setup(t, { emit: s }) {
-    const e = t, i = s, n = e.item.name || "Unknown", a = e.item.description || "---", r = L(`
+    const e = t, n = s, r = e.item.name || "Unknown", i = e.item.description || "---", l = L(`
   flex flex-row gap-2 p-2 rounded-md border text-sm bg-card content-card backdrop-opacity-100
-`), w = (g) => {
-      i("settingChanged", {
+`), m = (y) => {
+      n("settingChanged", {
         ...e.item,
-        value: g || ""
+        value: y || ""
       });
-    }, c = (g) => {
-      const u = De.incrementOrDecrementValue(e.item, g);
-      i("settingChanged", u);
+    }, c = (y) => {
+      const p = Be.incrementOrDecrementValue(e.item, y);
+      n("settingChanged", p);
     };
-    return (g, u) => (d(), C("div", {
-      class: h(f(r)),
+    return (y, p) => (d(), C("div", {
+      class: h(w(l)),
       style: { width: "calc(100% - 1rem)" }
     }, [
-      o("div", St, [
-        o("div", Et, [
-          o("span", Lt, E(f(n)), 1)
+      o("div", zt, [
+        o("div", Ht, [
+          o("span", At, H(w(r)), 1)
         ]),
-        o("div", Nt, [
-          o("div", null, E(f(a)), 1)
+        o("div", Rt, [
+          o("div", null, H(w(i)), 1)
         ]),
         o("div", null, [
-          u[2] || (u[2] = re(" Value: ", -1)),
-          I(f(he), {
+          p[2] || (p[2] = ce(" Value: ", -1)),
+          D(w(fe), {
             label: "Filter...",
             size: "small",
             class: "w-full",
             modelValue: t.item.value,
-            "onUpdate:modelValue": w,
+            "onUpdate:modelValue": m,
             onKeydown: [
-              u[0] || (u[0] = oe(T((y) => c(1), ["prevent"]), ["up"])),
-              u[1] || (u[1] = oe(T((y) => c(-1), ["prevent"]), ["down"]))
+              p[0] || (p[0] = ie(j((v) => c(1), ["prevent"]), ["up"])),
+              p[1] || (p[1] = ie(j((v) => c(-1), ["prevent"]), ["down"]))
             ]
           }, null, 8, ["modelValue"])
         ])
       ])
     ], 2));
   }
-}), jt = { class: "flex flex-col gap-2 p-2" }, zt = { class: "flex flex-row gap-2 justify-between" }, At = { class: "handle flex-1 flex gap-2 w-full hover:text-primary cursor-grab" }, Ht = ["title"], Rt = { class: "flex flex-row gap-2 items-center" }, Vt = { class: "flex border-b border-gray-200" }, Ut = { class: "flex items-center justify-between gap-1 w-full" }, Ft = {
+}), Ut = { class: "flex flex-col gap-2 p-2" }, Ft = { class: "flex flex-row gap-2 justify-between" }, Ot = { class: "handle flex-1 flex gap-2 w-full hover:text-primary cursor-grab" }, Pt = ["title"], Gt = { class: "flex flex-row gap-2 items-center" }, qt = { class: "flex border-b border-gray-200" }, Zt = { class: "flex items-center justify-between gap-1 w-full" }, Xt = {
   class: "flex flex-col gap-2 overflow-x-hidden overflow-y-auto",
   style: { "max-height": "360px" }
-}, Pt = { class: "mt-4 w-full flex flex-row justify-end pt-1" }, ms = /* @__PURE__ */ b({
+}, Qt = { class: "mt-4 w-full flex flex-row justify-end pt-1" }, xs = /* @__PURE__ */ b({
   __name: "WidgetsCatalogFlyout",
   props: {
     targetContainerKey: {},
@@ -1685,49 +1723,49 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
     onDoneClick: { type: Function }
   },
   setup(t) {
-    const s = t, e = (m, l) => [
-      ...l.widgets.filter((V) => V.indexOf("Container") === -1),
-      ...l.childWidgetsConfig.map((V) => V.widgetKey)
-    ].includes(m), i = R("Editing"), n = R(0), a = R(""), r = R(!1), w = p(() => Array.from(s.widgetsCatalog.keys())), c = p(() => w.value.map((m) => ({
-      widgetKey: m,
-      metaData: We(m, s.widgetsCatalog)
-    }))), g = p(() => c.value.filter(
-      (m) => m.metaData.categories.includes("Widget") && D(m.metaData)
-    )), u = p(() => c.value.filter(
-      (m) => m.metaData.categories.includes("Chart") && D(m.metaData)
-    )), y = p(() => c.value.filter(
-      (m) => m.metaData.categories.includes("Container") && D(m.metaData)
-    )), k = p(() => !!s.targetContainerKey), $ = (m) => {
-      a.value = m;
-    }, D = (m) => {
-      const l = a.value.trim().toLowerCase();
-      return l.length < 1 ? !0 : m.name.trim().toLowerCase().includes(l) || m.description.toLowerCase().includes(l);
-    }, _ = (m) => {
-      const l = a.value.trim().toLowerCase();
-      return l.length < 1 ? !0 : m.name.trim().toLowerCase().includes(l) || m.description.toLowerCase().includes(l);
-    }, W = (m) => L(
+    const s = t, e = (u, a) => [
+      ...a.widgets.filter((V) => V.indexOf("Container") === -1),
+      ...a.childWidgetsConfig.map((V) => V.widgetKey)
+    ].includes(u), n = R("Editing"), r = R(0), i = R(""), l = R(!1), m = f(() => Array.from(s.widgetsCatalog.keys())), c = f(() => m.value.map((u) => ({
+      widgetKey: u,
+      metaData: Ke(u, s.widgetsCatalog)
+    }))), y = f(() => c.value.filter(
+      (u) => u.metaData.categories.includes("Widget") && W(u.metaData)
+    )), p = f(() => c.value.filter(
+      (u) => u.metaData.categories.includes("Chart") && W(u.metaData)
+    )), v = f(() => c.value.filter(
+      (u) => u.metaData.categories.includes("Container") && W(u.metaData)
+    )), $ = f(() => !!s.targetContainerKey), _ = (u) => {
+      i.value = u;
+    }, W = (u) => {
+      const a = i.value.trim().toLowerCase();
+      return a.length < 1 ? !0 : u.name.trim().toLowerCase().includes(a) || u.description.toLowerCase().includes(a);
+    }, K = (u) => {
+      const a = i.value.trim().toLowerCase();
+      return a.length < 1 ? !0 : u.name.trim().toLowerCase().includes(a) || u.description.toLowerCase().includes(a);
+    }, T = (u) => L(
       "px-4 py-2 font-medium cursor-pointer border-b-2 border-transparent hover:border-primary focus:outline-none",
-      m === n.value ? "text-primary border-primary" : ""
-    ), H = (m) => {
-      k.value ? s.addWidget(m, s.targetContainerKey) : s.addWidget(m);
-    }, N = (m) => {
-      const l = (s.currentDashboardConfig.cssSettings || []).map((v) => v.key === m.key ? m : v);
-      s.onSettingItemsUpdated(l);
-    }, A = (m) => {
-      r.value = m;
+      u === r.value ? "text-primary border-primary" : ""
+    ), k = (u) => {
+      $.value ? s.addWidget(u, s.targetContainerKey) : s.addWidget(u);
+    }, I = (u) => {
+      const a = (s.currentDashboardConfig.cssSettings || []).map((g) => g.key === u.key ? u : g);
+      s.onSettingItemsUpdated(a);
+    }, M = (u) => {
+      l.value = u;
     };
-    return ke(
+    return Ie(
       () => s.targetContainerKey,
-      (m) => {
-        if (m) {
-          n.value = 0;
-          const l = de(m);
-          i.value = `Editing ${l}`;
+      (u) => {
+        if (u) {
+          r.value = 0;
+          const a = ue(u);
+          n.value = `Editing ${a}`;
         } else
-          i.value = "Editing Dashboard";
+          n.value = "Editing Dashboard";
       },
       { immediate: !0 }
-    ), (m, l) => (d(), K(f(it), {
+    ), (u, a) => (d(), S(w(at), {
       testId: "dashboard-catalog-flyout",
       className: "bg-body content-body bg-opacity-70 border-2 border-primary",
       style: {
@@ -1737,26 +1775,26 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
         minHeight: "360px",
         backdropFilter: "blur(8px)"
       },
-      onDraggingChange: A
+      onDraggingChange: M
     }, {
       default: B(() => [
-        o("div", jt, [
-          o("div", zt, [
-            o("div", At, [
-              r.value ? (d(), K(f(Ze), {
+        o("div", Ut, [
+          o("div", Ft, [
+            o("div", Ot, [
+              l.value ? (d(), S(w(Qe), {
                 key: 0,
                 class: "size-5"
-              })) : (d(), K(f(qe), {
+              })) : (d(), S(w(Xe), {
                 key: 1,
                 class: "size-5"
               })),
               o("h2", {
                 class: "flex-1 text-base margin-0 capitalize",
-                title: k.value ? i.value : `Editing dashboard: ${t.currentDashboardConfig.dashboardName}`
-              }, E(i.value), 9, Ht)
+                title: $.value ? n.value : `Editing dashboard: ${t.currentDashboardConfig.dashboardName}`
+              }, H(n.value), 9, Pt)
             ]),
-            o("div", Rt, [
-              I(f(j), {
+            o("div", Gt, [
+              D(w(z), {
                 "data-testid": "undo-dashboard-config-change",
                 isIconButton: !0,
                 tooltip: {
@@ -1764,14 +1802,14 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
                   title: "Undo"
                 },
                 disabled: t.undoStatus.isUndoDisabled,
-                onClick: l[0] || (l[0] = (v) => t.onUndoOrRedo("Undo"))
+                onClick: a[0] || (a[0] = (g) => t.onUndoOrRedo("Undo"))
               }, {
                 default: B(() => [
-                  I(f(Oe), { class: "size-5" })
+                  D(w(qe), { class: "size-5" })
                 ]),
                 _: 1
               }, 8, ["disabled"]),
-              I(f(j), {
+              D(w(z), {
                 "data-testid": "redo-dashboard-config-change",
                 isIconButton: !0,
                 tooltip: {
@@ -1779,14 +1817,14 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
                   title: "Redo"
                 },
                 disabled: t.undoStatus.isRedoDisabled,
-                onClick: l[1] || (l[1] = (v) => t.onUndoOrRedo("Redo"))
+                onClick: a[1] || (a[1] = (g) => t.onUndoOrRedo("Redo"))
               }, {
                 default: B(() => [
-                  I(f(Ge), { class: "size-5" })
+                  D(w(Ze), { class: "size-5" })
                 ]),
                 _: 1
               }, 8, ["disabled"]),
-              I(f(j), {
+              D(w(z), {
                 "data-testid": "reset-dashboard-to-default",
                 isIconButton: !0,
                 tooltip: {
@@ -1796,75 +1834,75 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
                 onClick: t.onResetToDefaultDashboardClick
               }, {
                 default: B(() => [
-                  I(f(Pe), { class: "size-5" })
+                  D(w(Ge), { class: "size-5" })
                 ]),
                 _: 1
               }, 8, ["onClick"])
             ])
           ]),
-          o("div", Vt, [
+          o("div", qt, [
             o("button", {
-              onClick: l[2] || (l[2] = (v) => n.value = 0),
-              class: h(W(0))
+              onClick: a[2] || (a[2] = (g) => r.value = 0),
+              class: h(T(0))
             }, "Widgets", 2),
             o("button", {
-              onClick: l[3] || (l[3] = (v) => n.value = 1),
-              class: h(W(1))
+              onClick: a[3] || (a[3] = (g) => r.value = 1),
+              class: h(T(1))
             }, "Charts", 2),
-            k.value ? O("", !0) : (d(), C("button", {
+            $.value ? Y("", !0) : (d(), C("button", {
               key: 0,
-              onClick: l[4] || (l[4] = (v) => n.value = 2),
-              class: h(W(2))
+              onClick: a[4] || (a[4] = (g) => r.value = 2),
+              class: h(T(2))
             }, " Containers ", 2)),
-            k.value ? O("", !0) : (d(), C("button", {
+            $.value ? Y("", !0) : (d(), C("button", {
               key: 1,
-              onClick: l[5] || (l[5] = (v) => n.value = 3),
-              class: h(W(3))
+              onClick: a[5] || (a[5] = (g) => r.value = 3),
+              class: h(T(3))
             }, [
-              I(f(Fe))
+              D(w(Pe))
             ], 2))
           ]),
-          o("div", Ut, [
-            I(f(he), {
+          o("div", Zt, [
+            D(w(fe), {
               label: "Filter...",
               size: "small",
               class: "w-full",
-              modelValue: a.value,
+              modelValue: i.value,
               "onUpdate:modelValue": [
-                l[6] || (l[6] = (v) => a.value = v),
-                $
+                a[6] || (a[6] = (g) => i.value = g),
+                _
               ]
             }, null, 8, ["modelValue"])
           ]),
-          o("div", Ft, [
-            n.value === 0 ? (d(!0), C(U, { key: 0 }, F(g.value, (v) => (d(), K(J, {
-              key: v.widgetKey,
-              widgetKey: v.widgetKey,
-              metaData: v.metaData,
-              alreadyAdded: e(v.widgetKey, t.currentDashboardConfig),
-              onAddWidget: () => H(v.widgetKey)
-            }, null, 8, ["widgetKey", "metaData", "alreadyAdded", "onAddWidget"]))), 128)) : n.value === 1 ? (d(!0), C(U, { key: 1 }, F(u.value, (v) => (d(), K(J, {
-              key: v.widgetKey,
-              widgetKey: v.widgetKey,
-              metaData: v.metaData,
-              alreadyAdded: e(v.widgetKey, t.currentDashboardConfig),
-              onAddWidget: () => H(v.widgetKey)
-            }, null, 8, ["widgetKey", "metaData", "alreadyAdded", "onAddWidget"]))), 128)) : n.value === 2 && !k.value ? (d(!0), C(U, { key: 2 }, F(y.value, (v) => (d(), K(J, {
-              key: v.widgetKey,
-              widgetKey: v.widgetKey,
-              metaData: v.metaData,
-              alreadyAdded: e(v.widgetKey, t.currentDashboardConfig),
-              onAddWidget: () => t.addContainer(v.widgetKey)
-            }, null, 8, ["widgetKey", "metaData", "alreadyAdded", "onAddWidget"]))), 128)) : n.value === 3 && !k.value ? (d(!0), C(U, { key: 3 }, F((t.currentDashboardConfig.cssSettings || []).filter(
-              _
-            ), (v) => (d(), K(Tt, {
-              key: v.key,
-              item: v,
-              onSettingChanged: N
-            }, null, 8, ["item"]))), 128)) : O("", !0)
+          o("div", Xt, [
+            r.value === 0 ? (d(!0), C(U, { key: 0 }, F(y.value, (g) => (d(), S(ee, {
+              key: g.widgetKey,
+              widgetKey: g.widgetKey,
+              metaData: g.metaData,
+              alreadyAdded: e(g.widgetKey, t.currentDashboardConfig),
+              onAddWidget: () => k(g.widgetKey)
+            }, null, 8, ["widgetKey", "metaData", "alreadyAdded", "onAddWidget"]))), 128)) : r.value === 1 ? (d(!0), C(U, { key: 1 }, F(p.value, (g) => (d(), S(ee, {
+              key: g.widgetKey,
+              widgetKey: g.widgetKey,
+              metaData: g.metaData,
+              alreadyAdded: e(g.widgetKey, t.currentDashboardConfig),
+              onAddWidget: () => k(g.widgetKey)
+            }, null, 8, ["widgetKey", "metaData", "alreadyAdded", "onAddWidget"]))), 128)) : r.value === 2 && !$.value ? (d(!0), C(U, { key: 2 }, F(v.value, (g) => (d(), S(ee, {
+              key: g.widgetKey,
+              widgetKey: g.widgetKey,
+              metaData: g.metaData,
+              alreadyAdded: e(g.widgetKey, t.currentDashboardConfig),
+              onAddWidget: () => t.addContainer(g.widgetKey)
+            }, null, 8, ["widgetKey", "metaData", "alreadyAdded", "onAddWidget"]))), 128)) : r.value === 3 && !$.value ? (d(!0), C(U, { key: 3 }, F((t.currentDashboardConfig.cssSettings || []).filter(
+              K
+            ), (g) => (d(), S(Vt, {
+              key: g.key,
+              item: g,
+              onSettingChanged: I
+            }, null, 8, ["item"]))), 128)) : Y("", !0)
           ]),
-          o("div", Pt, [
-            I(f(j), {
+          o("div", Qt, [
+            D(w(z), {
               class: "bg-opacity-100",
               tooltip: {
                 placement: "bottom",
@@ -1872,8 +1910,8 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
               },
               onClick: t.onDoneClick
             }, {
-              default: B(() => [...l[7] || (l[7] = [
-                re(" Done ", -1)
+              default: B(() => [...a[7] || (a[7] = [
+                ce(" Done ", -1)
               ])]),
               _: 1
             }, 8, ["onClick"])
@@ -1885,43 +1923,43 @@ const ds = /* @__PURE__ */ pe(lt, [["render", ut]]), ls = (t) => {
   }
 });
 export {
-  Xt as AddIcon,
-  j as Button,
-  Qe as CircleQuestionMarkIcon,
-  Xe as CrosshairIcon,
-  cs as DashboardGrid,
-  gs as DashboardWidgetBase,
-  Qt as DeleteIcon,
-  it as DraggablePanel,
-  us as DynamicWidgetLoader,
-  Yt as EditIcon,
-  Jt as GridIcon,
-  Ze as HandGrabIcon,
-  qe as HandIcon,
-  as as ListItem,
-  ns as MonitorIcon,
-  ss as MonitorSmartphoneIcon,
-  ce as MoveLeftIcon,
-  ue as MoveRightIcon,
-  Ge as RedoIcon,
-  Fe as SettingsIcon,
-  et as Stack,
-  os as TabletSmartphoneIcon,
-  is as TargetIcon,
-  he as TextField,
-  Pe as TimerResetIcon,
-  Oe as UndoIcon,
-  me as WidgetContainerColumn,
-  ps as WidgetContainerLarge,
-  hs as WidgetContainerRow,
-  ms as WidgetsCatalogFlyout,
-  rs as WrapperColumnContent,
-  ds as WrapperColumnContentListItem,
-  ge as XCircleIcon,
-  es as ZoomInIcon,
-  ts as ZoomOutIcon,
-  ls as showToast,
-  qt as useDashboardStore,
-  Zt as useDashboardUndoService,
+  ss as AddIcon,
+  z as Button,
+  Je as CircleQuestionMarkIcon,
+  Ye as CrosshairIcon,
+  fs as DashboardGrid,
+  vs as DashboardWidgetBase,
+  os as DeleteIcon,
+  at as DraggablePanel,
+  Cs as DynamicWidgetLoader,
+  ns as EditIcon,
+  rs as GridIcon,
+  Qe as HandGrabIcon,
+  Xe as HandIcon,
+  gs as ListItem,
+  cs as MonitorIcon,
+  ds as MonitorSmartphoneIcon,
+  pe as MoveLeftIcon,
+  he as MoveRightIcon,
+  Ze as RedoIcon,
+  Pe as SettingsIcon,
+  st as Stack,
+  ls as TabletSmartphoneIcon,
+  us as TargetIcon,
+  fe as TextField,
+  Ge as TimerResetIcon,
+  qe as UndoIcon,
+  ve as WidgetContainerColumn,
+  ys as WidgetContainerLarge,
+  ws as WidgetContainerRow,
+  xs as WidgetsCatalogFlyout,
+  ps as WrapperColumnContent,
+  hs as WrapperColumnContentListItem,
+  me as XCircleIcon,
+  is as ZoomInIcon,
+  as as ZoomOutIcon,
+  ms as showToast,
+  es as useDashboardStore,
+  ts as useDashboardUndoService,
   Q as useWidgetEmits
 };