@tenorlab/vue-dashboard 1.0.0

package/dist/vue-dashboard.es.js

@@ -0,0 +1,1936 @@
+import { reactive as ie, computed as p, readonly as fe, defineComponent as b, createElementBlock as C, openBlock as d, normalizeClass as g, createElementVNode as o, createStaticVNode as te, withModifiers as N, normalizeStyle as se, renderSlot as z, mergeProps as G, createBlock as K, withCtx as W, unref as f, toDisplayString as j, ref as R, onMounted as Ce, onUnmounted as ve, defineAsyncComponent as we, resolveComponent as xe, Suspense as ye, resolveDynamicComponent as ae, createCommentVNode as O, Fragment as U, renderList as F, createVNode as I, createTextVNode as re, withKeys as oe, watch as be } from "vue";
+import { blankDashboardConfig as ee, ensureContainersSequence as _e, getDistinctCssClasses as E, ensureZoomScaleIsWithinRange as ke, parseContainerTitle as de, dashboardSettingsUtils as $e, getWidgetMetaFromCatalog as Ie } from "./core.es.js";
+const De = (t) => {
+  const s = t.widgets.filter((i) => i.includes("WidgetContainer")).map((i) => Number(i.split("_")[1].replace("container", "")));
+  return `container${s.length > 0 ? Math.max(...s) + 1 : 1}`;
+}, We = (t, s) => {
+  const e = De(t);
+  return `${s}_${e}`;
+}, Be = (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
+    ))
+      return {
+        success: !1,
+        message: `DashboardStore: addWidget: Widget already added (${e})`,
+        updatedDashboardConfig: s
+      };
+    const a = [
+      ...s.childWidgetsConfig,
+      { parentWidgetKey: i, widgetKey: e }
+      // new entry
+    ];
+    return {
+      success: !0,
+      updatedDashboardConfig: {
+        ...s,
+        childWidgetsConfig: a
+      }
+    };
+  } else {
+    if (n && s.widgets.includes(e))
+      return {
+        success: !1,
+        message: `DashboardStore: addWidget: Widget already added (${e})`,
+        updatedDashboardConfig: s
+      };
+    const a = [...s.widgets, e];
+    return {
+      success: !0,
+      updatedDashboardConfig: {
+        ...s,
+        widgets: a
+      }
+    };
+  }
+}, Ke = (t, s, e) => {
+  if ((e || "").trim().length > 0) {
+    const i = t.childWidgetsConfig.filter(
+      (c) => c.parentWidgetKey !== e
+    ), n = t.childWidgetsConfig.filter(
+      (c) => c.parentWidgetKey === e && c.widgetKey !== s
+    ), a = [...i, ...n];
+    let r = {
+      ...t,
+      childWidgetsConfig: a
+    };
+    return `${s}`.includes("Container") && (r = _e(r)), {
+      success: !0,
+      updatedDashboardConfig: r
+    };
+  } else {
+    const i = t.widgets.filter((a) => a !== s), n = t.childWidgetsConfig.filter(
+      (a) => a.parentWidgetKey !== s
+    );
+    return {
+      success: !0,
+      updatedDashboardConfig: {
+        ...t,
+        widgets: i,
+        childWidgetsConfig: n
+      }
+    };
+  }
+}, Me = (t, s, e, i) => {
+  if ((i || "").trim().length > 0) {
+    const n = t.childWidgetsConfig.filter(
+      (h) => h.parentWidgetKey !== i
+    );
+    let a = t.childWidgetsConfig.filter(
+      (h) => h.parentWidgetKey === i
+    );
+    const r = a.indexOf(e);
+    let w = r + s;
+    if (w = Math.max(0, w), w = Math.min(a.length - 1, w), w === r)
+      return {
+        success: !1,
+        message: `DashboardStore: moveWidget: Widget already at min/max position (${e})`,
+        updatedDashboardConfig: t
+      };
+    const c = [...a], [u] = c.splice(r, 1);
+    return c.splice(w, 0, u), {
+      success: !0,
+      updatedDashboardConfig: {
+        ...t,
+        childWidgetsConfig: [...n, ...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)
+      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), {
+      success: !0,
+      updatedDashboardConfig: {
+        ...t,
+        widgets: w
+      }
+    };
+  }
+}, Se = () => ({
+  isLoading: !1,
+  // Start uninitialized/not loading
+  isEditing: !1,
+  allDashboardConfigs: [ee],
+  currentDashboardConfig: ee
+}), y = ie(Se()), S = {
+  setIsLoading: (t) => y.isLoading = t,
+  setIsEditing: (t) => y.isEditing = t,
+  setTargetContainerKey: (t) => y.targetContainerKey = t,
+  setAllDashboardConfigs: (t) => y.allDashboardConfigs = t,
+  setCurrentDashboardConfig: (t) => {
+    const s = [
+      ...y.allDashboardConfigs.filter((e) => e.dashboardId !== t.dashboardId),
+      t
+    ];
+    return y.allDashboardConfigs = s, y.currentDashboardConfig = t, s;
+  },
+  addDashboardConfig: (t) => {
+    const s = [
+      ...y.allDashboardConfigs.filter((e) => e.dashboardId !== t.dashboardId),
+      t
+    ];
+    return y.allDashboardConfigs = s, y.currentDashboardConfig = t, s;
+  },
+  deleteDashboardConfigById: (t) => {
+    const s = [...y.allDashboardConfigs.filter((e) => e.dashboardId !== t)];
+    return y.allDashboardConfigs = s, y.currentDashboardConfig = s[0] || ee, s;
+  },
+  selectDashboardById: (t) => {
+    const s = y.allDashboardConfigs.find((e) => e.dashboardId === t);
+    return s && (y.currentDashboardConfig = s), s;
+  },
+  addWidget: (t) => {
+    const s = Be({
+      dashboardConfig: y.currentDashboardConfig,
+      ...t
+    }), e = [
+      ...y.allDashboardConfigs.filter(
+        (i) => i.dashboardId !== s.updatedDashboardConfig.dashboardId
+      ),
+      s.updatedDashboardConfig
+    ];
+    return s.success && (y.allDashboardConfigs = e, y.currentDashboardConfig = s.updatedDashboardConfig), {
+      ...s,
+      allUpdatedDashboardConfigs: e
+    };
+  },
+  removeWidget: (t, s) => {
+    const e = Ke(y.currentDashboardConfig, t, s), i = [
+      ...y.allDashboardConfigs.filter(
+        (n) => n.dashboardId !== e.updatedDashboardConfig.dashboardId
+      ),
+      e.updatedDashboardConfig
+    ];
+    return e.success && (y.allDashboardConfigs = i, y.currentDashboardConfig = e.updatedDashboardConfig), {
+      ...e,
+      allUpdatedDashboardConfigs: i
+    };
+  },
+  moveWidget: (t, s, e) => {
+    const i = Me(y.currentDashboardConfig, t, s, e), n = [
+      ...y.allDashboardConfigs.filter(
+        (a) => a.dashboardId !== i.updatedDashboardConfig.dashboardId
+      ),
+      i.updatedDashboardConfig
+    ];
+    return i.success && (y.allDashboardConfigs = n, y.currentDashboardConfig = i.updatedDashboardConfig), {
+      ...i,
+      allUpdatedDashboardConfigs: n
+    };
+  }
+}, 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)
+}, Ee = {
+  getNextContainerKey: (t) => We(y.currentDashboardConfig, t),
+  getCurrentDashboardConfig: () => y.currentDashboardConfig,
+  getCurrentDashboardId: () => y.currentDashboardConfig.dashboardId,
+  getIsResponsive: () => y.currentDashboardConfig.responsiveGrid || !1,
+  getTargetContainerKey: () => y.targetContainerKey
+}, Le = {
+  isLoading: p(() => y.isLoading),
+  isEditing: p(() => y.isEditing),
+  targetContainerKey: p(() => y.targetContainerKey),
+  currentDashboardConfig: p(() => y.currentDashboardConfig),
+  allDashboardConfigs: p(() => y.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);
+  }))
+}, Ne = {
+  ...ne,
+  actions: ne,
+  getters: Ee,
+  computed: Le
+}, Ot = () => Ne, M = ie({
+  currentDashboardId: "",
+  undoHistory: {},
+  historyIndex: {}
+}), q = (t) => M.undoHistory[t] || [], Z = (t) => M.historyIndex[t] ?? -1, X = (t, s) => {
+  M.historyIndex[t] = s;
+}, Te = (t) => {
+  const s = t.dashboardId;
+  if (M.currentDashboardId !== s) {
+    M.currentDashboardId = s;
+    const e = {
+      undoIndex: 0,
+      config: t
+    };
+    X(s, 0), M.undoHistory[s] = [e];
+  }
+}, je = (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);
+}, ze = (t) => {
+  delete M.undoHistory[t], delete M.historyIndex[t];
+}, Ae = (t) => {
+  const s = q(t), e = Z(t), i = Math.max(0, e - 1);
+  if (i !== e)
+    return X(t, i), s[i]?.config;
+}, He = (t) => {
+  const s = q(t), e = s.length, i = Z(t), n = Math.min(e - 1, i + 1);
+  if (n !== i)
+    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;
+  return {
+    isUndoDisabled: i,
+    isRedoDisabled: n,
+    // Optional debugging fields
+    _currentIndex: s,
+    _historyLength: e
+  };
+}, Re = p(() => le()), Gt = () => ({
+  initializeHistoryForDashboard: Te,
+  resetAllHistory: () => {
+    M.undoHistory = {}, M.historyIndex = {};
+  },
+  addUndoEntry: je,
+  removeUndoHistoryForDashboard: ze,
+  getPreviousChanges: Ae,
+  getNextChanges: He,
+  computedUndoStatus: Re,
+  // Function that returns a Vue ComputedRef
+  getUndoStatus: le,
+  // for unit tests only
+  // Expose reactive state for debugging or advanced external use (optional)
+  historyState: fe(M)
+});
+function Q(t) {
+  return {
+    removeClick: (n, a) => {
+      t("removeClick", n, a);
+    },
+    moveClick: (n, a, r) => {
+      t("moveClick", n, a, r);
+    },
+    selectContainer: (n) => {
+      t("selectContainer", n);
+    }
+  };
+}
+const qt = /* @__PURE__ */ b({
+  __name: "AddIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-circle-plus-icon lucide-circle-plus ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+      }, null, -1),
+      o("path", { d: "M8 12h8" }, null, -1),
+      o("path", { d: "M12 8v8" }, null, -1)
+    ])], 2));
+  }
+}), Zt = /* @__PURE__ */ b({
+  __name: "DeleteIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`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)
+    ])], 2));
+  }
+}), Xt = /* @__PURE__ */ b({
+  __name: "EditIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-square-pen-icon lucide-square-pen ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }, null, -1),
+      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));
+  }
+}), Qt = /* @__PURE__ */ b({
+  __name: "GridIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`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)
+    ])], 2));
+  }
+}), Ve = /* @__PURE__ */ b({
+  __name: "SettingsIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-settings-icon lucide-settings ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("path", { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }, null, -1),
+      o("circle", {
+        cx: "12",
+        cy: "12",
+        r: "3"
+      }, null, -1)
+    ])], 2));
+  }
+}), Yt = /* @__PURE__ */ b({
+  __name: "ZoomInIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-zoom-in-icon lucide-zoom-in ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("circle", {
+        cx: "11",
+        cy: "11",
+        r: "8"
+      }, null, -1),
+      o("line", {
+        x1: "21",
+        x2: "16.65",
+        y1: "21",
+        y2: "16.65"
+      }, null, -1),
+      o("line", {
+        x1: "11",
+        x2: "11",
+        y1: "8",
+        y2: "14"
+      }, null, -1),
+      o("line", {
+        x1: "8",
+        x2: "14",
+        y1: "11",
+        y2: "11"
+      }, null, -1)
+    ])], 2));
+  }
+}), Jt = /* @__PURE__ */ b({
+  __name: "ZoomOutIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-zoom-out-icon lucide-zoom-out ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("circle", {
+        cx: "11",
+        cy: "11",
+        r: "8"
+      }, null, -1),
+      o("line", {
+        x1: "21",
+        x2: "16.65",
+        y1: "21",
+        y2: "16.65"
+      }, null, -1),
+      o("line", {
+        x1: "8",
+        x2: "14",
+        y1: "11",
+        y2: "11"
+      }, null, -1)
+    ])], 2));
+  }
+}), ce = /* @__PURE__ */ b({
+  __name: "MoveLeftIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(
+        `lucide lucide-circle-arrow-left-icon lucide-circle-arrow-left ${t.cssClass || ""}`.trim()
+      )
+    }, [...e[0] || (e[0] = [
+      o("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+      }, null, -1),
+      o("path", { d: "m12 8-4 4 4 4" }, null, -1),
+      o("path", { d: "M16 12H8" }, null, -1)
+    ])], 2));
+  }
+}), ue = /* @__PURE__ */ b({
+  __name: "MoveRightIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(
+        `lucide lucide-circle-arrow-right-icon lucide-circle-arrow-right ${t.cssClass || ""}`.trim()
+      )
+    }, [...e[0] || (e[0] = [
+      o("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+      }, null, -1),
+      o("path", { d: "m12 16 4-4-4-4" }, null, -1),
+      o("path", { d: "M8 12h8" }, null, -1)
+    ])], 2));
+  }
+}), ge = /* @__PURE__ */ b({
+  __name: "XCircleIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-circle-x-icon lucide-circle-x ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+      }, null, -1),
+      o("path", { d: "m15 9-6 6" }, null, -1),
+      o("path", { d: "m9 9 6 6" }, null, -1)
+    ])], 2));
+  }
+}), es = /* @__PURE__ */ b({
+  __name: "MonitorSmartphoneIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(
+        `lucide lucide-monitor-smartphone-icon lucide-monitor-smartphone ${t.cssClass || ""}`.trim()
+      )
+    }, [...e[0] || (e[0] = [
+      o("path", { d: "M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8" }, null, -1),
+      o("path", { d: "M10 19v-3.96 3.15" }, null, -1),
+      o("path", { d: "M7 19h5" }, null, -1),
+      o("rect", {
+        width: "6",
+        height: "10",
+        x: "16",
+        y: "12",
+        rx: "2"
+      }, null, -1)
+    ])], 2));
+  }
+}), ts = /* @__PURE__ */ b({
+  __name: "TabletSmartphoneIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(
+        `lucide lucide-tablet-smartphone-icon lucide-tablet-smartphone ${t.cssClass || ""}`.trim()
+      )
+    }, [...e[0] || (e[0] = [
+      o("rect", {
+        width: "10",
+        height: "14",
+        x: "3",
+        y: "8",
+        rx: "2"
+      }, null, -1),
+      o("path", { d: "M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" }, null, -1),
+      o("path", { d: "M8 18h.01" }, null, -1)
+    ])], 2));
+  }
+}), ss = /* @__PURE__ */ b({
+  __name: "MonitorIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-monitor-icon lucide-monitor ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("rect", {
+        width: "20",
+        height: "14",
+        x: "2",
+        y: "3",
+        rx: "2"
+      }, null, -1),
+      o("line", {
+        x1: "8",
+        x2: "16",
+        y1: "21",
+        y2: "21"
+      }, null, -1),
+      o("line", {
+        x1: "12",
+        x2: "12",
+        y1: "17",
+        y2: "21"
+      }, null, -1)
+    ])], 2));
+  }
+}), Ue = /* @__PURE__ */ b({
+  __name: "TimerResetIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-timer-reset-icon lucide-timer-reset ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("path", { d: "M10 2h4" }, null, -1),
+      o("path", { d: "M12 14v-4" }, null, -1),
+      o("path", { d: "M4 13a8 8 0 0 1 8-7 8 8 0 1 1-5.3 14L4 17.6" }, null, -1),
+      o("path", { d: "M9 17H4v5" }, null, -1)
+    ])], 2));
+  }
+}), Fe = /* @__PURE__ */ b({
+  __name: "UndoIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-undo-icon lucide-undo ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("path", { d: "M3 7v6h6" }, null, -1),
+      o("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" }, null, -1)
+    ])], 2));
+  }
+}), Pe = /* @__PURE__ */ b({
+  __name: "RedoIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-redo-icon lucide-redo ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("path", { d: "M21 7v6h-6" }, null, -1),
+      o("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" }, null, -1)
+    ])], 2));
+  }
+}), Oe = /* @__PURE__ */ b({
+  __name: "HandIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-hand-icon lucide-hand ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("path", { d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" }, null, -1),
+      o("path", { d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" }, null, -1),
+      o("path", { d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" }, null, -1),
+      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));
+  }
+}), Ge = /* @__PURE__ */ b({
+  __name: "HandGrabIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`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)
+    ])], 2));
+  }
+}), qe = /* @__PURE__ */ b({
+  __name: "CrosshairIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-crosshair-icon lucide-crosshair ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("line", {
+        x1: "22",
+        x2: "18",
+        y1: "12",
+        y2: "12"
+      }, null, -1),
+      o("line", {
+        x1: "6",
+        x2: "2",
+        y1: "12",
+        y2: "12"
+      }, null, -1),
+      o("line", {
+        x1: "12",
+        x2: "12",
+        y1: "6",
+        y2: "2"
+      }, null, -1),
+      o("line", {
+        x1: "12",
+        x2: "12",
+        y1: "22",
+        y2: "18"
+      }, null, -1)
+    ])], 2));
+  }
+}), os = /* @__PURE__ */ b({
+  __name: "TargetIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(`lucide lucide-target-icon lucide-target ${t.cssClass || ""}`.trim())
+    }, [...e[0] || (e[0] = [
+      o("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+      }, null, -1),
+      o("circle", {
+        cx: "12",
+        cy: "12",
+        r: "6"
+      }, null, -1),
+      o("circle", {
+        cx: "12",
+        cy: "12",
+        r: "2"
+      }, null, -1)
+    ])], 2));
+  }
+}), Ze = /* @__PURE__ */ b({
+  __name: "CircleQuestionMarkIcon",
+  props: {
+    cssClass: {}
+  },
+  setup(t) {
+    return (s, e) => (d(), C("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: g(
+        `lucide lucide-circle-question-mark-icon lucide-circle-question-mark ${t.cssClass || ""}`.trim()
+      )
+    }, [...e[0] || (e[0] = [
+      o("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+      }, null, -1),
+      o("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }, null, -1),
+      o("path", { d: "M12 17h.01" }, null, -1)
+    ])], 2));
+  }
+}), Xe = ["title", "disabled"], T = /* @__PURE__ */ b({
+  __name: "Button",
+  props: {
+    disabled: { type: Boolean, default: !1 },
+    className: {},
+    tooltip: {},
+    isIconButton: { type: Boolean },
+    type: { default: "normal" },
+    category: { default: "primary" },
+    font: { default: "semibold" },
+    border: { default: 0 },
+    borderHover: { default: 1 },
+    borderColor: { default: "" },
+    px: { default: 0.7 },
+    py: { default: 0.25 },
+    justifyCss: { default: "justify-center" },
+    shadow: { default: "sm" },
+    shadowHover: { default: "md" },
+    addCss: { default: "" }
+  },
+  emits: ["click"],
+  setup(t, { emit: s }) {
+    const e = t, i = s, n = /* @__PURE__ */ new Map([
+      [
+        "normal",
+        "group bg-[category] content-[category] hover:bg-[category] group-hover:bg-[category] focus:outline-[category] focus:outline-offset-[category]"
+      ],
+      [
+        "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, u = e.category || "primary", h = e.type || "normal", x = e.disabled || !1, k = e.className || "", $ = e.font || "", D = Number((e.border || 0) > 0 ? e.border : 0);
+      let _ = (e.borderColor || "").trim();
+      _ = _.length > 0 ? _ : "";
+      const B = Number((e.borderHover || 0) > 0 ? e.borderHover : 0), H = e.shadow || "sm", L = e.shadowHover || "md", A = (e.addCss || "").trim(), m = e.justifyCss || "justify-center";
+      if (c)
+        return E(
+          "flex flex-row items-center",
+          x ? "text-disabled" : `text-${u} hover:brightness-110 cursor-pointer`,
+          k || ""
+        );
+      const l = [
+        "relative cursor-pointer",
+        "rounded-sm focus:outline-none focus:ring focus:ring-offset",
+        "transition-all duration-150",
+        "text-sm",
+        `font-${$}`
+      ];
+      if (x)
+        h === "ghost" ? l.push("text-disabled border-disabled cursor-not-allowed") : l.push("bg-disabled content-disabled border-disabled cursor-not-allowed");
+      else {
+        l.push("cursor-pointer");
+        let v = "";
+        n.has(h) ? v = `${n.get(h)}` : v = `${n.get("normal")}`, D < 1 && (v = v.replace("border-[category]", ""));
+        const V = v.replaceAll("[category]", u).trim();
+        l.push(V);
+      }
+      return D > 0 ? (l.push(`border-[${D}px]`), l.push(`border-${_}`)) : (l.push("border-[1px]"), l.push("border-transparent")), B > 0 ? (l.push(`hover:border-[${B}px] group-hover:border-[${B}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-${L} group-hover:shadow-${L}`), A.length > 0 && l.push(A), A.indexOf("hidden") === -1 && l.push("inline-flex"), l.push(m), l.join(" ").trim();
+    }), r = p(() => ({
+      padding: e.isIconButton ? 0 : `${e.py}rem ${e.px}rem `
+    })), w = (c) => {
+      if (e.disabled) {
+        c.preventDefault();
+        return;
+      }
+      i("click", c);
+    };
+    return (c, u) => (d(), C("button", {
+      type: "button",
+      class: g(a.value),
+      style: se(r.value),
+      title: t.tooltip?.title,
+      disabled: t.disabled,
+      onClick: N(w, ["stop"])
+    }, [
+      z(c.$slots, "default")
+    ], 14, Xe));
+  }
+}), Qe = ["data-testid"], Ye = /* @__PURE__ */ b({
+  __name: "Stack",
+  props: {
+    testId: {},
+    classNames: {},
+    direction: {},
+    style: {}
+  },
+  setup(t) {
+    const s = t, e = p(() => {
+      const { testId: n, classNames: a, direction: r, ...w } = s;
+      return w;
+    }), i = p(() => s.direction === "row" ? E("flex flex-row items-center gap-2", s.classNames || "") : E("flex flex-col gap-2 w-full", s.classNames || ""));
+    return (n, a) => (d(), C("div", G({
+      "data-testid": t.testId || "not-set",
+      class: i.value
+    }, e.value), [
+      z(n.$slots, "default")
+    ], 16, Qe));
+  }
+}), ns = /* @__PURE__ */ b({
+  __name: "ListItem",
+  props: {
+    testId: {},
+    classNames: {},
+    direction: {},
+    style: {},
+    innerClass: {}
+  },
+  setup(t) {
+    const s = t, e = p(() => {
+      const { classNames: a, direction: r, innerClass: w, ...c } = s;
+      return c;
+    }), i = p(() => E(s.classNames || "", "w-full")), n = E(
+      `w-full flex overflow-hidden justify-between items-center gap-0 
+      rounded-md border`,
+      s.innerClass || ""
+    );
+    return (a, r) => (d(), K(Ye, G({
+      direction: "row",
+      class: i.value
+    }, e.value), {
+      default: W(() => [
+        o("div", {
+          class: g(f(n))
+        }, [
+          z(a.$slots, "default")
+        ], 2)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), Je = ["for"], et = ["id", "value", "placeholder", "aria-label"], tt = `
+  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({
+  __name: "TextField",
+  props: {
+    label: {},
+    size: { default: "medium" },
+    modelValue: {},
+    className: { default: "" },
+    placeholder: { default: "" }
+  },
+  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(() => `${tt} ${a.value}`);
+    return (c, u) => (d(), C("div", {
+      class: g(r.value)
+    }, [
+      o("label", {
+        for: e.label,
+        class: "block text-sm/6 font-medium mb-1.5"
+      }, j(e.label), 9, Je),
+      o("input", {
+        id: e.label,
+        type: "text",
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        class: g(w.value),
+        "aria-label": e.label,
+        onInput: n,
+        onKeydown: u[0] || (u[0] = (h) => i("keydown", h))
+      }, null, 42, et)
+    ], 2));
+  }
+}), st = ["data-testid"], ot = /* @__PURE__ */ b({
+  __name: "DraggablePanel",
+  props: {
+    testId: {},
+    className: {},
+    style: {},
+    onDraggingChange: { type: Function }
+  },
+  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 = {
+      // 1. Take it out of the document flow
+      position: "fixed",
+      // 2. Set initial viewport position (e.g., top right)
+      top: "6rem",
+      right: "1rem",
+      // 3. Ensure it stacks above other content
+      zIndex: 1,
+      // Add your layout/appearance styles
+      width: "360px",
+      minHeight: "360px",
+      borderStyle: "solid",
+      borderWidth: "3px",
+      boxShadow: "rgba(0, 0, 0, 0.5) 7px 7px 10px 0px"
+    }, u = p(() => ({
+      ...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)`,
+      top: c.top,
+      right: c.right,
+      // When translating, setting 'left' and 'top' to 0 helps maintain consistent behavior
+      left: "initial"
+    })), h = ($) => {
+      $.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", x), window.addEventListener("mouseup", k));
+    }, x = ($) => {
+      const D = $.clientX - r.value.x, _ = $.clientY - r.value.y;
+      a.value = {
+        x: w.value.x + D,
+        y: w.value.y + _
+      };
+    }, k = () => {
+      window.removeEventListener("mousemove", x), window.removeEventListener("mouseup", k), setTimeout(() => {
+        i("draggingChange", !1);
+      }, 100);
+    };
+    return Ce(() => {
+      n.value && n.value.addEventListener("mousedown", h);
+    }), ve(() => {
+      n.value && n.value.removeEventListener("mousedown", h), window.removeEventListener("mousemove", x), window.removeEventListener("mouseup", k);
+    }), ($, D) => (d(), C("div", {
+      ref_key: "panelRef",
+      ref: n,
+      "data-testid": e.testId || "draggable-panel",
+      class: g(e.className),
+      style: se(u.value)
+    }, [
+      z($.$slots, "default")
+    ], 14, st));
+  }
+}), pe = (t, s) => {
+  const e = t.__vccOpts || t;
+  for (const [i, n] of s)
+    e[i] = n;
+  return e;
+}, nt = {}, it = {
+  class: "w-full h-full flex-1 flex flex-col gap-2 items-end justify-end content-end",
+  style: { "min-height": "140px" }
+};
+function at(t, s) {
+  return d(), C("div", it, [
+    z(t.$slots, "default")
+  ]);
+}
+const is = /* @__PURE__ */ pe(nt, [["render", at]]), rt = {}, dt = { className: "w-full flex flex-col items-end" };
+function lt(t, s) {
+  return d(), C("div", dt, [
+    z(t.$slots, "default")
+  ]);
+}
+const as = /* @__PURE__ */ pe(rt, [["render", lt]]), rs = (t) => {
+  console.warn("showToast TODO", t);
+}, ds = /* @__PURE__ */ b({
+  __name: "DashboardGrid",
+  props: {
+    isEditing: { type: Boolean },
+    zoomScale: {},
+    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 = ke(Number(s.zoomScale || 0));
+      return {
+        "--bwj-dashboard-transform-scale": a,
+        "--bwj-dashboard-add-cols": e(a)
+      };
+    }), n = p(() => E(
+      "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: g(n.value),
+      style: se(i.value)
+    }, [
+      z(a.$slots, "default")
+    ], 6));
+  }
+}), ct = {
+  key: 1,
+  class: "flex"
+}, ls = /* @__PURE__ */ b({
+  __name: "DynamicWidgetLoader",
+  props: {
+    index: {},
+    maxIndex: {},
+    widgetKey: {},
+    parentWidgetKey: {},
+    targetContainerKey: {},
+    childWidgetsConfig: {},
+    widgetCatalog: {},
+    isEditing: { type: Boolean },
+    extraProps: {}
+  },
+  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) : ""), u = p(() => e.widgetCatalog.get(w.value)), h = p(() => {
+      const _ = u.value;
+      return _ ? _.component ? _.component : _.loader ? we({
+        loader: _.loader,
+        // This is for testing loadign with delay:
+        // loader: () =>
+        //   new Promise((resolve) => {
+        //     setTimeout(async () => {
+        //       //@ts-ignore
+        //       resolve(await entry.loader())
+        //     }, 750)
+        //   }),
+        // Optional: Add a loading state component
+        // loadingComponent: MySpinnerComponent,
+        // While the chunk downloads:
+        loadingComponent: {
+          template: '<div class="p-8 text-center text-primary animate-pulse">Loading Widget...</div>'
+        },
+        // If the CDN or local chunk fails to load:
+        errorComponent: {
+          template: '<div class="p-8 text-error">Failed to load plugin.</div>'
+        },
+        delay: 200,
+        timeout: 3e3
+      }) : null : null;
+    }), x = p(() => r.value ? (e.childWidgetsConfig || []).filter((_) => _.parentWidgetKey === e.widgetKey) : []), k = (_, B) => {
+      n.removeClick(_, B);
+    }, $ = (_, B, H) => {
+      n.moveClick(_, B, H);
+    }, D = (_) => {
+      n.selectContainer(_);
+    };
+    return (_, B) => {
+      const H = xe("DynamicWidgetLoader", !0);
+      return d(), K(ye, null, {
+        fallback: W(() => [
+          o("div", null, "Loading " + j(u.value?.meta?.name || u.value?.title), 1)
+        ]),
+        default: W(() => [
+          h.value ? (d(), K(ae(h.value), {
+            key: 0,
+            index: t.index,
+            maxIndex: x.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 : u.value?.meta?.name) || !1,
+            extraProps: t.extraProps,
+            onRemoveClick: k,
+            onMoveClick: $,
+            onSelectContainer: D
+          }, {
+            default: W(() => [
+              r.value ? (d(!0), C(U, { key: 0 }, F(x.value, (L, A) => (d(), K(H, {
+                key: `${L.widgetKey}_${A}`,
+                index: A,
+                maxIndex: x.value.length - 1,
+                widgetKey: L.widgetKey,
+                parentWidgetKey: L.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", ct, [
+            o("p", null, " Widget not found or loader failed:: " + j(u.value?.meta?.name || u.value?.title || t.widgetKey), 1)
+          ]))
+        ]),
+        _: 1
+      });
+    };
+  }
+}), ut = { class: "widget-title-wrapper w-full flex flex-row gap-2 items-center justify-between" }, gt = { class: "widget-title" }, ht = { "data-testid": "collapse-and-other-actions" }, pt = { class: "actions-inner" }, mt = { class: "actions-buttons-container" }, ft = { class: "widget-inner" }, Y = "size-5", cs = /* @__PURE__ */ b({
+  __name: "DashboardWidgetBase",
+  props: {
+    index: {},
+    maxIndex: {},
+    widgetKey: {},
+    parentWidgetKey: {},
+    isEditing: { type: Boolean },
+    highlight: { type: Boolean },
+    testId: {},
+    title: {},
+    size: {},
+    borderCssClasses: {},
+    backgroundCssClasses: {},
+    hideTitle: { type: Boolean },
+    noShadow: { type: Boolean },
+    noBorder: { type: Boolean },
+    noPadding: { type: Boolean },
+    direction: {},
+    extraProps: {}
+  },
+  emits: ["removeClick", "moveClick", "selectContainer"],
+  setup(t, { emit: s }) {
+    const e = t, i = s, n = p(() => e.hideTitle && !e.isEditing), a = p(() => {
+      const u = e.borderCssClasses || "", h = e.noBorder;
+      let x = `dashboard-widget ${e.isEditing ? "editing" : ""} border border-solid`;
+      return h ? x = `${x} border-transparent border-opacity-0` : (u || "").trim().length > 0 ? x = `${x} ${u}` : x = `${x} border-card-invert border-opacity-20`, e.noShadow && (x = `${x} no-shadow`), e.noPadding && (x = `${x} no-padding p-0`), (e.backgroundCssClasses || "").trim().length > 0 ? x = `${x} ${e.backgroundCssClasses}` : x = `${x} bg-card content-card`, ["large", "xlarge"].indexOf(e.size || "") > -1 && (x = `${x} ${e.size}-widget`), E(x);
+    }), r = p(() => {
+      const u = n.value;
+      return E(
+        "widget-header",
+        u ? "hidden" : "flex items-center justify-between border-b border-solid border-card-invert",
+        u ? "border-opacity-0" : "border-opacity-20"
+      );
+    }), w = () => {
+      e.widgetKey && i("removeClick", e.widgetKey, e.parentWidgetKey);
+    }, c = (u) => {
+      e.widgetKey && i("moveClick", u, e.widgetKey, e.parentWidgetKey);
+    };
+    return (u, h) => (d(), C("div", {
+      class: g(a.value)
+    }, [
+      o("div", {
+        class: g(r.value)
+      }, [
+        o("div", ut, [
+          o("h2", gt, j(e.title), 1),
+          h[2] || (h[2] = o("div", null, null, -1))
+        ]),
+        o("div", ht, [
+          o("div", pt, [
+            h[3] || (h[3] = o("div", null, [
+              o("span", { class: "hidden" }, "Widget")
+            ], -1)),
+            o("div", mt, [
+              I(f(T), {
+                "data-testid": `move-widget-left_${e.title}`,
+                isIconButton: !0,
+                disabled: e.index < 1,
+                tooltip: {
+                  placement: "top",
+                  title: `${e.index < 1 ? "Already at min position" : "Move Widget to the left/up"}`
+                },
+                onClick: h[0] || (h[0] = N((x) => c(-1), ["stop"]))
+              }, {
+                default: W(() => [
+                  I(f(ce), {
+                    class: g(Y)
+                  })
+                ]),
+                _: 1
+              }, 8, ["data-testid", "disabled", "tooltip"]),
+              I(f(T), {
+                "data-testid": `move-widget-right_${e.title}`,
+                isIconButton: !0,
+                disabled: e.index >= e.maxIndex,
+                tooltip: {
+                  placement: "top",
+                  title: `${e.index >= e.maxIndex ? "Already at max position" : "Move Widget to the right/down"}`
+                },
+                onClick: h[1] || (h[1] = N((x) => c(1), ["stop"]))
+              }, {
+                default: W(() => [
+                  I(f(ue), {
+                    class: g(Y)
+                  })
+                ]),
+                _: 1
+              }, 8, ["data-testid", "disabled", "tooltip"]),
+              I(f(T), {
+                "data-testid": `remove-container_${e.title}`,
+                isIconButton: !0,
+                tooltip: {
+                  placement: "top",
+                  title: "Remove Widget"
+                },
+                onClick: N(w, ["stop"])
+              }, {
+                default: W(() => [
+                  I(f(ge), {
+                    class: g(Y)
+                  })
+                ]),
+                _: 1
+              }, 8, ["data-testid"])
+            ])
+          ])
+        ])
+      ], 2),
+      o("div", ft, [
+        z(u.$slots, "default")
+      ])
+    ], 2));
+  }
+}), Ct = ["data-testid"], vt = { class: "text-sm font-semibold capitalize" }, wt = { "data-testid": "collapse-and-other-actions" }, xt = { class: "actions-inner" }, yt = { class: "actions-buttons-container" }, bt = ["data-testid"], P = "size-5", _t = "border-transparent", kt = "border-card-invert", me = /* @__PURE__ */ b({
+  __name: "WidgetContainer",
+  props: {
+    index: {},
+    maxIndex: {},
+    widgetKey: { default: void 0 },
+    parentWidgetKey: { default: void 0 },
+    isEditing: { type: Boolean },
+    highlight: { type: Boolean, default: !1 },
+    testId: {},
+    title: { default: "" },
+    size: { default: "default" },
+    borderCssClasses: {},
+    backgroundCssClasses: {},
+    hideTitle: { type: Boolean },
+    noShadow: { type: Boolean },
+    noBorder: { type: Boolean },
+    noPadding: { type: Boolean },
+    direction: { default: "column" },
+    extraProps: {}
+  },
+  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 ? kt : "border-transparent";
+    }), w = p(() => {
+      const k = e.highlight || !1, $ = e.direction || "column", D = a.value, _ = e.isEditing || !1;
+      let L = 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"), E(
+        "dashboard-widget-container relative ",
+        D ? "" : "has-no-children",
+        _ ? "editing" : "",
+        l,
+        m,
+        A ? "widget-container-grid" : "widget-container-flex",
+        `direction-${$}`,
+        `border ${L}`,
+        `${k ? "highlight-container" : ""} ${L}`
+      );
+    }), c = p(() => `widget-container-header direction-${e.direction} flex items-center border ${r.value}`), u = () => {
+      e.widgetKey && n.removeClick(e.widgetKey);
+    }, h = (k) => {
+      e.widgetKey && n.moveClick(k, e.widgetKey, e.parentWidgetKey);
+    }, x = () => {
+      e.widgetKey && n.selectContainer(e.widgetKey);
+    };
+    return (k, $) => (d(), C("div", {
+      "data-testid": `container_${e.widgetKey}`,
+      "data-change": "asd",
+      class: g(w.value)
+    }, [
+      o("div", {
+        class: g(c.value)
+      }, [
+        o("div", {
+          class: "widget-title-wrapper w-full flex whitespace-nowrap",
+          onClick: N(x, ["stop"])
+        }, [
+          o("span", vt, j(e.title), 1)
+        ]),
+        o("div", wt, [
+          o("div", xt, [
+            o("div", yt, [
+              I(f(T), {
+                "data-testid": `open-widgets-catalog-from-container_${e.title}`,
+                isIconButton: !0,
+                class: "whitespace-nowrap",
+                tooltip: { placement: "top", title: "Target this Container" },
+                onClick: N(x, ["stop"])
+              }, {
+                default: W(() => [
+                  I(f(qe), {
+                    class: g(`${P} ${e.highlight ? "text-success" : "text-disabled"}`)
+                  }, null, 8, ["class"])
+                ]),
+                _: 1
+              }, 8, ["data-testid"]),
+              I(f(T), {
+                "data-testid": `move-container-left_${e.title}`,
+                isIconButton: !0,
+                disabled: e.index < 1,
+                tooltip: {
+                  placement: "top",
+                  title: e.index < 1 ? "Already at min position" : "Move Container to the left/up"
+                },
+                onClick: $[0] || ($[0] = N((D) => h(-1), ["stop"]))
+              }, {
+                default: W(() => [
+                  I(f(ce), {
+                    class: g(P)
+                  })
+                ]),
+                _: 1
+              }, 8, ["data-testid", "disabled", "tooltip"]),
+              I(f(T), {
+                "data-testid": `move-container-right_${e.title}`,
+                isIconButton: !0,
+                disabled: e.index >= e.maxIndex,
+                tooltip: {
+                  placement: "top",
+                  title: e.index >= e.maxIndex ? "Already at max position" : "Move Container to the right/down"
+                },
+                onClick: $[1] || ($[1] = N((D) => h(1), ["stop"]))
+              }, {
+                default: W(() => [
+                  I(f(ue), {
+                    class: g(P)
+                  })
+                ]),
+                _: 1
+              }, 8, ["data-testid", "disabled", "tooltip"]),
+              I(f(T), {
+                "data-testid": `remove-container_${e.title}`,
+                isIconButton: !0,
+                tooltip: { placement: "top", title: "Remove Container" },
+                onClick: N(u, ["stop"])
+              }, {
+                default: W(() => [
+                  I(f(ge), {
+                    class: g(P)
+                  })
+                ]),
+                _: 1
+              }, 8, ["data-testid"])
+            ])
+          ])
+        ])
+      ], 2),
+      o("div", {
+        "data-testid": `childrenwrapper_${e.widgetKey}`,
+        class: "widget-container-inner"
+      }, [
+        z(k.$slots, "default")
+      ], 8, bt)
+    ], 10, Ct));
+  }
+}), us = /* @__PURE__ */ b({
+  __name: "WidgetContainerRow",
+  props: {
+    index: {},
+    maxIndex: {},
+    widgetKey: { default: void 0 },
+    parentWidgetKey: { default: void 0 },
+    isEditing: { type: Boolean },
+    highlight: { type: Boolean, default: !1 },
+    testId: {},
+    title: { default: "" },
+    size: { default: "default" },
+    borderCssClasses: {},
+    backgroundCssClasses: {},
+    hideTitle: { type: Boolean },
+    noShadow: { type: Boolean },
+    noBorder: { type: Boolean },
+    noPadding: { type: Boolean },
+    direction: { default: "row" },
+    extraProps: {}
+  },
+  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, ...u } = e;
+      return u;
+    });
+    return (c, u) => (d(), K(me, G({ direction: "row" }, w.value, {
+      onRemoveClick: f(n),
+      onMoveClick: f(a),
+      onSelectContainer: f(r)
+    }), {
+      default: W(() => [
+        z(c.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["onRemoveClick", "onMoveClick", "onSelectContainer"]));
+  }
+}), gs = /* @__PURE__ */ b({
+  __name: "WidgetContainerLarge",
+  props: {
+    index: {},
+    maxIndex: {},
+    widgetKey: { default: void 0 },
+    parentWidgetKey: { default: void 0 },
+    isEditing: { type: Boolean },
+    highlight: { type: Boolean, default: !1 },
+    testId: {},
+    title: { default: "" },
+    size: { default: "large" },
+    borderCssClasses: {},
+    backgroundCssClasses: {},
+    hideTitle: { type: Boolean },
+    noShadow: { type: Boolean },
+    noBorder: { type: Boolean },
+    noPadding: { type: Boolean },
+    direction: { default: "column" },
+    extraProps: {}
+  },
+  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, ...u } = e;
+      return u;
+    });
+    return (c, u) => (d(), K(me, G({ size: "large" }, w.value, {
+      onRemoveClick: f(n),
+      onMoveClick: f(a),
+      onSelectContainer: f(r)
+    }), {
+      default: W(() => [
+        z(c.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["onRemoveClick", "onMoveClick", "onSelectContainer"]));
+  }
+}), $t = { class: "w-full" }, It = { class: "flex flex-row items-center gap-2 justify-between" }, Dt = { class: "font-bold" }, Wt = { class: "text-xs" }, Bt = { class: "flex flex-col gap-2 text-xs" }, J = /* @__PURE__ */ b({
+  __name: "WidgetListItem",
+  props: {
+    widgetKey: {},
+    metaData: {},
+    alreadyAdded: { type: Boolean }
+  },
+  emits: ["addWidget"],
+  setup(t, { emit: s }) {
+    const e = t, i = s, n = e.metaData?.icon || Ze, a = e.metaData?.name || "Unknown", r = e.metaData?.description || "---", w = e.metaData?.noDuplicatedWidgets || !1, c = p(() => w && e?.alreadyAdded), u = p(() => E(`
+    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"}
+  `)), h = () => {
+      c.value || i("addWidget");
+    };
+    return (x, k) => (d(), C("div", {
+      class: g(u.value),
+      style: { width: "calc(100% - 1rem)" },
+      onClick: h
+    }, [
+      (d(), K(ae(f(n)), { class: "" })),
+      o("div", $t, [
+        o("div", It, [
+          o("span", Dt, j(f(a)), 1),
+          o("div", Wt, j(c.value ? "(Added)" : ""), 1)
+        ]),
+        o("div", Bt, [
+          o("div", null, j(f(r)), 1)
+        ])
+      ])
+    ], 2));
+  }
+}), Kt = { class: "w-full" }, Mt = { class: "flex flex-row items-center gap-2 justify-between" }, St = { class: "font-bold" }, Et = { class: "flex flex-col gap-2 text-xs" }, Lt = /* @__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 = E(`
+  flex flex-row gap-2 p-2 rounded-md border text-sm bg-card content-card backdrop-opacity-100
+`), w = (u) => {
+      i("settingChanged", {
+        ...e.item,
+        value: u || ""
+      });
+    }, c = (u) => {
+      const h = $e.incrementOrDecrementValue(e.item, u);
+      i("settingChanged", h);
+    };
+    return (u, h) => (d(), C("div", {
+      class: g(f(r)),
+      style: { width: "calc(100% - 1rem)" }
+    }, [
+      o("div", Kt, [
+        o("div", Mt, [
+          o("span", St, j(f(n)), 1)
+        ]),
+        o("div", Et, [
+          o("div", null, j(f(a)), 1)
+        ]),
+        o("div", null, [
+          h[2] || (h[2] = re(" Value: ", -1)),
+          I(f(he), {
+            label: "Filter...",
+            size: "small",
+            class: "w-full",
+            modelValue: t.item.value,
+            "onUpdate:modelValue": w,
+            onKeydown: [
+              h[0] || (h[0] = oe(N((x) => c(1), ["prevent"]), ["up"])),
+              h[1] || (h[1] = oe(N((x) => c(-1), ["prevent"]), ["down"]))
+            ]
+          }, null, 8, ["modelValue"])
+        ])
+      ])
+    ], 2));
+  }
+}), Nt = { class: "flex flex-col gap-2 p-2" }, Tt = { class: "flex flex-row gap-2 justify-between" }, jt = { class: "handle flex-1 flex gap-2 w-full hover:text-primary cursor-grab" }, zt = ["title"], At = { class: "flex flex-row gap-2 items-center" }, Ht = { class: "flex border-b border-gray-200" }, Rt = { class: "flex items-center justify-between gap-1 w-full" }, Vt = {
+  class: "flex flex-col gap-2 overflow-x-hidden overflow-y-auto",
+  style: { "max-height": "360px" }
+}, Ut = { class: "mt-4 w-full flex flex-row justify-end pt-1" }, hs = /* @__PURE__ */ b({
+  __name: "WidgetsCatalogFlyout",
+  props: {
+    targetContainerKey: {},
+    widgetsCatalog: {},
+    currentDashboardConfig: {},
+    undoStatus: {},
+    addWidget: { type: Function },
+    addContainer: { type: Function },
+    onSettingItemsUpdated: { type: Function },
+    onResetToDefaultDashboardClick: { type: Function },
+    onUndoOrRedo: { type: Function },
+    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: Ie(m, s.widgetsCatalog)
+    }))), u = p(() => c.value.filter(
+      (m) => m.metaData.categories.includes("Widget") && D(m.metaData)
+    )), h = p(() => c.value.filter(
+      (m) => m.metaData.categories.includes("Chart") && D(m.metaData)
+    )), x = 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);
+    }, B = (m) => E(
+      "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);
+    }, L = (m) => {
+      const l = (s.currentDashboardConfig.cssSettings || []).map((v) => v.key === m.key ? m : v);
+      s.onSettingItemsUpdated(l);
+    }, A = (m) => {
+      r.value = m;
+    };
+    return be(
+      () => s.targetContainerKey,
+      (m) => {
+        if (m) {
+          n.value = 0;
+          const l = de(m);
+          i.value = `Editing ${l}`;
+        } else
+          i.value = "Editing Dashboard";
+      },
+      { immediate: !0 }
+    ), (m, l) => (d(), K(f(ot), {
+      testId: "dashboard-catalog-flyout",
+      className: "bg-body content-body bg-opacity-70 border-2 border-primary",
+      style: {
+        width: "360px",
+        minWidth: "360px",
+        maxWidth: "360px",
+        minHeight: "360px",
+        backdropFilter: "blur(8px)"
+      },
+      onDraggingChange: A
+    }, {
+      default: W(() => [
+        o("div", Nt, [
+          o("div", Tt, [
+            o("div", jt, [
+              r.value ? (d(), K(f(Ge), {
+                key: 0,
+                class: "size-5"
+              })) : (d(), K(f(Oe), {
+                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}`
+              }, j(i.value), 9, zt)
+            ]),
+            o("div", At, [
+              I(f(T), {
+                "data-testid": "undo-dashboard-config-change",
+                isIconButton: !0,
+                tooltip: {
+                  placement: "bottom",
+                  title: "Undo"
+                },
+                disabled: t.undoStatus.isUndoDisabled,
+                onClick: l[0] || (l[0] = (v) => t.onUndoOrRedo("Undo"))
+              }, {
+                default: W(() => [
+                  I(f(Fe), { class: "size-5" })
+                ]),
+                _: 1
+              }, 8, ["disabled"]),
+              I(f(T), {
+                "data-testid": "redo-dashboard-config-change",
+                isIconButton: !0,
+                tooltip: {
+                  placement: "bottom",
+                  title: "Redo"
+                },
+                disabled: t.undoStatus.isRedoDisabled,
+                onClick: l[1] || (l[1] = (v) => t.onUndoOrRedo("Redo"))
+              }, {
+                default: W(() => [
+                  I(f(Pe), { class: "size-5" })
+                ]),
+                _: 1
+              }, 8, ["disabled"]),
+              I(f(T), {
+                "data-testid": "reset-dashboard-to-default",
+                isIconButton: !0,
+                tooltip: {
+                  placement: "bottom",
+                  title: "Reset this dashboard to the default configuration"
+                },
+                onClick: t.onResetToDefaultDashboardClick
+              }, {
+                default: W(() => [
+                  I(f(Ue), { class: "size-5" })
+                ]),
+                _: 1
+              }, 8, ["onClick"])
+            ])
+          ]),
+          o("div", Ht, [
+            o("button", {
+              onClick: l[2] || (l[2] = (v) => n.value = 0),
+              class: g(B(0))
+            }, "Widgets", 2),
+            o("button", {
+              onClick: l[3] || (l[3] = (v) => n.value = 1),
+              class: g(B(1))
+            }, "Charts", 2),
+            k.value ? O("", !0) : (d(), C("button", {
+              key: 0,
+              onClick: l[4] || (l[4] = (v) => n.value = 2),
+              class: g(B(2))
+            }, " Containers ", 2)),
+            k.value ? O("", !0) : (d(), C("button", {
+              key: 1,
+              onClick: l[5] || (l[5] = (v) => n.value = 3),
+              class: g(B(3))
+            }, [
+              I(f(Ve))
+            ], 2))
+          ]),
+          o("div", Rt, [
+            I(f(he), {
+              label: "Filter...",
+              size: "small",
+              class: "w-full",
+              modelValue: a.value,
+              "onUpdate:modelValue": [
+                l[6] || (l[6] = (v) => a.value = v),
+                $
+              ]
+            }, null, 8, ["modelValue"])
+          ]),
+          o("div", Vt, [
+            n.value === 0 ? (d(!0), C(U, { key: 0 }, 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 === 1 ? (d(!0), C(U, { key: 1 }, F(h.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(x.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(Lt, {
+              key: v.key,
+              item: v,
+              onSettingChanged: L
+            }, null, 8, ["item"]))), 128)) : O("", !0)
+          ]),
+          o("div", Ut, [
+            I(f(T), {
+              class: "bg-opacity-100",
+              tooltip: {
+                placement: "bottom",
+                title: "Click to exit edit mode"
+              },
+              onClick: t.onDoneClick
+            }, {
+              default: W(() => [...l[7] || (l[7] = [
+                re(" Done ", -1)
+              ])]),
+              _: 1
+            }, 8, ["onClick"])
+          ])
+        ])
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  qt as AddIcon,
+  T as Button,
+  Ze as CircleQuestionMarkIcon,
+  qe as CrosshairIcon,
+  ds as DashboardGrid,
+  cs as DashboardWidgetBase,
+  Zt as DeleteIcon,
+  ot as DraggablePanel,
+  ls as DynamicWidgetLoader,
+  Xt as EditIcon,
+  Qt as GridIcon,
+  Ge as HandGrabIcon,
+  Oe as HandIcon,
+  ns as ListItem,
+  ss as MonitorIcon,
+  es as MonitorSmartphoneIcon,
+  ce as MoveLeftIcon,
+  ue as MoveRightIcon,
+  Pe as RedoIcon,
+  Ve as SettingsIcon,
+  Ye as Stack,
+  ts as TabletSmartphoneIcon,
+  os as TargetIcon,
+  he as TextField,
+  Ue as TimerResetIcon,
+  Fe as UndoIcon,
+  me as WidgetContainerColumn,
+  gs as WidgetContainerLarge,
+  us as WidgetContainerRow,
+  hs as WidgetsCatalogFlyout,
+  is as WrapperColumnContent,
+  as as WrapperColumnContentListItem,
+  ge as XCircleIcon,
+  Yt as ZoomInIcon,
+  Jt as ZoomOutIcon,
+  rs as showToast,
+  Ot as useDashboardStore,
+  Gt as useDashboardUndoService,
+  Q as useWidgetEmits
+};