@vc-shell/framework 2.0.0-alpha.25 → 2.0.0-alpha.26

package/dist/chunks/{VcTableAdapter.vue_vue_type_style_index_0_lang-TnE_L5Rp.js → VcTableAdapter.vue_vue_type_style_index_0_lang-Xss_fCsh.js}

@@ -1,5 +1,5 @@
-import { defineComponent as U, computed as S, openBlock as o, createElementBlock as p, withKeys as ge, withModifiers as le, normalizeClass as q, toDisplayString as D, createCommentVNode as R, createElementVNode as y, renderSlot as V, normalizeStyle as he, provide as Me, toRef as Ie, useId as wt, ref as O, watch as ne, createBlock as B, unref as n, mergeProps as Se, resolveDynamicComponent as We, withCtx as A, createVNode as x, inject as de, onBeforeUnmount as Ue, Teleport as ot, Transition as _e, createSlots as we, createTextVNode as ie, resolveComponent as Ne, Fragment as ee, renderList as me, useSlots as ct, resolveDirective as Rl, withDirectives as He, onMounted as lt, onUnmounted as Lt, vModelText as Vn, nextTick as Ee, vModelDynamic as li, watchEffect as Kt, normalizeProps as Qe, guardReactiveProps as Je, vShow as Bt, vModelCheckbox as ai, toValue as Te, onScopeDispose as mt, reactive as xt, getCurrentInstance as pt, getCurrentScope as kt, hasInjectionContext as Dn, shallowReactive as kl, markRaw as Yt, isRef as dt, shallowRef as ni, toHandlers as Sl, useAttrs as oi, TransitionGroup as _a, toRaw as Nn } from "vue";
-import { l as Ye, B as ii, d as J, f as St, e as Qt, E as nt, aV as Pn, Z as ma, I as Ct, $ as si, bq as ri, r as rt, P as pa, br as Jt, al as ga, t as Zt, Y as ba, a0 as Cl, X as ha, k as el, C as Il, F as tl, ak as Ea, av as ll, a as Oe, m as Tl, n as ui, a9 as ya, bj as Aa, aA as cn, c as Ra, q as Ia, aB as di, ap as Fn, bs as ci, z as Ta, bt as vi, ab as fi, ai as mi, ah as pi, aa as zn, U as gi, aI as bi, g as hi, u as Un, b as Hn, W as Gn, v as xa, w as yi, ae as wi } from "./VcAiAgentPanel.vue_vue_type_style_index_0_lang-DHLKAqm0.js";
+import { defineComponent as U, computed as S, openBlock as o, createElementBlock as p, withKeys as ge, withModifiers as le, normalizeClass as q, toDisplayString as D, createCommentVNode as R, createElementVNode as y, renderSlot as V, normalizeStyle as he, provide as Me, toRef as Ie, useId as wt, ref as O, watch as ne, createBlock as B, unref as n, mergeProps as Se, resolveDynamicComponent as We, withCtx as A, createVNode as x, inject as de, onBeforeUnmount as Ue, Teleport as ot, Transition as _e, createSlots as we, createTextVNode as ie, resolveComponent as Ne, Fragment as ee, renderList as me, useSlots as ct, resolveDirective as Rl, withDirectives as He, onMounted as lt, onUnmounted as Lt, vModelText as Vn, nextTick as Ee, vModelDynamic as li, watchEffect as Kt, normalizeProps as Qe, guardReactiveProps as Je, vShow as Bt, vModelCheckbox as ai, toValue as Te, onScopeDispose as mt, reactive as xt, getCurrentInstance as pt, getCurrentScope as kt, hasInjectionContext as Dn, shallowReactive as kl, markRaw as Yt, shallowRef as ni, isRef as dt, toHandlers as Sl, useAttrs as oi, TransitionGroup as _a, toRaw as Nn } from "vue";
+import { l as Ye, B as ii, d as J, f as St, e as Qt, F as nt, aX as Pn, a0 as ma, I as Ct, a1 as si, bs as ri, r as rt, R as pa, bt as Jt, an as ga, t as Zt, $ as ba, a2 as Cl, Z as ha, k as el, C as Il, G as tl, am as Ea, ax as ll, a as Oe, m as Tl, n as ui, ab as ya, bl as Aa, aC as cn, c as Ra, q as Ia, aD as di, ar as Fn, bu as ci, z as Ta, bv as vi, ad as fi, ak as mi, aj as pi, ac as zn, X as gi, aK as bi, g as hi, u as Un, b as Hn, W as Gn, v as xa, w as yi, ag as wi } from "./VcAiAgentPanel.vue_vue_type_style_index_0_lang-DkhNTrts.js";
 import { d as Ma, e as ki, a as Oa, f as Si, g as Ci, u as $i } from "./vendor-vueuse-core-CPOkeLul.js";
 import { u as _i, E as vn } from "./vendor-tiptap-vue-3-CdIBiRMV.js";
 import { S as Ei } from "./vendor-tiptap-starter-kit-BEsLVJ4Q.js";
@@ -89,7 +89,7 @@ import { k as dr } from "./vendor-tiptap-core-BWgKs47g.js";
 import { q as cr } from "./vendor-vuepic-vue-datepicker-CaZ_qpJp.js";
 import { C as vr, u as fr } from "./vendor-vue-currency-input-CckB4kjx.js";
 import { a as mr, u as pr } from "./vendor-floating-ui-vue-sCrhit51.js";
-import "./vc-toast.vue_vue_type_style_index_0_lang-D-kMIagL.js";
+import "./vc-toast.vue_vue_type_style_index_0_lang-B2yfKgJ0.js";
 import { t as gr } from "./vendor-truncate-html-DDVwXwPl.js";
 import { S as yt, h as br, T as hr } from "./vendor-date-fns-BKO3x1R1.js";
 const yr = ["role", "tabindex", "aria-disabled", "aria-label", "onKeydown"], wr = {
@@ -7500,2426 +7500,2427 @@ function _m(e = {}) {
     registeredToolbarItems: l.registeredToolbarItems
   };
 }
-function fo(e) {
-  const a = Object.values(e.params)?.[0], t = typeof a == "string" ? a : "";
-  return t && e.path.startsWith(`/${t}/`) ? e.path.slice(t.length + 1) : t && e.path === `/${t}` ? "/" : e.path;
-}
-function sC(e) {
-  const a = Dt();
-  return { isActive: S(() => {
-    const l = Te(e);
-    if (!l) return !1;
-    const r = fo(a);
-    return r === l || r.startsWith(l + "/");
-  }) };
-}
-const Ca = /* @__PURE__ */ U({
-  __name: "VcAppMenu",
-  props: {
-    expanded: { type: Boolean, default: !0 },
-    searchQuery: {}
-  },
-  emits: ["item:click"],
-  setup(e, { emit: a }) {
-    const t = e, l = a, r = Dt(), { t: s } = Ve(), { menuItems: i, menuBadges: u } = io(), { hasAccess: c } = Zt(), d = ($) => c($.permissions), v = ($) => ($.children ?? []).filter((E) => d(E)), g = S(() => i.value.filter(($) => d($) ? $.children?.length ? v($).length > 0 : !0 : !1)), f = S(() => {
-      const $ = t.searchQuery?.toLowerCase().trim();
-      return $ ? g.value.map((E) => {
-        const _ = v(E);
-        if (!_.length)
-          return s(E.title).toLowerCase().includes($) ? E : null;
-        if (s(E.title).toLowerCase().includes($)) return E;
-        const M = _.filter((C) => s(C.title).toLowerCase().includes($));
-        return M.length ? { ...E, children: M } : null;
-      }).filter(Boolean) : g.value;
-    }), b = ($) => $.groupId ?? String($.id ?? $.routeId ?? $.title), h = ($) => {
-      l("item:click", $);
-    }, m = ($) => {
-      if (!$) return !1;
-      const E = fo(r);
-      return E === $ || E.startsWith($ + "/");
+const Wa = Symbol("PopupPlugin");
+let fo;
+const sC = {
+  install(e) {
+    const t = {
+      popups: kl([])
     };
-    function w($) {
-      let E;
-      typeof $ == "object" && !dt($) && "content" in $ ? E = $ : E = { content: $ };
-      let _;
-      typeof E.content == "function" ? _ = E.content() : dt(E.content) ? _ = n(E.content) : _ = E.content;
-      let M = _;
-      if (typeof _ == "number" && _ > 99)
-        M = "99+";
-      else if (typeof _ == "string") {
-        const T = parseInt(_, 10);
-        !isNaN(T) && T > 99 && (M = "99+");
-      }
-      const C = E.isDot ?? !1;
-      if (C || M != null && M !== "" && M !== 0)
-        return {
-          content: M,
-          variant: E.variant ?? "primary",
-          isDot: C
-        };
-    }
-    const k = S(() => {
-      const $ = /* @__PURE__ */ new Map(), E = (_) => {
-        const M = _.routeId ?? _.groupId;
-        if (!M) return;
-        let C = _.badge;
-        if (!C && _.routeId && (C = u.value.get(_.routeId)), !C && _.groupId && (C = u.value.get(_.groupId)), !C) return;
-        const L = w(C);
-        L && $.set(M, L);
-      };
-      for (const _ of i.value)
-        if (E(_), _.children)
-          for (const M of _.children)
-            E(M);
-      return $;
-    });
-    return ($, E) => f.value.length ? (o(), B(n(Ff), {
-      key: 0,
-      expanded: e.expanded,
-      class: q(["vc-app-menu", { "vc-app-menu--collapsed": !e.expanded }])
-    }, {
-      default: A(() => [
-        (o(!0), p(ee, null, me(f.value, (_) => (o(), p(ee, {
-          key: _.id ?? _.routeId ?? _.url ?? _.title
-        }, [
-          v(_).length ? (o(), B(n(zf), {
-            key: 0,
-            "data-test-id": _.routeId,
-            "group-id": b(_),
-            icon: _.groupIcon || _.icon,
-            title: $.$t(_.title),
-            badge: k.value.get(_.routeId ?? _.groupId ?? "")
-          }, {
-            default: A(() => [
-              (o(!0), p(ee, null, me(v(_), (M) => (o(), B(n(yn), {
-                key: M.routeId || M.url || M.id || M.title,
-                "data-test-id": M.routeId,
-                icon: M.icon,
-                title: $.$t(M.title),
-                badge: k.value.get(M.routeId ?? M.groupId ?? ""),
-                active: m(M.url),
-                nested: "",
-                onClick: (C) => h(M)
-              }, null, 8, ["data-test-id", "icon", "title", "badge", "active", "onClick"]))), 128))
-            ]),
-            _: 2
-          }, 1032, ["data-test-id", "group-id", "icon", "title", "badge"])) : (o(), B(n(yn), {
-            key: 1,
-            "data-test-id": _.routeId,
-            icon: _.groupIcon || _.icon,
-            title: $.$t(_.title),
-            badge: k.value.get(_.routeId ?? _.groupId ?? ""),
-            active: m(_.url),
-            onClick: (M) => h(_)
-          }, null, 8, ["data-test-id", "icon", "title", "badge", "active", "onClick"]))
-        ], 64))), 128))
-      ]),
-      _: 1
-    }, 8, ["expanded", "class"])) : R("", !0);
-  }
-}), Em = { class: "vc-user-info" }, Am = {
-  key: 1,
-  class: "vc-user-info__avatar-fallback"
-}, Rm = { class: "vc-user-info__info" }, Im = { class: "vc-user-info__name" }, Tm = { class: "vc-user-info__role" }, xm = /* @__PURE__ */ U({
-  __name: "user-info",
-  props: {
-    avatarUrl: {},
-    name: {},
-    role: {},
-    isExpanded: { type: Boolean }
-  },
-  setup(e) {
-    const a = e, { user: t } = Il(), l = S(() => {
-      if (a.avatarUrl)
-        return `background-image: url(${CSS.escape(a.avatarUrl)})`;
-    });
-    return (r, s) => (o(), p("div", Em, [
-      e.avatarUrl ? (o(), p("div", {
-        key: 0,
-        class: "vc-user-info__avatar",
-        style: he(l.value)
-      }, null, 4)) : (o(), p("div", Am, [
-        x(n(J), {
-          icon: "lucide-circle-user",
-          size: "l"
-        })
-      ])),
-      y("div", Rm, [
-        y("div", Im, D(e.name || n(t) && "fullName" in n(t) && n(t).fullName || n(t)?.userName), 1),
-        y("div", Tm, D(e.role ? r.$te(`SHELL.USER.ROLE.${e.role}`) ? r.$t(`SHELL.USER.ROLE.${e.role}`) : e.role : n(t)?.isAdministrator ? r.$t("SHELL.USER.ROLE.ADMINISTRATOR") : ""), 1)
-      ])
-    ]));
-  }
-}), Mm = { class: "vc-settings-menu" }, Om = {
-  key: 0,
-  class: "vc-settings-menu__separator"
-}, Lm = { class: "vc-settings-menu__group" }, mo = /* @__PURE__ */ U({
-  __name: "settings-menu",
-  setup(e) {
-    const { items: a } = $m(), t = S(() => {
-      const l = /* @__PURE__ */ new Map();
-      for (const r of a.value) {
-        const s = r.group ?? "general";
-        l.has(s) || l.set(s, []), l.get(s).push(r);
-      }
-      return Array.from(l.entries()).map(([r, s]) => ({
-        name: r,
-        items: s
-      }));
-    });
-    return (l, r) => (o(), p("div", Mm, [
-      (o(!0), p(ee, null, me(t.value, (s, i) => (o(), p(ee, {
-        key: s.name
-      }, [
-        i > 0 ? (o(), p("div", Om)) : R("", !0),
-        y("div", Lm, [
-          (o(!0), p(ee, null, me(s.items, (u) => (o(), B(We(u.component), Se({
-            key: u.id
-          }, { ref_for: !0 }, u.props || {}), null, 16))), 128))
-        ])
-      ], 64))), 128))
-    ]));
+    e.config.globalProperties.$popupPlugin = t, e.provide(Wa, t), fo = t;
   }
-}), Bm = ["aria-hidden"], Vm = ["aria-modal", "aria-label", "aria-labelledby"], Dm = {
+}, Em = { class: "vc-popup__center" }, Am = ["aria-label"], Rm = { class: "vc-popup__content" }, Im = {
   key: 0,
-  class: "vc-sidebar__handle"
-}, Nm = { class: "vc-sidebar__header" }, Pm = { class: "vc-sidebar__title-wrap" }, Fm = {
-  key: 1,
-  class: "vc-sidebar__subtitle"
-}, zm = { class: "vc-sidebar__header-actions" }, Um = ["aria-label"], Hm = { class: "vc-sidebar__content" }, Gm = {
-  key: 2,
-  class: "vc-sidebar__footer"
-}, Wm = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]', Nt = /* @__PURE__ */ U({
-  __name: "vc-sidebar",
+  class: "vc-popup__footer"
+}, qa = /* @__PURE__ */ U({
+  __name: "vc-popup",
   props: {
-    modelValue: { type: Boolean },
-    position: { default: "right" },
-    size: { default: "sm" },
+    modelValue: { type: Boolean, default: void 0 },
+    title: {},
+    closable: { type: Boolean, default: !0 },
     variant: { default: "default" },
-    width: { default: void 0 },
-    height: { default: void 0 },
-    showOverlay: { type: Boolean, default: !0 },
-    closeOnOverlay: { type: Boolean, default: !0 },
-    closeOnEscape: { type: Boolean, default: !0 },
-    trapFocus: { type: Boolean, default: !0 },
-    lockScroll: { type: Boolean, default: !0 },
-    returnFocus: { type: Boolean, default: !0 },
-    autoFocus: { type: Boolean, default: !0 },
-    teleport: { type: Boolean, default: !0 },
-    teleportTo: {},
-    title: { default: "" },
-    subtitle: { default: "" },
-    ariaLabel: { default: "" },
-    closeAriaLabel: { default: "Close sidebar" },
-    closeButton: { type: Boolean, default: !0 },
-    inset: { type: Boolean, default: !0 },
-    zIndex: { default: 1e4 },
-    draggable: { type: Boolean, default: !1 },
-    dragHandle: { type: Boolean, default: !1 },
-    closeThreshold: { default: 0.3 }
+    isMobileFullscreen: { type: Boolean },
+    isFullscreen: { type: Boolean },
+    modalWidth: { default: "tw-max-w-md" },
+    closeOnOverlay: { type: Boolean, default: void 0 },
+    closeOnEscape: { type: Boolean, default: void 0 }
   },
-  emits: ["update:modelValue", "close"],
-  setup(e, { expose: a, emit: t }) {
-    const l = Symbol.for("vc-sidebar-scroll-lock");
-    function r() {
-      if (typeof window > "u")
-        return null;
-      const se = window;
-      return se[l] || (se[l] = { counter: 0, cachedOverflow: "", cachedPaddingRight: "" }), se[l];
+  emits: ["close", "update:modelValue"],
+  setup(e, { emit: a }) {
+    const t = e, l = a, s = `vc-popup-title-${pt()?.uid ?? 0}`, i = de(nt, O(!1)), u = O(null), c = {
+      warning: { icon: "lucide-triangle-alert", className: "vc-popup__icon--warning" },
+      error: { icon: "lucide-circle-alert", className: "vc-popup__icon--error" },
+      success: { icon: "lucide-circle-check", className: "vc-popup__icon--success" },
+      info: { icon: "lucide-info", className: "vc-popup__icon--info" }
+    }, d = S(() => t.modelValue ?? !0), v = S(() => t.closeOnOverlay ?? t.closable), g = S(() => t.closeOnEscape ?? t.closable), f = S(() => t.variant === "default" ? "" : c[t.variant].icon), b = S(() => t.variant === "default" ? "" : c[t.variant].className), h = S(() => i.value && t.isMobileFullscreen);
+    function m(E) {
+      l("update:modelValue", !1), l("close", E);
     }
-    function s() {
-      const se = r();
-      if (!(!se || typeof document > "u")) {
-        if (se.counter === 0) {
-          const { body: Ce, documentElement: De } = document;
-          se.cachedOverflow = Ce.style.overflow, se.cachedPaddingRight = Ce.style.paddingRight;
-          const qe = window.innerWidth - De.clientWidth;
-          Ce.style.overflow = "hidden", qe > 0 && (Ce.style.paddingRight = `${qe}px`);
-        }
-        se.counter += 1;
-      }
+    function w() {
+      t.closable && m("action");
     }
-    function i() {
-      const se = r();
-      if (!(!se || typeof document > "u" || se.counter === 0) && (se.counter -= 1, se.counter === 0)) {
-        const { body: Ce } = document;
-        Ce.style.overflow = se.cachedOverflow, Ce.style.paddingRight = se.cachedPaddingRight;
-      }
+    function k() {
+      u.value = "escape";
     }
-    const u = e, c = t, d = ct(), v = O(null), g = O(!1), f = O(null), { teleportTarget: b } = St({
-      to: S(() => u.teleportTo)
-    }), m = `vc-sidebar-title-${Math.round(Math.random() * 1e5)}`, w = {
-      sm: "300px",
-      md: "380px",
-      lg: "520px",
-      full: "100vw"
-    }, k = {
-      sm: "40dvh",
-      md: "56dvh",
-      lg: "72dvh",
-      full: "100dvh"
-    }, $ = S(() => typeof u.width == "number" ? `${u.width}px` : u.width), E = S(() => typeof u.height == "number" ? `${u.height}px` : u.height), _ = S(() => !!u.title || u.closeButton || !!d.header), M = S(() => !!d.footer), C = S(() => u.position === "bottom"), L = S(() => u.size === "full"), T = S(() => u.position === "left" ? "vc-sidebar-panel-left" : u.position === "bottom" ? "vc-sidebar-panel-bottom" : "vc-sidebar-panel-right"), I = S(() => C.value ? {
-      height: E.value ?? k[u.size]
-    } : {
-      width: $.value ?? w[u.size]
-    }), G = S(() => ({
-      zIndex: u.zIndex
-    })), N = S(() => [
-      `vc-sidebar__panel--${u.position}`,
-      `vc-sidebar__panel--${u.variant}`,
-      `vc-sidebar__panel--size-${u.size}`,
-      {
-        "vc-sidebar__panel--with-header": _.value,
-        "vc-sidebar__panel--with-footer": M.value,
-        "vc-sidebar__panel--inset": u.inset && !L.value,
-        "vc-sidebar__panel--draggable": u.draggable && C.value
-      }
-    ]), P = S(() => u.ariaLabel || void 0), W = S(() => u.ariaLabel || !u.title ? void 0 : m);
-    function F(se) {
-      c("update:modelValue", !1), c("close", se);
-    }
-    function K() {
-      F("action");
-    }
-    function z() {
-      c("update:modelValue", !0);
-    }
-    function te() {
-      u.closeOnOverlay && F("overlay");
-    }
-    const ve = O(0), X = O(!1);
-    function Y(se) {
-      !u.draggable || !C.value || (ve.value = se.touches[0].clientY, X.value = !0);
-    }
-    function ue(se) {
-      if (!X.value || !v.value) return;
-      const Ce = se.touches[0].clientY - ve.value;
-      Ce > 0 && (v.value.style.transform = `translateY(${Ce}px)`, v.value.style.transition = "none");
-    }
-    function Q(se) {
-      if (!X.value || !v.value) return;
-      X.value = !1;
-      const Ce = se.changedTouches[0].clientY - ve.value, De = v.value.offsetHeight, qe = De * u.closeThreshold;
-      Ce > qe ? (v.value.style.transition = "transform 0.2s ease", v.value.style.transform = `translateY(${De}px)`, setTimeout(() => {
-        F("action");
-      }, 200)) : (v.value.style.transition = "transform 0.2s ease", v.value.style.transform = "", setTimeout(() => {
-        v.value && (v.value.style.transition = "");
-      }, 200));
-    }
-    function j() {
-      return v.value ? Array.from(v.value.querySelectorAll(Wm)).filter((se) => {
-        if (se.hasAttribute("disabled") || se.getAttribute("aria-hidden") === "true")
-          return !1;
-        const Ce = window.getComputedStyle(se);
-        return Ce.display !== "none" && Ce.visibility !== "hidden";
-      }) : [];
-    }
-    let ke = !1;
-    function be() {
-      if (ke) return;
-      ke = !0;
-      const se = j()[0];
-      se ? se.focus() : v.value?.focus(), ke = !1;
-    }
-    function Z(se) {
-      ke || !u.modelValue || !u.trapFocus || !v.value || se.target instanceof Node && !v.value.contains(se.target) && be();
-    }
-    function fe(se) {
-      if (!u.modelValue)
-        return;
-      if (se.key === "Escape") {
-        u.closeOnEscape && F("escape");
-        return;
-      }
-      if (!u.trapFocus || se.key !== "Tab" || !v.value)
-        return;
-      const Ce = j();
-      if (!Ce.length) {
-        se.preventDefault(), v.value.focus();
-        return;
-      }
-      const De = Ce[0], qe = Ce[Ce.length - 1], Ze = document.activeElement;
-      if (se.shiftKey) {
-        (Ze === De || !Ze || !v.value.contains(Ze)) && (se.preventDefault(), qe.focus());
-        return;
-      }
-      Ze === qe && (se.preventDefault(), De.focus());
-    }
-    function Re() {
-      if (!u.returnFocus || !f.value) {
-        f.value = null;
-        return;
-      }
-      const se = f.value;
-      f.value = null, Ee(() => {
-        try {
-          se.focus({ preventScroll: !0 });
-        } catch {
-          se.focus();
-        }
-      });
-    }
-    function Fe() {
-      g.value || typeof document > "u" || (g.value = !0, f.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, document.addEventListener("keydown", fe), document.addEventListener("focusin", Z), u.lockScroll && s(), u.autoFocus && Ee(() => {
-        be();
-      }));
-    }
-    function ye() {
-      !g.value || typeof document > "u" || (g.value = !1, document.removeEventListener("keydown", fe), document.removeEventListener("focusin", Z), u.lockScroll && i(), Re());
+    function $() {
+      const E = u.value ?? "overlay";
+      u.value = null, !(E === "overlay" && !v.value) && (E === "escape" && !g.value || m(E));
     }
-    return ne(
-      () => u.modelValue,
-      (se) => {
-        if (se) {
-          Ee(() => {
-            v.value && (v.value.style.transform = "", v.value.style.transition = "");
-          }), Fe();
-          return;
-        }
-        ye();
-      },
-      { immediate: !0 }
-    ), Ue(() => {
-      ye();
-    }), a({
-      close: K,
-      open: z
-    }), (se, Ce) => (o(), B(ot, {
-      to: n(b),
-      defer: "",
-      disabled: !e.teleport
-    }, [
-      y("div", {
-        class: "vc-sidebar",
-        style: he(G.value),
-        "aria-hidden": !e.modelValue
-      }, [
-        x(_e, { name: "vc-sidebar-overlay" }, {
-          default: A(() => [
-            e.modelValue && e.showOverlay ? (o(), p("div", {
-              key: 0,
-              class: "vc-sidebar__overlay",
-              onClick: te
-            })) : R("", !0)
-          ]),
-          _: 1
-        }),
-        x(_e, { name: T.value }, {
-          default: A(() => [
-            e.modelValue ? (o(), p("aside", {
-              key: 0,
-              ref_key: "panelEl",
-              ref: v,
-              class: q(["vc-sidebar__panel", N.value]),
-              style: he(I.value),
-              role: "dialog",
-              "aria-modal": e.showOverlay,
-              "aria-label": P.value,
-              "aria-labelledby": W.value,
-              tabindex: "-1",
-              onTouchstart: Y,
-              onTouchmove: ue,
-              onTouchend: Q
-            }, [
-              e.dragHandle && C.value ? (o(), p("div", Dm, [...Ce[1] || (Ce[1] = [
-                y("div", { class: "vc-sidebar__handle-bar" }, null, -1)
-              ])])) : R("", !0),
-              _.value ? V(se.$slots, "header", {
-                key: 1,
-                close: K
-              }, () => [
-                y("div", Nm, [
-                  y("div", Pm, [
-                    e.title ? (o(), p("h3", {
-                      key: 0,
-                      id: m,
-                      class: "vc-sidebar__title"
-                    }, D(e.title), 1)) : R("", !0),
-                    e.subtitle ? (o(), p("p", Fm, D(e.subtitle), 1)) : R("", !0)
-                  ]),
-                  y("div", zm, [
-                    V(se.$slots, "actions", { close: K }),
-                    e.closeButton ? (o(), p("button", {
-                      key: 0,
-                      type: "button",
-                      class: "vc-sidebar__close",
-                      "aria-label": e.closeAriaLabel,
-                      onClick: Ce[0] || (Ce[0] = (De) => F("action"))
-                    }, [
-                      x(n(J), {
-                        icon: "lucide-x",
-                        size: "m"
-                      })
-                    ], 8, Um)) : R("", !0)
-                  ])
+    return (E, _) => {
+      const M = Ne("VcIcon"), C = Ne("VcButton");
+      return o(), B(n(ir), {
+        appear: "",
+        show: d.value,
+        as: "template"
+      }, {
+        default: A(() => [
+          x(n(sr), {
+            as: "div",
+            class: "vc-popup",
+            "aria-labelledby": s,
+            onClose: $,
+            onKeydown: ge(k, ["esc"])
+          }, {
+            default: A(() => [
+              x(n(fn), {
+                as: "template",
+                enter: "vc-popup__transition-enter",
+                "enter-from": "vc-popup__transition-enter-from",
+                "enter-to": "vc-popup__transition-enter-to",
+                leave: "vc-popup__transition-leave",
+                "leave-from": "vc-popup__transition-leave-from",
+                "leave-to": "vc-popup__transition-leave-to"
+              }, {
+                default: A(() => [..._[0] || (_[0] = [
+                  y("div", { class: "vc-popup__overlay" }, null, -1)
+                ])]),
+                _: 1
+              }),
+              y("div", {
+                class: q(["vc-popup__container", {
+                  "vc-popup__container--desktop": !h.value,
+                  "vc-popup__container--mobile": h.value,
+                  "vc-popup__container--fullscreen": e.isFullscreen
+                }])
+              }, [
+                y("div", Em, [
+                  x(n(fn), {
+                    as: "template",
+                    enter: "vc-popup__dialog-enter",
+                    "enter-from": "vc-popup__dialog-enter-from",
+                    "enter-to": "vc-popup__dialog-enter-to",
+                    leave: "vc-popup__dialog-leave",
+                    "leave-from": "vc-popup__dialog-leave-from",
+                    "leave-to": "vc-popup__dialog-leave-to"
+                  }, {
+                    default: A(() => [
+                      x(n(rr), {
+                        class: q(["vc-popup__panel", [
+                          {
+                            "vc-popup__panel--desktop": !h.value,
+                            "vc-popup__panel--mobile": h.value,
+                            "vc-popup__panel--fullscreen": e.isFullscreen
+                          },
+                          e.modalWidth
+                        ]])
+                      }, {
+                        default: A(() => [
+                          x(n(ur), {
+                            id: s,
+                            as: "h3",
+                            class: "vc-popup__title"
+                          }, {
+                            default: A(() => [
+                              V(E.$slots, "header", {}, () => [
+                                ie(D(e.title), 1)
+                              ]),
+                              e.closable ? (o(), p("button", {
+                                key: 0,
+                                type: "button",
+                                class: "vc-popup__close-btn",
+                                "aria-label": E.$t("COMPONENTS.ORGANISMS.VC_POPUP.CLOSE"),
+                                onClick: w
+                              }, [..._[1] || (_[1] = [
+                                y("svg", {
+                                  width: "12",
+                                  height: "12",
+                                  viewBox: "0 0 12 12",
+                                  fill: "none",
+                                  xmlns: "http://www.w3.org/2000/svg"
+                                }, [
+                                  y("path", {
+                                    d: "M7.27173 5.99939L11.1499 2.12967C11.3198 1.95981 11.4152 1.72943 11.4152 1.48922C11.4152 1.24901 11.3198 1.01863 11.1499 0.848777C10.9801 0.67892 10.7497 0.583496 10.5096 0.583496C10.2694 0.583496 10.0391 0.67892 9.86922 0.848777L6.00004 4.72752L2.13086 0.848777C1.96103 0.67892 1.73069 0.583496 1.49051 0.583496C1.25033 0.583496 1.01999 0.67892 0.850156 0.848777C0.680324 1.01863 0.584913 1.24901 0.584913 1.48922C0.584913 1.72943 0.680324 1.95981 0.850156 2.12967L4.72835 5.99939L0.850156 9.86912C0.765622 9.95298 0.698526 10.0527 0.652737 10.1627C0.606948 10.2726 0.583374 10.3905 0.583374 10.5096C0.583374 10.6286 0.606948 10.7465 0.652737 10.8565C0.698526 10.9664 0.765622 11.0662 0.850156 11.15C0.934 11.2346 1.03375 11.3017 1.14366 11.3475C1.25356 11.3933 1.37145 11.4168 1.49051 11.4168C1.60957 11.4168 1.72746 11.3933 1.83736 11.3475C1.94727 11.3017 2.04702 11.2346 2.13086 11.15L6.00004 7.27126L9.86922 11.15C9.95306 11.2346 10.0528 11.3017 10.1627 11.3475C10.2726 11.3933 10.3905 11.4168 10.5096 11.4168C10.6286 11.4168 10.7465 11.3933 10.8564 11.3475C10.9663 11.3017 11.0661 11.2346 11.1499 11.15C11.2345 11.0662 11.3016 10.9664 11.3473 10.8565C11.3931 10.7465 11.4167 10.6286 11.4167 10.5096C11.4167 10.3905 11.3931 10.2726 11.3473 10.1627C11.3016 10.0527 11.2345 9.95298 11.1499 9.86912L7.27173 5.99939Z",
+                                    fill: "currentColor"
+                                  })
+                                ], -1)
+                              ])], 8, Am)) : R("", !0)
+                            ]),
+                            _: 3
+                          }),
+                          y("div", Rm, [
+                            e.variant !== "default" ? (o(), B(M, {
+                              key: 0,
+                              class: q(["vc-popup__icon", b.value]),
+                              icon: f.value
+                            }, null, 8, ["class", "icon"])) : R("", !0),
+                            y("div", {
+                              class: q(["vc-popup__content-inner", {
+                                "vc-popup__content-inner--grow": h.value
+                              }])
+                            }, [
+                              y("div", {
+                                class: q(["vc-popup__content-wrapper", { "vc-popup__content-wrapper--full": e.isFullscreen }])
+                              }, [
+                                V(E.$slots, "content")
+                              ], 2)
+                            ], 2)
+                          ]),
+                          E.$slots.footer ? (o(), p("div", Im, [
+                            V(E.$slots, "footer", { close: w }, () => [
+                              x(C, {
+                                class: "vc-popup__close-button",
+                                onClick: w
+                              }, {
+                                default: A(() => [
+                                  ie(D(E.$t("COMPONENTS.ORGANISMS.VC_POPUP.CLOSE")), 1)
+                                ]),
+                                _: 1
+                              })
+                            ])
+                          ])) : R("", !0)
+                        ]),
+                        _: 3
+                      }, 8, ["class"])
+                    ]),
+                    _: 3
+                  })
                 ])
-              ]) : R("", !0),
-              y("div", Hm, [
-                V(se.$slots, "default")
-              ]),
-              se.$slots.footer ? (o(), p("div", Gm, [
-                V(se.$slots, "footer")
-              ])) : R("", !0)
-            ], 46, Vm)) : R("", !0)
-          ]),
-          _: 3
-        }, 8, ["name"])
-      ], 12, Bm)
-    ], 8, ["to", "disabled"]));
+              ], 2)
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["show"]);
+    };
   }
-}), qm = /* @__PURE__ */ U({
-  __name: "user-sidebar",
+}), Ka = /* @__PURE__ */ U({
+  __name: "vc-popup-base",
   props: {
-    isOpened: { type: Boolean }
+    title: {},
+    variant: { default: "default" },
+    mode: { default: "acknowledge" },
+    actionLabel: { default: "" },
+    confirmLabel: { default: "" },
+    cancelLabel: { default: "" },
+    confirmAsText: { type: Boolean, default: !1 },
+    closable: { type: Boolean, default: !0 },
+    isMobileFullscreen: { type: Boolean, default: !0 },
+    closeOnConfirm: { type: Boolean, default: !1 }
   },
-  emits: ["update:isOpened", "item:click"],
-  setup(e) {
-    const a = de(tl, O(!1));
-    return (t, l) => (o(), B(n(Nt), {
-      "model-value": e.isOpened,
-      position: "left",
-      teleport: !n(a),
-      title: t.$t("SHELL.ACCOUNT.SETTINGS"),
-      "onUpdate:modelValue": l[1] || (l[1] = (r) => t.$emit("update:isOpened", r))
-    }, {
-      default: A(() => [
-        e.isOpened ? (o(), p("div", {
-          key: 0,
-          class: "vc-user-sidebar__menu",
-          onClick: l[0] || (l[0] = le((r) => t.$emit("update:isOpened", !1), ["stop"]))
-        }, [
-          x(n(mo))
-        ])) : R("", !0)
-      ]),
-      _: 1
-    }, 8, ["model-value", "teleport", "title"]));
+  emits: ["close", "confirm"],
+  setup(e, { emit: a }) {
+    const t = e, l = a;
+    function r(s) {
+      l("confirm"), t.closeOnConfirm && s();
+    }
+    return (s, i) => {
+      const u = Ne("VcButton");
+      return o(), B(qa, {
+        variant: e.variant,
+        "is-mobile-fullscreen": e.isMobileFullscreen,
+        title: e.title,
+        closable: e.closable,
+        onClose: i[0] || (i[0] = (c) => s.$emit("close"))
+      }, we({
+        content: A(() => [
+          V(s.$slots, "default")
+        ]),
+        footer: A(({ close: c }) => [
+          V(s.$slots, "footer", {
+            close: c,
+            confirm: () => r(c)
+          }, () => [
+            y("div", {
+              class: q(["vc-popup-base__actions", {
+                "vc-popup-base__actions--confirm": e.mode === "confirm",
+                "vc-popup-base__actions--single": e.mode === "acknowledge"
+              }])
+            }, [
+              e.mode === "confirm" ? (o(), p(ee, { key: 0 }, [
+                x(u, {
+                  text: e.confirmAsText,
+                  class: "vc-popup-base__confirm",
+                  onClick: (d) => r(c)
+                }, {
+                  default: A(() => [
+                    ie(D(e.confirmLabel), 1)
+                  ]),
+                  _: 1
+                }, 8, ["text", "onClick"]),
+                x(u, { onClick: c }, {
+                  default: A(() => [
+                    ie(D(e.cancelLabel), 1)
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ], 64)) : (o(), B(u, {
+                key: 1,
+                class: "vc-popup-base__single",
+                onClick: c
+              }, {
+                default: A(() => [
+                  ie(D(e.actionLabel), 1)
+                ]),
+                _: 1
+              }, 8, ["onClick"]))
+            ], 2)
+          ])
+        ]),
+        _: 2
+      }, [
+        s.$slots.header ? {
+          name: "header",
+          fn: A(() => [
+            V(s.$slots, "header")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["variant", "is-mobile-fullscreen", "title", "closable"]);
+    };
   }
-}), Km = { class: "vc-user-dropdown-button-container" }, Ym = /* @__PURE__ */ U({
-  __name: "user-dropdown-button",
+}), Tm = /* @__PURE__ */ U({
+  __name: "vc-popup-warning",
   props: {
-    avatarUrl: {},
-    name: {},
-    role: {},
-    disabled: { type: Boolean }
+    title: {}
   },
+  emits: ["close", "confirm"],
   setup(e) {
-    const a = O(!1), t = O(null), { isPinned: l, isExpanded: r } = Fa();
-    function s() {
-      a.value = !1;
-    }
-    Me(Ea, s);
-    function i() {
-      a.value = !a.value;
-    }
-    return (u, c) => (o(), p("div", Km, [
-      y("button", {
-        ref_key: "buttonRef",
-        ref: t,
-        type: "button",
-        class: q(["vc-user-dropdown-button", {
-          "vc-user-dropdown-button--active": a.value,
-          "vc-user-dropdown-button--auto-width": e.disabled,
-          "vc-user-dropdown-button--mobile": u.$isMobile.value,
-          "vc-user-dropdown-button--collapsed": !n(l) && u.$isDesktop.value
-        }]),
-        onClick: i
-      }, [
-        y("div", {
-          class: q(["vc-user-dropdown-button__wrap", {
-            "vc-user-dropdown-button__wrap--active": a.value
-          }])
-        }, [
-          x(xm, {
-            "avatar-url": e.avatarUrl,
-            name: e.name,
-            role: e.role,
-            "is-expanded": n(r)
-          }, null, 8, ["avatar-url", "name", "role", "is-expanded"]),
-          c[2] || (c[2] = y("div", { class: "vc-user-dropdown-button__actions" }, [
-            y("div", { class: "vc-user-dropdown-button__trigger" })
-          ], -1))
-        ], 2)
-      ], 2),
-      u.$isDesktop.value ? (o(), B(n($t), {
-        key: 0,
-        show: a.value,
-        "onUpdate:show": c[0] || (c[0] = (d) => a.value = d),
-        "anchor-ref": t.value,
-        placement: "right",
-        width: "260px",
-        "max-width": "300px"
-      }, {
-        default: A(() => [
-          x(n(mo))
+    return (a, t) => (o(), B(Ka, {
+      variant: "warning",
+      mode: "confirm",
+      "confirm-label": a.$t("COMPONENTS.ORGANISMS.VC_POPUP.CONFIRM"),
+      "cancel-label": a.$t("COMPONENTS.ORGANISMS.VC_POPUP.CANCEL"),
+      "confirm-as-text": "",
+      title: e.title,
+      onClose: t[0] || (t[0] = (l) => a.$emit("close")),
+      onConfirm: t[1] || (t[1] = (l) => a.$emit("confirm"))
+    }, we({
+      default: A(() => [
+        V(a.$slots, "default")
+      ]),
+      _: 2
+    }, [
+      a.$slots.header ? {
+        name: "header",
+        fn: A(() => [
+          V(a.$slots, "header")
         ]),
-        _: 1
-      }, 8, ["show", "anchor-ref"])) : (o(), B(qm, {
-        key: 1,
-        "is-opened": a.value,
-        "onUpdate:isOpened": c[1] || (c[1] = (d) => a.value = d)
-      }, null, 8, ["is-opened"]))
-    ]));
+        key: "0"
+      } : void 0
+    ]), 1032, ["confirm-label", "cancel-label", "title"]));
   }
-}), po = Ym, jm = {
-  key: 0,
-  class: "sidebar-content__search"
-}, Xm = { class: "sidebar-content__footer" }, Qm = /* @__PURE__ */ U({
-  __name: "SidebarContent",
+}), xm = /* @__PURE__ */ U({
+  __name: "vc-popup-error",
   props: {
-    expanded: { type: Boolean, default: !0 },
-    avatar: {},
-    userName: {},
-    userRole: {},
-    disableMenu: { type: Boolean, default: !1 },
-    headerVisible: { type: Boolean, default: !0 },
-    showSearch: { type: Boolean, default: !1 },
-    searchPlaceholder: {}
+    title: {}
   },
-  emits: ["item:click"],
-  setup(e, { emit: a }) {
-    const t = e, l = a, r = de(ll, !1), s = O(null), i = O("");
-    lt(() => {
-      Ee(() => s.value?.updateScrollState());
-    }), ne(
-      () => t.expanded,
-      (c) => {
-        c || (i.value = "");
-      }
-    );
-    const u = (c) => {
-      i.value = "", l("item:click", c);
-    };
-    return (c, d) => (o(), p("div", {
-      class: q(["sidebar-content", { "sidebar-content--no-header": !e.headerVisible }])
+  emits: ["close"],
+  setup(e) {
+    return (a, t) => (o(), B(Ka, {
+      variant: "error",
+      mode: "acknowledge",
+      "action-label": a.$t("COMPONENTS.ORGANISMS.VC_POPUP.OK"),
+      title: e.title,
+      onClose: t[0] || (t[0] = (l) => a.$emit("close"))
+    }, we({
+      default: A(() => [
+        V(a.$slots, "default")
+      ]),
+      _: 2
     }, [
-      e.showSearch && e.expanded ? (o(), p("div", jm, [
-        x(n(Be), {
-          modelValue: i.value,
-          "onUpdate:modelValue": d[0] || (d[0] = (v) => i.value = v),
-          placeholder: e.searchPlaceholder || c.$t("SHELL.SIDEBAR.SEARCH_PLACEHOLDER", "Search keyword"),
-          size: "small",
-          clearable: "",
-          debounce: 300
-        }, null, 8, ["modelValue", "placeholder"])
-      ])) : R("", !0),
-      e.disableMenu ? R("", !0) : (o(), B(n(ft), {
-        key: 1,
-        ref_key: "scrollContainer",
-        ref: s,
-        class: "sidebar-content__menu"
-      }, {
-        default: A(() => [
-          V(c.$slots, "menu", {
-            expanded: e.expanded,
-            onItemClick: u,
-            searchQuery: i.value
-          }, () => [
-            x(Ca, {
-              expanded: e.expanded,
-              "search-query": i.value,
-              "onItem:click": u
-            }, null, 8, ["expanded", "search-query"])
-          ])
+      a.$slots.header ? {
+        name: "header",
+        fn: A(() => [
+          V(a.$slots, "header")
         ]),
-        _: 3
-      }, 512)),
-      y("div", Xm, [
-        V(c.$slots, e.userName, {
-          avatar: e.avatar,
-          role: e.userRole
-        }, () => [
-          n(r) ? R("", !0) : (o(), B(n(po), {
-            key: 0,
-            "avatar-url": e.avatar,
-            name: e.userName,
-            role: e.userRole
-          }, null, 8, ["avatar-url", "name", "role"]))
-        ])
-      ])
-    ], 2));
+        key: "0"
+      } : void 0
+    ]), 1032, ["action-label", "title"]));
   }
-}), Jm = { class: "sidebar-collapse-button__wrap" }, Zm = /* @__PURE__ */ U({
-  __name: "SidebarCollapseButton",
+}), Mm = /* @__PURE__ */ U({
+  __name: "vc-popup-info",
   props: {
-    collapsed: { type: Boolean }
+    title: {}
   },
-  emits: ["click"],
+  emits: ["close"],
   setup(e) {
-    return (a, t) => (o(), p("div", {
-      class: "sidebar-collapse-button",
-      onClick: t[0] || (t[0] = (l) => a.$emit("click"))
+    return (a, t) => (o(), B(Ka, {
+      variant: "info",
+      mode: "acknowledge",
+      "action-label": a.$t("COMPONENTS.ORGANISMS.VC_POPUP.OK"),
+      title: e.title,
+      onClose: t[0] || (t[0] = (l) => a.$emit("close"))
+    }, we({
+      default: A(() => [
+        V(a.$slots, "default")
+      ]),
+      _: 2
     }, [
-      y("div", Jm, [
-        x(n(J), {
-          class: "sidebar-collapse-button__icon",
-          icon: e.collapsed ? "lucide-chevron-right" : "lucide-chevron-left"
-        }, null, 8, ["icon"])
-      ])
-    ]));
+      a.$slots.header ? {
+        name: "header",
+        fn: A(() => [
+          V(a.$slots, "header")
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["action-label", "title"]));
   }
 });
-function go(e, a) {
-  const t = S(() => {
-    const c = Te(e);
-    return !a.value || !Array.isArray(c) ? null : c.find((d) => d.id === a.value) || null;
-  }), l = S(() => a.value !== null);
-  return {
-    showItem: (c) => {
-      a.value = c;
-    },
-    hideAllItems: () => {
-      a.value = null;
-    },
-    toggleItem: (c) => {
-      a.value === c ? a.value = null : a.value = c;
-    },
-    currentItem: t,
-    isAnyItemVisible: l,
-    closeItem: () => {
-      a.value = null;
-    }
-  };
-}
-const bo = Symbol("VcAppBarState"), ep = {
-  activeWidgetId: O(null),
-  activeMobileActionId: O(null)
-};
-function tp() {
-  const e = {
-    activeWidgetId: O(null),
-    activeMobileActionId: O(null)
-  };
-  return Me(bo, e), e;
+function kn() {
+  return pt() && de(Wa, void 0) || fo;
 }
-function ho() {
-  return de(bo, ep);
-}
-function Vl() {
-  const { items: e } = Bl(), { activeWidgetId: a } = ho(), {
-    showItem: t,
-    hideAllItems: l,
-    toggleItem: r,
-    currentItem: s,
-    isAnyItemVisible: i
-  } = go(e, a);
+function mo(e) {
+  const { t: a } = Ve({ useScope: "global" }), t = kn();
+  let l;
+  e && (l = b(n(e))), ne(
+    () => e ? n(e) : void 0,
+    (h) => {
+      h && (l = b(h));
+    },
+    { deep: !0 }
+  );
+  function r(h) {
+    if (!h)
+      return;
+    const m = kn(), w = m?.popups?.findIndex(
+      (k) => or(k, h, ($) => $.component)
+    );
+    typeof w == "number" && w !== -1 && m?.popups?.splice(w, 1);
+  }
+  function s(h) {
+    return l ?? h;
+  }
+  function i(h) {
+    h && (r(h), t?.popups?.push(h));
+  }
+  async function u(h) {
+    await Ee(), i(s(h));
+  }
+  function c(h) {
+    const m = s(h);
+    if (!m)
+      return;
+    const w = t?.popups.indexOf(m);
+    typeof w == "number" && w !== -1 && t?.popups?.splice(w, 1);
+  }
+  function d(h, m, w) {
+    const k = b({
+      component: h,
+      props: {
+        title: m
+      },
+      emits: {
+        onClose() {
+          c(k);
+        }
+      },
+      slots: {
+        default: w
+      }
+    });
+    return i(k), k;
+  }
+  function v(h) {
+    return new Promise((m) => {
+      const w = b({
+        component: Tm,
+        props: {
+          title: a("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.CONFIRMATION")
+        },
+        emits: {
+          onClose() {
+            m(!1), c(w);
+          },
+          onConfirm() {
+            m(!0), c(w);
+          }
+        },
+        slots: {
+          default: h
+        }
+      });
+      i(w);
+    });
+  }
+  function g(h) {
+    d(xm, a("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.ERROR"), h);
+  }
+  function f(h) {
+    d(Mm, a("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.INFO"), h);
+  }
+  function b(h) {
+    const m = xt({
+      ...Om(h),
+      id: Symbol("vc-popup-instance"),
+      close: () => {
+      },
+      open: () => {
+      }
+    });
+    return m.close = () => c(m), m.open = () => u(m), m;
+  }
   return {
-    showWidget: t,
-    hideAllWidgets: l,
-    toggleWidget: r,
-    currentWidget: s,
-    isAnyWidgetVisible: i
+    open: u,
+    close: c,
+    showConfirmation: v,
+    showError: g,
+    showInfo: f
   };
 }
-function lp(e) {
-  const { hasAccess: a } = Zt(), t = O(""), l = S(() => (t.value ?? "").trim().toLowerCase()), r = S(() => l.value.length > 0), s = S(() => e.appsList.value.filter((d) => a(d.permission))), i = S(() => e.showApplications.value ? r.value ? s.value.filter((d) => [d.title, d.description, d.id, d.relativeUrl].filter(Boolean).join(" ").toLowerCase().includes(l.value)) : s.value : []), u = S(() => r.value ? e.widgets.value.filter((d) => [c(d), d.id, ...d.searchTerms ?? []].join(" ").toLowerCase().includes(l.value)) : e.widgets.value);
-  function c(d) {
-    return d.title || ap(d.id);
-  }
+function Om(e) {
+  const a = typeof e.slots > "u" ? {} : Object.fromEntries(
+    Object.entries(e.slots).map(([t, l]) => typeof l == "string" ? [t, l] : [t, Yt(l)])
+  );
   return {
-    searchQuery: t,
-    filteredApps: i,
-    filteredWidgets: u,
-    getWidgetTitle: c
+    ...e,
+    slots: a,
+    component: Yt(ni(e.component))
   };
 }
-function ap(e) {
-  return e ? e.replace(/[\-_]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (a) => a.toUpperCase()) : "";
+function po(e) {
+  const a = Object.values(e.params)?.[0], t = typeof a == "string" ? a : "";
+  return t && e.path.startsWith(`/${t}/`) ? e.path.slice(t.length + 1) : t && e.path === `/${t}` ? "/" : e.path;
 }
-const kn = /* @__PURE__ */ U({
-  __name: "AppBarWidgetContent",
+function rC(e) {
+  const a = Dt();
+  return { isActive: S(() => {
+    const l = Te(e);
+    if (!l) return !1;
+    const r = po(a);
+    return r === l || r.startsWith(l + "/");
+  }) };
+}
+const Ca = /* @__PURE__ */ U({
+  __name: "VcAppMenu",
   props: {
-    mobile: { type: Boolean, default: !1 }
+    expanded: { type: Boolean, default: !0 },
+    searchQuery: {}
   },
-  setup(e) {
-    const { currentWidget: a, hideAllWidgets: t, isAnyWidgetVisible: l } = Vl(), r = S(() => ({
-      ...a.value?.props ?? {},
-      onClose: t
-    }));
-    return (s, i) => n(l) && n(a)?.component ? (o(), p("div", {
+  emits: ["item:click"],
+  setup(e, { emit: a }) {
+    const t = e, l = a, r = Dt(), { t: s } = Ve(), { menuItems: i, menuBadges: u } = io(), { hasAccess: c } = Zt(), d = ($) => c($.permissions), v = ($) => ($.children ?? []).filter((E) => d(E)), g = S(() => i.value.filter(($) => d($) ? $.children?.length ? v($).length > 0 : !0 : !1)), f = S(() => {
+      const $ = t.searchQuery?.toLowerCase().trim();
+      return $ ? g.value.map((E) => {
+        const _ = v(E);
+        if (!_.length)
+          return s(E.title).toLowerCase().includes($) ? E : null;
+        if (s(E.title).toLowerCase().includes($)) return E;
+        const M = _.filter((C) => s(C.title).toLowerCase().includes($));
+        return M.length ? { ...E, children: M } : null;
+      }).filter(Boolean) : g.value;
+    }), b = ($) => $.groupId ?? String($.id ?? $.routeId ?? $.title), h = ($) => {
+      l("item:click", $);
+    }, m = ($) => {
+      if (!$) return !1;
+      const E = po(r);
+      return E === $ || E.startsWith($ + "/");
+    };
+    function w($) {
+      let E;
+      typeof $ == "object" && !dt($) && "content" in $ ? E = $ : E = { content: $ };
+      let _;
+      typeof E.content == "function" ? _ = E.content() : dt(E.content) ? _ = n(E.content) : _ = E.content;
+      let M = _;
+      if (typeof _ == "number" && _ > 99)
+        M = "99+";
+      else if (typeof _ == "string") {
+        const T = parseInt(_, 10);
+        !isNaN(T) && T > 99 && (M = "99+");
+      }
+      const C = E.isDot ?? !1;
+      if (C || M != null && M !== "" && M !== 0)
+        return {
+          content: M,
+          variant: E.variant ?? "primary",
+          isDot: C
+        };
+    }
+    const k = S(() => {
+      const $ = /* @__PURE__ */ new Map(), E = (_) => {
+        const M = _.routeId ?? _.groupId;
+        if (!M) return;
+        let C = _.badge;
+        if (!C && _.routeId && (C = u.value.get(_.routeId)), !C && _.groupId && (C = u.value.get(_.groupId)), !C) return;
+        const L = w(C);
+        L && $.set(M, L);
+      };
+      for (const _ of i.value)
+        if (E(_), _.children)
+          for (const M of _.children)
+            E(M);
+      return $;
+    });
+    return ($, E) => f.value.length ? (o(), B(n(Ff), {
       key: 0,
-      class: q(["app-bar-widget-content", { "app-bar-widget-content--mobile": e.mobile }])
-    }, [
-      (o(), B(We(n(a)?.component), Se(r.value, { onClose: n(t) }), null, 16, ["onClose"]))
-    ], 2)) : R("", !0);
+      expanded: e.expanded,
+      class: q(["vc-app-menu", { "vc-app-menu--collapsed": !e.expanded }])
+    }, {
+      default: A(() => [
+        (o(!0), p(ee, null, me(f.value, (_) => (o(), p(ee, {
+          key: _.id ?? _.routeId ?? _.url ?? _.title
+        }, [
+          v(_).length ? (o(), B(n(zf), {
+            key: 0,
+            "data-test-id": _.routeId,
+            "group-id": b(_),
+            icon: _.groupIcon || _.icon,
+            title: $.$t(_.title),
+            badge: k.value.get(_.routeId ?? _.groupId ?? "")
+          }, {
+            default: A(() => [
+              (o(!0), p(ee, null, me(v(_), (M) => (o(), B(n(yn), {
+                key: M.routeId || M.url || M.id || M.title,
+                "data-test-id": M.routeId,
+                icon: M.icon,
+                title: $.$t(M.title),
+                badge: k.value.get(M.routeId ?? M.groupId ?? ""),
+                active: m(M.url),
+                nested: "",
+                onClick: (C) => h(M)
+              }, null, 8, ["data-test-id", "icon", "title", "badge", "active", "onClick"]))), 128))
+            ]),
+            _: 2
+          }, 1032, ["data-test-id", "group-id", "icon", "title", "badge"])) : (o(), B(n(yn), {
+            key: 1,
+            "data-test-id": _.routeId,
+            icon: _.groupIcon || _.icon,
+            title: $.$t(_.title),
+            badge: k.value.get(_.routeId ?? _.groupId ?? ""),
+            active: m(_.url),
+            onClick: (M) => h(_)
+          }, null, 8, ["data-test-id", "icon", "title", "badge", "active", "onClick"]))
+        ], 64))), 128))
+      ]),
+      _: 1
+    }, 8, ["expanded", "class"])) : R("", !0);
   }
-}), np = { class: "app-hub-content__search" }, op = {
-  key: 0,
-  class: "app-hub-content__section app-hub-content__section--apps"
-}, ip = { class: "app-hub-content__section-header" }, sp = { class: "app-hub-content__section-title" }, rp = {
-  key: 0,
-  class: "app-hub-content__apps-list app-hub-content__apps-list--tiles"
-}, up = ["data-test-id", "onClick"], dp = ["src", "alt"], cp = { class: "app-hub-content__item-content app-hub-content__item-content--center" }, vp = { class: "app-hub-content__item-title app-hub-content__item-title--app app-hub-content__item-title--center" }, fp = {
+}), Lm = { class: "vc-user-info" }, Bm = {
   key: 1,
-  class: "app-hub-content__empty"
-}, mp = { class: "app-hub-content__section app-hub-content__section--widgets" }, pp = { class: "app-hub-content__widgets-inner" }, gp = { class: "app-hub-content__section-header app-hub-content__section-header--back" }, bp = { class: "app-hub-content__back-title" }, hp = { class: "app-hub-content__section-header" }, yp = { class: "app-hub-content__section-title" }, wp = {
+  class: "vc-user-info__avatar-fallback"
+}, Vm = { class: "vc-user-info__info" }, Dm = { class: "vc-user-info__name" }, Nm = { class: "vc-user-info__role" }, Pm = /* @__PURE__ */ U({
+  __name: "user-info",
+  props: {
+    avatarUrl: {},
+    name: {},
+    role: {},
+    isExpanded: { type: Boolean }
+  },
+  setup(e) {
+    const a = e, { user: t } = Il(), l = S(() => {
+      if (a.avatarUrl)
+        return `background-image: url(${CSS.escape(a.avatarUrl)})`;
+    });
+    return (r, s) => (o(), p("div", Lm, [
+      e.avatarUrl ? (o(), p("div", {
+        key: 0,
+        class: "vc-user-info__avatar",
+        style: he(l.value)
+      }, null, 4)) : (o(), p("div", Bm, [
+        x(n(J), {
+          icon: "lucide-circle-user",
+          size: "l"
+        })
+      ])),
+      y("div", Vm, [
+        y("div", Dm, D(e.name || n(t) && "fullName" in n(t) && n(t).fullName || n(t)?.userName), 1),
+        y("div", Nm, D(e.role ? r.$te(`SHELL.USER.ROLE.${e.role}`) ? r.$t(`SHELL.USER.ROLE.${e.role}`) : e.role : n(t)?.isAdministrator ? r.$t("SHELL.USER.ROLE.ADMINISTRATOR") : ""), 1)
+      ])
+    ]));
+  }
+}), Fm = { class: "vc-settings-menu" }, zm = {
   key: 0,
-  class: "app-hub-content__list"
-}, kp = ["data-widget-id", "onClick"], Sp = { class: "app-hub-content__widget-icon-wrap" }, Cp = {
+  class: "vc-settings-menu__separator"
+}, Um = { class: "vc-settings-menu__group" }, go = /* @__PURE__ */ U({
+  __name: "settings-menu",
+  setup(e) {
+    const { items: a } = $m(), t = S(() => {
+      const l = /* @__PURE__ */ new Map();
+      for (const r of a.value) {
+        const s = r.group ?? "general";
+        l.has(s) || l.set(s, []), l.get(s).push(r);
+      }
+      return Array.from(l.entries()).map(([r, s]) => ({
+        name: r,
+        items: s
+      }));
+    });
+    return (l, r) => (o(), p("div", Fm, [
+      (o(!0), p(ee, null, me(t.value, (s, i) => (o(), p(ee, {
+        key: s.name
+      }, [
+        i > 0 ? (o(), p("div", zm)) : R("", !0),
+        y("div", Um, [
+          (o(!0), p(ee, null, me(s.items, (u) => (o(), B(We(u.component), Se({
+            key: u.id
+          }, { ref_for: !0 }, u.props || {}), null, 16))), 128))
+        ])
+      ], 64))), 128))
+    ]));
+  }
+}), Hm = ["aria-hidden"], Gm = ["aria-modal", "aria-label", "aria-labelledby"], Wm = {
   key: 0,
-  class: "app-hub-content__widget-badge"
-}, $p = { class: "app-hub-content__item-content" }, _p = { class: "app-hub-content__item-title" }, Ep = {
+  class: "vc-sidebar__handle"
+}, qm = { class: "vc-sidebar__header" }, Km = { class: "vc-sidebar__title-wrap" }, Ym = {
   key: 1,
-  class: "app-hub-content__empty"
-}, Ap = {
-  key: 0,
-  class: "app-hub-content__flyout app-hub-content__flyout--mobile"
-}, Rp = { class: "app-hub-content__flyout-header" }, Ip = { class: "app-hub-content__flyout-title" }, Tp = { class: "app-hub-content__flyout-body" }, Sn = 120, bl = 120, xp = 80, Mp = 120, $a = /* @__PURE__ */ U({
-  __name: "AppHubContent",
+  class: "vc-sidebar__subtitle"
+}, jm = { class: "vc-sidebar__header-actions" }, Xm = ["aria-label"], Qm = { class: "vc-sidebar__content" }, Jm = {
+  key: 2,
+  class: "vc-sidebar__footer"
+}, Zm = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]', Nt = /* @__PURE__ */ U({
+  __name: "vc-sidebar",
   props: {
-    appsList: {},
-    showApplications: { type: Boolean, default: !0 },
-    mobile: { type: Boolean, default: !1 }
-  },
-  emits: ["switch-app"],
-  setup(e, { emit: a }) {
-    const t = e, l = a, r = ct(), s = S(() => typeof r.applications == "function"), i = O(null), u = O(null), { items: c } = Bl(), { currentWidget: d, hideAllWidgets: v, isAnyWidgetVisible: g, toggleWidget: f } = Vl(), { searchQuery: b, filteredApps: h, filteredWidgets: m, getWidgetTitle: w } = lp({
-      appsList: Ie(t, "appsList"),
-      widgets: c,
-      showApplications: Ie(t, "showApplications"),
-      mobile: Ie(t, "mobile")
-    }), k = O(bl), $ = O(bl), E = S(() => !s.value && h.value.length > Sn), _ = S(() => m.value.length > Sn), M = S(() => E.value ? h.value.slice(0, k.value) : h.value), C = S(() => _.value ? m.value.slice(0, $.value) : m.value);
-    ne(
-      () => c.value.map((Y) => Y.id),
-      () => {
-        g.value && !d.value && v();
+    modelValue: { type: Boolean },
+    position: { default: "right" },
+    size: { default: "sm" },
+    variant: { default: "default" },
+    width: { default: void 0 },
+    height: { default: void 0 },
+    showOverlay: { type: Boolean, default: !0 },
+    closeOnOverlay: { type: Boolean, default: !0 },
+    closeOnEscape: { type: Boolean, default: !0 },
+    trapFocus: { type: Boolean, default: !0 },
+    lockScroll: { type: Boolean, default: !0 },
+    returnFocus: { type: Boolean, default: !0 },
+    autoFocus: { type: Boolean, default: !0 },
+    teleport: { type: Boolean, default: !0 },
+    teleportTo: {},
+    title: { default: "" },
+    subtitle: { default: "" },
+    ariaLabel: { default: "" },
+    closeAriaLabel: { default: "Close sidebar" },
+    closeButton: { type: Boolean, default: !0 },
+    inset: { type: Boolean, default: !0 },
+    zIndex: { default: 1e4 },
+    draggable: { type: Boolean, default: !1 },
+    dragHandle: { type: Boolean, default: !1 },
+    closeThreshold: { default: 0.3 }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(e, { expose: a, emit: t }) {
+    const l = Symbol.for("vc-sidebar-scroll-lock");
+    function r() {
+      if (typeof window > "u")
+        return null;
+      const se = window;
+      return se[l] || (se[l] = { counter: 0, cachedOverflow: "", cachedPaddingRight: "" }), se[l];
+    }
+    function s() {
+      const se = r();
+      if (!(!se || typeof document > "u")) {
+        if (se.counter === 0) {
+          const { body: Ce, documentElement: De } = document;
+          se.cachedOverflow = Ce.style.overflow, se.cachedPaddingRight = Ce.style.paddingRight;
+          const qe = window.innerWidth - De.clientWidth;
+          Ce.style.overflow = "hidden", qe > 0 && (Ce.style.paddingRight = `${qe}px`);
+        }
+        se.counter += 1;
       }
-    ), ne(
-      [() => h.value.length, E],
-      ([Y, ue]) => {
-        k.value = ue ? Math.min(Y, bl) : Y, Ee(() => te(i.value));
-      },
-      { immediate: !0 }
-    ), ne(
-      [() => m.value.length, _],
-      ([Y, ue]) => {
-        $.value = ue ? Math.min(Y, bl) : Y, Ee(() => te(u.value));
-      },
-      { immediate: !0 }
-    ), ne(
-      () => z(i.value),
-      (Y, ue) => {
-        ue?.removeEventListener("scroll", P), Y?.addEventListener("scroll", P, { passive: !0 });
-      },
-      { immediate: !0 }
-    ), ne(
-      () => z(u.value),
-      (Y, ue) => {
-        ue?.removeEventListener("scroll", W), Y?.addEventListener("scroll", W, { passive: !0 });
-      },
-      { immediate: !0 }
-    ), Ue(() => {
-      z(i.value)?.removeEventListener("scroll", P), z(u.value)?.removeEventListener("scroll", W);
-    });
-    function L(Y) {
-      return !Y || Y.startsWith("/") || Y.startsWith("http://") || Y.startsWith("https://") || Y.startsWith("data:") ? Y : `/${Y}`;
     }
-    function T(Y) {
-      if (typeof window > "u")
-        return !1;
-      const ue = I(window.location.pathname), Q = I(Y.relativeUrl ?? "");
-      return Q ? Q === "/" ? ue === "/" : ue.startsWith(Q) : !1;
+    function i() {
+      const se = r();
+      if (!(!se || typeof document > "u" || se.counter === 0) && (se.counter -= 1, se.counter === 0)) {
+        const { body: Ce } = document;
+        Ce.style.overflow = se.cachedOverflow, Ce.style.paddingRight = se.cachedPaddingRight;
+      }
     }
-    function I(Y) {
-      return Y ? Y.replace(/\/+$/, "") || "/" : "";
+    const u = e, c = t, d = ct(), v = O(null), g = O(!1), f = O(null), { teleportTarget: b } = St({
+      to: S(() => u.teleportTo)
+    }), m = `vc-sidebar-title-${Math.round(Math.random() * 1e5)}`, w = {
+      sm: "300px",
+      md: "380px",
+      lg: "520px",
+      full: "100vw"
+    }, k = {
+      sm: "40dvh",
+      md: "56dvh",
+      lg: "72dvh",
+      full: "100dvh"
+    }, $ = S(() => typeof u.width == "number" ? `${u.width}px` : u.width), E = S(() => typeof u.height == "number" ? `${u.height}px` : u.height), _ = S(() => !!u.title || u.closeButton || !!d.header), M = S(() => !!d.footer), C = S(() => u.position === "bottom"), L = S(() => u.size === "full"), T = S(() => u.position === "left" ? "vc-sidebar-panel-left" : u.position === "bottom" ? "vc-sidebar-panel-bottom" : "vc-sidebar-panel-right"), I = S(() => C.value ? {
+      height: E.value ?? k[u.size]
+    } : {
+      width: $.value ?? w[u.size]
+    }), G = S(() => ({
+      zIndex: u.zIndex
+    })), N = S(() => [
+      `vc-sidebar__panel--${u.position}`,
+      `vc-sidebar__panel--${u.variant}`,
+      `vc-sidebar__panel--size-${u.size}`,
+      {
+        "vc-sidebar__panel--with-header": _.value,
+        "vc-sidebar__panel--with-footer": M.value,
+        "vc-sidebar__panel--inset": u.inset && !L.value,
+        "vc-sidebar__panel--draggable": u.draggable && C.value
+      }
+    ]), P = S(() => u.ariaLabel || void 0), W = S(() => u.ariaLabel || !u.title ? void 0 : m);
+    function F(se) {
+      c("update:modelValue", !1), c("close", se);
     }
-    function G(Y) {
-      v(), l("switch-app", Y);
+    function K() {
+      F("action");
     }
-    function N(Y) {
-      return `app-hub-app-${(Y.id || Y.title || "unknown").toString().trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || "unknown"}`;
+    function z() {
+      c("update:modelValue", !0);
     }
-    function P() {
-      E.value && K({
-        container: i.value,
-        totalItems: h.value.length,
-        renderLimit: k
-      });
+    function te() {
+      u.closeOnOverlay && F("overlay");
     }
-    function W() {
-      _.value && K({
-        container: u.value,
-        totalItems: m.value.length,
-        renderLimit: $
-      });
+    const ve = O(0), X = O(!1);
+    function Y(se) {
+      !u.draggable || !C.value || (ve.value = se.touches[0].clientY, X.value = !0);
     }
-    function F(Y) {
-      Y.component && f(Y.id), Y.onClick?.();
+    function ue(se) {
+      if (!X.value || !v.value) return;
+      const Ce = se.touches[0].clientY - ve.value;
+      Ce > 0 && (v.value.style.transform = `translateY(${Ce}px)`, v.value.style.transition = "none");
     }
-    function K(Y) {
-      const ue = z(Y.container);
-      !ue || Y.renderLimit.value >= Y.totalItems || ue.scrollHeight - ue.scrollTop - ue.clientHeight > Mp || (Y.renderLimit.value = Math.min(Y.renderLimit.value + xp, Y.totalItems), Ee(() => te(Y.container)));
+    function Q(se) {
+      if (!X.value || !v.value) return;
+      X.value = !1;
+      const Ce = se.changedTouches[0].clientY - ve.value, De = v.value.offsetHeight, qe = De * u.closeThreshold;
+      Ce > qe ? (v.value.style.transition = "transform 0.2s ease", v.value.style.transform = `translateY(${De}px)`, setTimeout(() => {
+        F("action");
+      }, 200)) : (v.value.style.transition = "transform 0.2s ease", v.value.style.transform = "", setTimeout(() => {
+        v.value && (v.value.style.transition = "");
+      }, 200));
     }
-    function z(Y) {
-      return Y ? Y.viewportRef?.value ?? null : null;
+    function j() {
+      return v.value ? Array.from(v.value.querySelectorAll(Zm)).filter((se) => {
+        if (se.hasAttribute("disabled") || se.getAttribute("aria-hidden") === "true")
+          return !1;
+        const Ce = window.getComputedStyle(se);
+        return Ce.display !== "none" && Ce.visibility !== "hidden";
+      }) : [];
     }
-    function te(Y) {
-      if (!Y)
+    let ke = !1;
+    function be() {
+      if (ke) return;
+      ke = !0;
+      const se = j()[0];
+      se ? se.focus() : v.value?.focus(), ke = !1;
+    }
+    function Z(se) {
+      ke || !u.modelValue || !u.trapFocus || !v.value || se.target instanceof Node && !v.value.contains(se.target) && be();
+    }
+    function fe(se) {
+      if (!u.modelValue)
         return;
-      Y.updateScrollState?.();
+      if (se.key === "Escape") {
+        u.closeOnEscape && F("escape");
+        return;
+      }
+      if (!u.trapFocus || se.key !== "Tab" || !v.value)
+        return;
+      const Ce = j();
+      if (!Ce.length) {
+        se.preventDefault(), v.value.focus();
+        return;
+      }
+      const De = Ce[0], qe = Ce[Ce.length - 1], Ze = document.activeElement;
+      if (se.shiftKey) {
+        (Ze === De || !Ze || !v.value.contains(Ze)) && (se.preventDefault(), qe.focus());
+        return;
+      }
+      Ze === qe && (se.preventDefault(), De.focus());
     }
-    function ve(Y) {
-      return d.value?.id === Y;
+    function Re() {
+      if (!u.returnFocus || !f.value) {
+        f.value = null;
+        return;
+      }
+      const se = f.value;
+      f.value = null, Ee(() => {
+        try {
+          se.focus({ preventScroll: !0 });
+        } catch {
+          se.focus();
+        }
+      });
     }
-    function X(Y) {
-      return Y.badge === void 0 ? !1 : typeof Y.badge == "function" ? Y.badge() : !!Y.badge;
+    function Fe() {
+      g.value || typeof document > "u" || (g.value = !0, f.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, document.addEventListener("keydown", fe), document.addEventListener("focusin", Z), u.lockScroll && s(), u.autoFocus && Ee(() => {
+        be();
+      }));
     }
-    return (Y, ue) => (o(), p("div", {
-      class: q(["app-hub-content", { "app-hub-content--mobile": e.mobile }])
+    function ye() {
+      !g.value || typeof document > "u" || (g.value = !1, document.removeEventListener("keydown", fe), document.removeEventListener("focusin", Z), u.lockScroll && i(), Re());
+    }
+    return ne(
+      () => u.modelValue,
+      (se) => {
+        if (se) {
+          Ee(() => {
+            v.value && (v.value.style.transform = "", v.value.style.transition = "");
+          }), Fe();
+          return;
+        }
+        ye();
+      },
+      { immediate: !0 }
+    ), Ue(() => {
+      ye();
+    }), a({
+      close: K,
+      open: z
+    }), (se, Ce) => (o(), B(ot, {
+      to: n(b),
+      defer: "",
+      disabled: !e.teleport
     }, [
-      y("div", np, [
-        x(n(Be), {
-          modelValue: n(b),
-          "onUpdate:modelValue": ue[0] || (ue[0] = (Q) => dt(b) ? b.value = Q : null),
-          clearable: "",
-          size: "small",
-          placeholder: Y.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.APP_HUB.SEARCH_PLACEHOLDER")
-        }, {
-          "prepend-inner": A(() => [
-            x(n(J), {
-              icon: "lucide-search",
-              size: "s"
-            })
-          ]),
-          _: 1
-        }, 8, ["modelValue", "placeholder"])
-      ]),
       y("div", {
-        class: q(["app-hub-content__sections", { "app-hub-content__sections--single": !e.showApplications, "app-hub-content__sections--mobile": e.mobile }])
+        class: "vc-sidebar",
+        style: he(G.value),
+        "aria-hidden": !e.modelValue
       }, [
-        e.showApplications ? (o(), p("section", op, [
-          y("header", ip, [
-            y("span", sp, D(Y.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.APP_HUB.APPLICATIONS")), 1)
-          ]),
-          x(n(ft), {
-            ref_key: "appsScrollContainerRef",
-            ref: i,
-            class: "app-hub-content__scroll"
-          }, {
-            default: A(() => [
-              V(Y.$slots, "applications", {
-                appsList: n(h),
-                switchApp: G
+        x(_e, { name: "vc-sidebar-overlay" }, {
+          default: A(() => [
+            e.modelValue && e.showOverlay ? (o(), p("div", {
+              key: 0,
+              class: "vc-sidebar__overlay",
+              onClick: te
+            })) : R("", !0)
+          ]),
+          _: 1
+        }),
+        x(_e, { name: T.value }, {
+          default: A(() => [
+            e.modelValue ? (o(), p("aside", {
+              key: 0,
+              ref_key: "panelEl",
+              ref: v,
+              class: q(["vc-sidebar__panel", N.value]),
+              style: he(I.value),
+              role: "dialog",
+              "aria-modal": e.showOverlay,
+              "aria-label": P.value,
+              "aria-labelledby": W.value,
+              tabindex: "-1",
+              onTouchstart: Y,
+              onTouchmove: ue,
+              onTouchend: Q
+            }, [
+              e.dragHandle && C.value ? (o(), p("div", Wm, [...Ce[1] || (Ce[1] = [
+                y("div", { class: "vc-sidebar__handle-bar" }, null, -1)
+              ])])) : R("", !0),
+              _.value ? V(se.$slots, "header", {
+                key: 1,
+                close: K
               }, () => [
-                n(h).length ? (o(), p("div", rp, [
-                  (o(!0), p(ee, null, me(M.value, (Q) => (o(), p("button", {
-                    key: Q.id || Q.title,
-                    type: "button",
-                    "data-test-id": N(Q),
-                    class: q(["app-hub-content__item app-hub-content__item--app app-hub-content__item--app-tile", { "app-hub-content__item--active": T(Q) }]),
-                    onClick: (j) => G(Q)
-                  }, [
-                    Q.iconUrl ? (o(), p("img", {
+                y("div", qm, [
+                  y("div", Km, [
+                    e.title ? (o(), p("h3", {
+                      key: 0,
+                      id: m,
+                      class: "vc-sidebar__title"
+                    }, D(e.title), 1)) : R("", !0),
+                    e.subtitle ? (o(), p("p", Ym, D(e.subtitle), 1)) : R("", !0)
+                  ]),
+                  y("div", jm, [
+                    V(se.$slots, "actions", { close: K }),
+                    e.closeButton ? (o(), p("button", {
                       key: 0,
-                      src: L(Q.iconUrl),
-                      alt: Q.title || Q.id || "app icon",
-                      class: "app-hub-content__item-icon app-hub-content__item-icon--tile"
-                    }, null, 8, dp)) : (o(), B(n(J), {
-                      key: 1,
-                      icon: "lucide-grid-2x2",
-                      size: "m",
-                      class: "app-hub-content__item-icon app-hub-content__item-icon--fallback app-hub-content__item-icon--tile"
-                    })),
-                    y("div", cp, [
-                      y("div", vp, D(Q.title || Q.id), 1)
-                    ])
-                  ], 10, up))), 128))
-                ])) : (o(), p("div", fp, D(Y.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.APP_HUB.NO_APPLICATIONS")), 1))
-              ])
-            ]),
-            _: 3
-          }, 512)
-        ])) : R("", !0),
-        y("section", mp, [
-          y("div", pp, [
-            !e.mobile && n(g) && n(d)?.component ? (o(), p(ee, { key: 0 }, [
-              y("header", gp, [
-                y("button", {
-                  class: "app-hub-content__back-button",
-                  onClick: ue[1] || (ue[1] = //@ts-ignore
-                  (...Q) => n(v) && n(v)(...Q))
-                }, [
-                  x(n(J), {
-                    icon: "lucide-arrow-left",
-                    size: "xs"
-                  }),
-                  y("span", bp, D(n(w)(n(d))), 1)
-                ])
-              ]),
-              x(n(ft), { class: "app-hub-content__widget-inline-body" }, {
-                default: A(() => [
-                  x(kn)
-                ]),
-                _: 1
-              })
-            ], 64)) : (o(), p(ee, { key: 1 }, [
-              y("header", hp, [
-                y("span", yp, D(Y.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.APP_HUB.WIDGETS")), 1)
-              ]),
-              x(n(ft), {
-                ref_key: "widgetsScrollContainerRef",
-                ref: u,
-                class: "app-hub-content__scroll"
-              }, {
-                default: A(() => [
-                  n(m).length ? (o(), p("div", wp, [
-                    (o(!0), p(ee, null, me(C.value, (Q) => (o(), p("button", {
-                      key: Q.id,
                       type: "button",
-                      "data-widget-id": Q.id,
-                      class: q(["app-hub-content__item app-hub-content__item--widget", { "app-hub-content__item--active": ve(Q.id) }]),
-                      onClick: (j) => F(Q)
+                      class: "vc-sidebar__close",
+                      "aria-label": e.closeAriaLabel,
+                      onClick: Ce[0] || (Ce[0] = (De) => F("action"))
                     }, [
-                      y("div", Sp, [
-                        x(n(J), {
-                          icon: Q.icon || "lucide-layout-grid",
-                          size: "s",
-                          class: "app-hub-content__item-icon app-hub-content__item-icon--fallback"
-                        }, null, 8, ["icon"]),
-                        X(Q) ? (o(), p("span", Cp)) : R("", !0)
-                      ]),
-                      y("div", $p, [
-                        y("div", _p, D(n(w)(Q)), 1)
-                      ])
-                    ], 10, kp))), 128))
-                  ])) : (o(), p("div", Ep, D(Y.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.APP_HUB.NO_WIDGETS")), 1))
-                ]),
-                _: 1
-              }, 512)
-            ], 64))
-          ])
-        ])
-      ], 2),
-      x(_e, { name: "app-hub-content-flyout" }, {
-        default: A(() => [
-          e.mobile && n(g) && n(d)?.component ? (o(), p("div", Ap, [
-            y("div", Rp, [
-              y("span", Ip, D(n(w)(n(d))), 1),
-              x(n(Oe), {
-                icon: "lucide-x",
-                text: "",
-                onClick: n(v)
-              }, null, 8, ["onClick"])
-            ]),
-            y("div", Tp, [
-              x(kn, { mobile: "" })
-            ])
-          ])) : R("", !0)
-        ]),
-        _: 1
-      })
-    ], 2));
+                      x(n(J), {
+                        icon: "lucide-x",
+                        size: "m"
+                      })
+                    ], 8, Xm)) : R("", !0)
+                  ])
+                ])
+              ]) : R("", !0),
+              y("div", Qm, [
+                V(se.$slots, "default")
+              ]),
+              se.$slots.footer ? (o(), p("div", Jm, [
+                V(se.$slots, "footer")
+              ])) : R("", !0)
+            ], 46, Gm)) : R("", !0)
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ], 12, Hm)
+    ], 8, ["to", "disabled"]));
   }
-}), Op = /* @__PURE__ */ U({
-  __name: "AppHubPopover",
+}), ep = /* @__PURE__ */ U({
+  __name: "user-sidebar",
   props: {
-    show: { type: Boolean },
-    anchorRef: { default: null },
-    appsList: {},
-    showApplications: { type: Boolean, default: !0 }
+    isOpened: { type: Boolean }
   },
-  emits: ["update:show", "switch-app"],
-  setup(e, { emit: a }) {
-    const t = e, l = a, { hideAllWidgets: r } = Vl(), s = S({
-      get: () => t.show,
-      set: (u) => {
-        l("update:show", u);
-      }
-    });
-    ne(
-      () => t.show,
-      (u) => {
-        u || r();
-      }
-    );
-    function i(u) {
-      l("switch-app", u), l("update:show", !1);
-    }
-    return (u, c) => (o(), B(n($t), {
-      show: s.value,
-      "onUpdate:show": c[0] || (c[0] = (d) => s.value = d),
-      "anchor-ref": e.anchorRef,
-      placement: "right-start",
-      width: "560px",
-      "max-width": "calc(100vw - 24px)",
-      "max-height": 9999,
-      "content-scrollable": !1
+  emits: ["update:isOpened", "item:click"],
+  setup(e) {
+    const a = de(tl, O(!1));
+    return (t, l) => (o(), B(n(Nt), {
+      "model-value": e.isOpened,
+      position: "left",
+      teleport: !n(a),
+      title: t.$t("SHELL.ACCOUNT.SETTINGS"),
+      "onUpdate:modelValue": l[1] || (l[1] = (r) => t.$emit("update:isOpened", r))
     }, {
       default: A(() => [
-        x($a, {
-          "apps-list": e.appsList,
-          "show-applications": e.showApplications,
-          onSwitchApp: i
-        }, we({ _: 2 }, [
-          u.$slots.applications ? {
-            name: "applications",
-            fn: A((d) => [
-              V(u.$slots, "applications", Qe(Je(d)))
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1032, ["apps-list", "show-applications"])
-      ]),
-      _: 3
-    }, 8, ["show", "anchor-ref"]));
-  }
-}), Lp = { class: "vc-notification-template__content" }, Bp = { class: "vc-notification-template__time" }, Vp = {
-  key: 0,
-  class: "vc-notification-template__content-body"
-}, Cn = 60, $n = 3600, Dp = 86400, Np = /* @__PURE__ */ U({
-  __name: "notification-template",
-  props: {
-    title: {},
-    notification: {},
-    icon: {},
-    color: {},
-    severity: {}
-  },
-  emits: ["click"],
-  setup(e, { emit: a }) {
-    const t = e, l = window.navigator.language, r = S(() => {
-      const s = t.notification.created;
-      if (!s) return "";
-      const i = s instanceof Date ? s : new Date(s);
-      if (Number.isNaN(i.getTime())) return "";
-      const u = Date.now(), c = Math.round((u - i.getTime()) / 1e3), d = Math.abs(c), v = new Intl.RelativeTimeFormat(l, { numeric: "auto" });
-      return d < Cn ? v.format(-c, "second") : d < $n ? v.format(-Math.round(c / Cn), "minute") : d < Dp ? v.format(-Math.round(c / $n), "hour") : new Intl.DateTimeFormat(l, {
-        dateStyle: "short",
-        timeStyle: "short"
-      }).format(i);
-    });
-    return (s, i) => (o(), p("div", {
-      class: "vc-notification-template",
-      onClick: i[0] || (i[0] = (u) => s.$emit("click"))
-    }, [
-      y("div", {
-        class: q(["vc-notification-template__container", {
-          "vc-notification-template__container--mobile": s.$isMobile.value
-        }])
-      }, [
-        y("div", {
-          class: "vc-notification-template__icon-container",
-          style: he({ backgroundColor: e.color ?? "var(--primary-500)" })
+        e.isOpened ? (o(), p("div", {
+          key: 0,
+          class: "vc-user-sidebar__menu",
+          onClick: l[0] || (l[0] = le((r) => t.$emit("update:isOpened", !1), ["stop"]))
         }, [
-          x(n(J), {
-            icon: e.icon ?? "lucide-bell",
-            size: "s"
-          }, null, 8, ["icon"])
-        ], 4),
-        y("div", Lp, [
-          y("p", {
-            class: q(["vc-notification-template__title", { "vc-notification-template__title--desktop": s.$isDesktop.value }])
-          }, D(e.title), 3),
-          y("p", Bp, D(r.value), 1),
-          s.$slots.default ? (o(), p("div", Vp, [
-            V(s.$slots, "default")
-          ])) : R("", !0)
-        ])
-      ], 2)
-    ]));
+          x(n(go))
+        ])) : R("", !0)
+      ]),
+      _: 1
+    }, 8, ["model-value", "teleport", "title"]));
   }
-}), Pp = Np, Fp = { class: "vc-notification-item__content" }, zp = /* @__PURE__ */ U({
-  __name: "notification",
+}), tp = { class: "vc-user-dropdown-button-container" }, lp = /* @__PURE__ */ U({
+  __name: "user-dropdown-button",
   props: {
-    notification: {}
+    avatarUrl: {},
+    name: {},
+    role: {},
+    disabled: { type: Boolean }
   },
-  emits: ["onClick"],
-  setup(e, { emit: a }) {
-    const t = e, l = a, r = Tl(), s = S(() => {
-      const u = t.notification.notifyType;
-      if (u)
-        return r.registry.get(u)?.template;
-    });
-    Me(
-      ui,
-      S(() => t.notification)
-    );
-    const i = () => {
-      l("onClick", t.notification);
-    };
-    return (u, c) => {
-      const d = Ne("VcHint");
-      return o(), p("div", {
-        class: "vc-notification-item",
+  setup(e) {
+    const a = O(!1), t = O(null), { isPinned: l, isExpanded: r } = Fa();
+    function s() {
+      a.value = !1;
+    }
+    Me(Ea, s);
+    function i() {
+      a.value = !a.value;
+    }
+    return (u, c) => (o(), p("div", tp, [
+      y("button", {
+        ref_key: "buttonRef",
+        ref: t,
+        type: "button",
+        class: q(["vc-user-dropdown-button", {
+          "vc-user-dropdown-button--active": a.value,
+          "vc-user-dropdown-button--auto-width": e.disabled,
+          "vc-user-dropdown-button--mobile": u.$isMobile.value,
+          "vc-user-dropdown-button--collapsed": !n(l) && u.$isDesktop.value
+        }]),
         onClick: i
       }, [
         y("div", {
-          class: "vc-notification-item__unread-dot",
-          style: he({ visibility: e.notification.isNew ? "visible" : "hidden" })
-        }, null, 4),
-        y("div", Fp, [
-          s.value ? (o(), B(We(s.value), { key: 0 })) : (o(), B(n(Pp), {
-            key: 1,
-            title: e.notification.title ?? "",
-            notification: e.notification
-          }, {
-            default: A(() => [
-              e.notification.description ? (o(), B(d, {
-                key: 0,
-                class: "tw-mb-1"
-              }, {
-                default: A(() => [
-                  ie(D(e.notification.description), 1)
-                ]),
-                _: 1
-              })) : R("", !0)
-            ]),
-            _: 1
-          }, 8, ["title", "notification"]))
-        ])
-      ]);
-    };
-  }
-}), Up = { class: "notification-dropdown" }, Hp = {
-  key: 1,
-  class: "tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-sm tw-text-[color:var(--neutrals-400)]"
-}, Gp = /* @__PURE__ */ U({
-  __name: "notification-dropdown",
-  setup(e) {
-    const a = Tl(), { t } = Ve({ useScope: "global" }), l = S(
-      () => [...a.history.value].sort(
-        (r, s) => new Date(s.created).getTime() - new Date(r.created).getTime()
-      )
-    );
-    return Ue(() => {
-      a.hasUnread.value && a.markAllAsRead();
-    }), (r, s) => (o(), p("div", Up, [
-      l.value.length ? (o(), B(n(ft), {
+          class: q(["vc-user-dropdown-button__wrap", {
+            "vc-user-dropdown-button__wrap--active": a.value
+          }])
+        }, [
+          x(Pm, {
+            "avatar-url": e.avatarUrl,
+            name: e.name,
+            role: e.role,
+            "is-expanded": n(r)
+          }, null, 8, ["avatar-url", "name", "role", "is-expanded"]),
+          c[2] || (c[2] = y("div", { class: "vc-user-dropdown-button__actions" }, [
+            y("div", { class: "vc-user-dropdown-button__trigger" })
+          ], -1))
+        ], 2)
+      ], 2),
+      u.$isDesktop.value ? (o(), B(n($t), {
         key: 0,
-        class: "notification-dropdown__scroll"
+        show: a.value,
+        "onUpdate:show": c[0] || (c[0] = (d) => a.value = d),
+        "anchor-ref": t.value,
+        placement: "right",
+        width: "260px",
+        "max-width": "300px"
       }, {
         default: A(() => [
-          (o(!0), p(ee, null, me(l.value, (i) => (o(), p("div", {
-            key: i.id
-          }, [
-            x(zp, { notification: i }, null, 8, ["notification"])
-          ]))), 128))
+          x(n(go))
         ]),
         _: 1
-      })) : (o(), p("div", Hp, D(n(t)("COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY")), 1))
+      }, 8, ["show", "anchor-ref"])) : (o(), B(ep, {
+        key: 1,
+        "is-opened": a.value,
+        "onUpdate:isOpened": c[1] || (c[1] = (d) => a.value = d)
+      }, null, 8, ["is-opened"]))
     ]));
   }
-}), yo = Gp, Wp = /* @__PURE__ */ U({
-  __name: "DesktopLayout",
+}), bo = lp, ap = {
+  key: 0,
+  class: "sidebar-content__search"
+}, np = { class: "sidebar-content__footer" }, op = /* @__PURE__ */ U({
+  __name: "SidebarContent",
   props: {
-    logo: {},
-    title: {},
+    expanded: { type: Boolean, default: !0 },
     avatar: {},
     userName: {},
     userRole: {},
     disableMenu: { type: Boolean, default: !1 },
-    disableAppSwitcher: { type: Boolean, default: !1 },
-    appsList: { default: () => [] },
+    headerVisible: { type: Boolean, default: !0 },
     showSearch: { type: Boolean, default: !1 },
     searchPlaceholder: {}
   },
-  emits: ["logo:click", "item:click", "switch-app"],
+  emits: ["item:click"],
   setup(e, { emit: a }) {
-    const t = a, l = Fa(), r = de(ll, !1), s = Dt(), i = O(null), u = O(!1), c = O(null), d = S(() => !r);
-    ne(
-      () => s.fullPath,
-      () => {
-        l.isMenuOpen.value && l.closeMenu(), u.value = !1;
+    const t = e, l = a, r = de(ll, !1), s = O(null), i = O("");
+    lt(() => {
+      Ee(() => s.value?.updateScrollState());
+    }), ne(
+      () => t.expanded,
+      (c) => {
+        c || (i.value = "");
       }
     );
-    const v = (h) => {
-      if (h.currentTarget instanceof HTMLElement && (i.value = h.currentTarget), l.isMenuOpen.value) {
-        l.closeMenu();
-        return;
-      }
-      u.value = !1, l.openMenu();
-    }, g = (h) => {
-      h.currentTarget instanceof HTMLElement && (c.value = h.currentTarget), u.value = !u.value, u.value && l.isMenuOpen.value && l.closeMenu();
-    }, f = (h) => {
-      if (!h) {
-        l.closeMenu();
-        return;
-      }
-      !i.value && typeof document < "u" && (i.value = document.querySelector(".sidebar-header__menu-button")), l.openMenu();
-    }, b = (h) => {
-      l.closeMenu(), t("switch-app", h);
+    const u = (c) => {
+      i.value = "", l("item:click", c);
     };
-    return (h, m) => (o(), p(ee, null, [
-      y("div", {
-        class: q(["desktop-layout__spacer", {
-          "desktop-layout__spacer--expanded": n(l).isPinned.value
-        }])
-      }, null, 2),
-      y("div", {
-        class: q(["desktop-layout", {
-          "desktop-layout--collapsed": !n(l).isPinned.value
-        }])
-      }, [
-        y("div", {
-          class: q(["desktop-layout__wrap", {
-            "desktop-layout__wrap--collapsed": !n(l).isPinned.value,
-            "desktop-layout__wrap--expanded": n(l).isPinned.value
-          }])
-        }, [
-          He(x(Zm, {
-            collapsed: !n(l).isPinned.value,
-            onClick: n(l).togglePin
-          }, null, 8, ["collapsed", "onClick"]), [
-            [Bt, !n(l).isMenuOpen.value]
-          ]),
-          V(h.$slots, "sidebar-header", {
-            logo: e.logo,
-            expanded: n(l).isExpanded.value,
-            isMobile: !1
-          }, () => [
-            d.value ? (o(), B(ao, {
-              key: 0,
-              logo: e.logo,
-              expanded: n(l).isExpanded.value,
-              "show-burger": n(l).isExpanded.value,
-              "is-menu-open": n(l).isMenuOpen.value,
-              "is-notifications-open": u.value,
-              class: "desktop-layout__header",
-              "onLogo:click": m[0] || (m[0] = (w) => h.$emit("logo:click")),
-              onToggleMenu: v,
-              onToggleNotifications: g
-            }, null, 8, ["logo", "expanded", "show-burger", "is-menu-open", "is-notifications-open"])) : R("", !0)
-          ]),
-          x(Qm, {
-            expanded: n(l).isExpanded.value,
-            avatar: e.avatar,
-            "user-name": e.userName,
-            "user-role": e.userRole,
-            "disable-menu": e.disableMenu,
-            "header-visible": d.value,
-            "show-search": e.showSearch,
-            "search-placeholder": e.searchPlaceholder,
-            "onItem:click": m[1] || (m[1] = (w) => h.$emit("item:click", w))
-          }, we({ _: 2 }, [
-            h.$slots.menu ? {
-              name: "menu",
-              fn: A((w) => [
-                V(h.$slots, "menu", Qe(Je(w)))
-              ]),
-              key: "0"
-            } : void 0,
-            h.$slots["sidebar-footer"] ? {
-              name: "sidebar-footer",
-              fn: A((w) => [
-                V(h.$slots, "sidebar-footer", Qe(Je(w)))
-              ]),
-              key: "1"
-            } : void 0
-          ]), 1032, ["expanded", "avatar", "user-name", "user-role", "disable-menu", "header-visible", "show-search", "search-placeholder"])
-        ], 2)
-      ], 2),
-      x(Op, {
-        show: n(l).isMenuOpen.value,
-        "anchor-ref": i.value,
-        "apps-list": e.appsList,
-        "show-applications": !e.disableAppSwitcher,
-        "onUpdate:show": f,
-        onSwitchApp: b
-      }, we({ _: 2 }, [
-        h.$slots["app-switcher"] && !e.disableAppSwitcher ? {
-          name: "applications",
-          fn: A(({ appsList: w, switchApp: k }) => [
-            V(h.$slots, "app-switcher", {
-              appsList: w,
-              switchApp: k
-            })
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["show", "anchor-ref", "apps-list", "show-applications"]),
-      x(n($t), {
-        show: u.value,
-        "onUpdate:show": m[2] || (m[2] = (w) => u.value = w),
-        "anchor-ref": c.value,
-        placement: "right-start",
-        width: "320px",
-        "content-scrollable": !1
+    return (c, d) => (o(), p("div", {
+      class: q(["sidebar-content", { "sidebar-content--no-header": !e.headerVisible }])
+    }, [
+      e.showSearch && e.expanded ? (o(), p("div", ap, [
+        x(n(Be), {
+          modelValue: i.value,
+          "onUpdate:modelValue": d[0] || (d[0] = (v) => i.value = v),
+          placeholder: e.searchPlaceholder || c.$t("SHELL.SIDEBAR.SEARCH_PLACEHOLDER", "Search keyword"),
+          size: "small",
+          clearable: "",
+          debounce: 300
+        }, null, 8, ["modelValue", "placeholder"])
+      ])) : R("", !0),
+      e.disableMenu ? R("", !0) : (o(), B(n(ft), {
+        key: 1,
+        ref_key: "scrollContainer",
+        ref: s,
+        class: "sidebar-content__menu"
       }, {
         default: A(() => [
-          x(n(yo))
+          V(c.$slots, "menu", {
+            expanded: e.expanded,
+            onItemClick: u,
+            searchQuery: i.value
+          }, () => [
+            x(Ca, {
+              expanded: e.expanded,
+              "search-query": i.value,
+              "onItem:click": u
+            }, null, 8, ["expanded", "search-query"])
+          ])
         ]),
-        _: 1
-      }, 8, ["show", "anchor-ref"])
-    ], 64));
+        _: 3
+      }, 512)),
+      y("div", np, [
+        V(c.$slots, e.userName, {
+          avatar: e.avatar,
+          role: e.userRole
+        }, () => [
+          n(r) ? R("", !0) : (o(), B(n(bo), {
+            key: 0,
+            "avatar-url": e.avatar,
+            name: e.userName,
+            role: e.userRole
+          }, null, 8, ["avatar-url", "name", "role"]))
+        ])
+      ])
+    ], 2));
+  }
+}), ip = { class: "sidebar-collapse-button__wrap" }, sp = /* @__PURE__ */ U({
+  __name: "SidebarCollapseButton",
+  props: {
+    collapsed: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(e) {
+    return (a, t) => (o(), p("div", {
+      class: "sidebar-collapse-button",
+      onClick: t[0] || (t[0] = (l) => a.$emit("click"))
+    }, [
+      y("div", ip, [
+        x(n(J), {
+          class: "sidebar-collapse-button__icon",
+          icon: e.collapsed ? "lucide-chevron-right" : "lucide-chevron-left"
+        }, null, 8, ["icon"])
+      ])
+    ]));
   }
 });
-function qp() {
-  const e = O([]), a = S(() => e.value), t = (i) => {
-    const u = e.value.findIndex((c) => c.id === i.id);
-    u >= 0 ? e.value[u] = i : e.value.push(i);
-  }, l = (i) => {
-    e.value = e.value.filter((u) => u.id !== i);
-  }, r = (i) => e.value.find((u) => u.id === i), s = S(
-    () => [...e.value].filter((i) => Te(i.isVisible) !== !1).sort((i, u) => (i.order || 0) - (u.order || 0))
-  );
+function ho(e, a) {
+  const t = S(() => {
+    const c = Te(e);
+    return !a.value || !Array.isArray(c) ? null : c.find((d) => d.id === a.value) || null;
+  }), l = S(() => a.value !== null);
   return {
-    registeredButtons: a,
-    register: t,
-    unregister: l,
-    getButton: r,
-    getButtons: s
+    showItem: (c) => {
+      a.value = c;
+    },
+    hideAllItems: () => {
+      a.value = null;
+    },
+    toggleItem: (c) => {
+      a.value === c ? a.value = null : a.value = c;
+    },
+    currentItem: t,
+    isAnyItemVisible: l,
+    closeItem: () => {
+      a.value = null;
+    }
   };
 }
-const Kp = Ye("use-app-bar-mobile-buttons");
-function Yp() {
-  const e = de(ya, null);
-  if (e)
-    return e;
-  const a = qp();
-  return Me(ya, a), kt() && mt(() => {
-  }), a;
+const yo = Symbol("VcAppBarState"), rp = {
+  activeWidgetId: O(null),
+  activeMobileActionId: O(null)
+};
+function up() {
+  const e = {
+    activeWidgetId: O(null),
+    activeMobileActionId: O(null)
+  };
+  return Me(yo, e), e;
 }
 function wo() {
-  const e = de(ya);
-  if (!e)
-    throw Kp.error("AppBarMobileButtonsService not found"), new Ct("AppBarMobileButtonsService");
-  return e;
+  return de(yo, rp);
 }
-function jp() {
-  const { getButtons: e } = wo(), { activeMobileActionId: a } = ho(), {
+function Vl() {
+  const { items: e } = Bl(), { activeWidgetId: a } = wo(), {
     showItem: t,
     hideAllItems: l,
     toggleItem: r,
     currentItem: s,
-    isAnyItemVisible: i,
-    closeItem: u
-  } = go(e, a);
-  return ne(
-    () => e.value,
-    (c) => {
-      if (a.value && !c.some((v) => v.id === a.value)) {
-        const v = s.value;
-        v?.onClose && v.onClose(), l();
-      }
-    },
-    { deep: !0 }
-  ), {
-    showAction: t,
-    hideAllActions: l,
-    toggleAction: r,
-    currentAction: s,
-    isAnyActionVisible: i,
-    closeAction: u
+    isAnyItemVisible: i
+  } = ho(e, a);
+  return {
+    showWidget: t,
+    hideAllWidgets: l,
+    toggleWidget: r,
+    currentWidget: s,
+    isAnyWidgetVisible: i
   };
 }
-const Xp = {
-  key: 0,
-  class: "app-bar-mobile-actions"
-}, Qp = {
-  key: 1,
-  class: "app-bar-mobile-actions__badge"
-}, Jp = /* @__PURE__ */ U({
-  __name: "AppBarMobileActions",
-  props: {
-    isSidebarMode: { type: Boolean },
-    expanded: {}
-  },
-  setup(e) {
-    const a = e, { getButtons: t } = wo(), { currentAction: l, toggleAction: r, hideAllActions: s, isAnyActionVisible: i } = jp(), u = Dt(), c = (g) => {
-      if (l.value?.id === g.id) {
-        g.onClose?.(), s();
-        return;
-      }
-      l.value && l.value.onClose?.(), r(g.id), !g.component && g.onClick && g.onClick();
-    }, d = (g) => {
-      l.value?.onClose?.(), s();
-    };
-    function v(g) {
-      return g.badge === void 0 ? !1 : !!Te(g.badge);
-    }
-    return ne([() => u.fullPath, () => a.isSidebarMode], () => {
-      s();
-    }), (g, f) => g.$isMobile.value ? (o(), p("div", Xp, [
-      (o(!0), p(ee, null, me(n(t), (b) => (o(), p("div", {
-        key: b.id,
-        class: "app-bar-mobile-actions__button-wrap"
-      }, [
-        b.isVisible === void 0 || b.isVisible ? (o(), B(n(Oe), {
-          key: 0,
-          text: "",
-          class: q(["app-bar-mobile-actions__button", { "app-bar-mobile-actions__button--active": b.id === n(l)?.id }]),
-          icon: b.icon,
-          "icon-size": "l",
-          onClick: (h) => c(b)
-        }, null, 8, ["class", "icon", "onClick"])) : R("", !0),
-        v(b) ? (o(), p("span", Qp)) : R("", !0)
-      ]))), 128)),
-      x(n(Nt), {
-        "model-value": n(i) && !!n(l)?.component,
-        position: "bottom",
-        size: "sm",
-        draggable: "",
-        "drag-handle": "",
-        "close-button": !1,
-        inset: !1,
-        "onUpdate:modelValue": f[1] || (f[1] = (b) => !b && d())
-      }, {
-        default: A(() => [
-          n(l)?.component ? (o(), B(We(n(l)?.component), Se({ key: 0 }, n(l)?.props || {}, {
-            onClose: f[0] || (f[0] = (b) => d())
-          }), null, 16)) : R("", !0)
-        ]),
-        _: 1
-      }, 8, ["model-value"])
-    ])) : R("", !0);
+function dp(e) {
+  const { hasAccess: a } = Zt(), t = O(""), l = S(() => (t.value ?? "").trim().toLowerCase()), r = S(() => l.value.length > 0), s = S(() => e.appsList.value.filter((d) => a(d.permission))), i = S(() => e.showApplications.value ? r.value ? s.value.filter((d) => [d.title, d.description, d.id, d.relativeUrl].filter(Boolean).join(" ").toLowerCase().includes(l.value)) : s.value : []), u = S(() => r.value ? e.widgets.value.filter((d) => [c(d), d.id, ...d.searchTerms ?? []].join(" ").toLowerCase().includes(l.value)) : e.widgets.value);
+  function c(d) {
+    return d.title || cp(d.id);
   }
-}), Zp = { class: "menu-sidebar__widgets" }, eg = {
-  key: 0,
-  class: "menu-sidebar__close-button"
-}, tg = {
-  key: 0,
-  class: "menu-sidebar__content-main"
-}, lg = { class: "menu-sidebar__navmenu-container" }, ag = { class: "menu-sidebar__user" }, ng = {
-  key: 2,
-  class: "menu-sidebar__app-switcher-wrapper"
-}, og = /* @__PURE__ */ U({
-  __name: "MenuSidebar",
+  return {
+    searchQuery: t,
+    filteredApps: i,
+    filteredWidgets: u,
+    getWidgetTitle: c
+  };
+}
+function cp(e) {
+  return e ? e.replace(/[\-_]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (a) => a.toUpperCase()) : "";
+}
+const Sn = /* @__PURE__ */ U({
+  __name: "AppBarWidgetContent",
   props: {
-    isOpened: { type: Boolean },
-    expanded: {}
+    mobile: { type: Boolean, default: !1 }
   },
-  emits: ["update:is-opened"],
-  setup(e, { emit: a }) {
-    const t = e, l = a, r = de(ll, !1), s = de(nt, O(!1)), i = de(tl, O(!1)), u = ct(), c = S(() => !r && (i.value || !!u.widgets)), d = S(() => s.value ? Nt : "div"), v = S(() => s.value ? {
-      modelValue: t.isOpened,
-      position: "left",
-      closeButton: !1,
-      "onUpdate:modelValue": (g) => {
-        g || l("update:is-opened", !1);
-      }
-    } : {});
-    return (g, f) => (o(), B(We(d.value), Qe(Je(v.value)), {
-      default: A(() => [
-        y("div", {
-          class: q(["menu-sidebar__wrapper", {
-            "menu-sidebar__wrapper--desktop": n(i),
-            "menu-sidebar__wrapper--expanded": n(i) && e.expanded
-          }])
-        }, [
-          c.value ? (o(), p("div", {
-            key: 0,
-            class: q(["menu-sidebar__header", {
-              "menu-sidebar__header--mobile": n(s)
-            }])
-          }, [
-            y("div", Zp, [
-              V(g.$slots, "widgets")
-            ]),
-            f[1] || (f[1] = y("div", { class: "menu-sidebar__spacer" }, null, -1)),
-            n(i) ? (o(), p("div", eg, [
-              x(n(Oe), {
-                "icon-class": "menu-sidebar__close-button-icon",
-                icon: "lucide-x",
-                text: "",
-                onClick: f[0] || (f[0] = le((b) => g.$emit("update:is-opened", !1), ["stop"]))
-              })
-            ])) : R("", !0)
-          ], 2)) : R("", !0),
-          y("div", {
-            class: q(["menu-sidebar__content", { "menu-sidebar__content--without-header": !c.value }])
-          }, [
-            g.$slots["widgets-active-content"] ? (o(), p("div", tg, [
-              V(g.$slots, "widgets-active-content")
-            ])) : R("", !0),
-            n(s) ? (o(), p(ee, { key: 1 }, [
-              y("div", lg, [
-                V(g.$slots, "navmenu")
-              ]),
-              y("div", ag, [
-                V(g.$slots, "user-dropdown")
-              ])
-            ], 64)) : (o(), p("div", ng, [
-              V(g.$slots, "app-switcher")
-            ]))
-          ], 2)
-        ], 2)
-      ]),
-      _: 3
-    }, 16));
+  setup(e) {
+    const { currentWidget: a, hideAllWidgets: t, isAnyWidgetVisible: l } = Vl(), r = S(() => ({
+      ...a.value?.props ?? {},
+      onClose: t
+    }));
+    return (s, i) => n(l) && n(a)?.component ? (o(), p("div", {
+      key: 0,
+      class: q(["app-bar-widget-content", { "app-bar-widget-content--mobile": e.mobile }])
+    }, [
+      (o(), B(We(n(a)?.component), Se(r.value, { onClose: n(t) }), null, 16, ["onClose"]))
+    ], 2)) : R("", !0);
   }
-}), ig = {
+}), vp = { class: "app-hub-content__search" }, fp = {
   key: 0,
-  class: "mobile-layout"
-}, sg = {
-  class: "mobile-layout__tabs",
-  role: "tablist"
-}, rg = ["aria-selected"], ug = { class: "mobile-layout__tab-label" }, dg = ["aria-selected"], cg = { class: "mobile-layout__tab-label" }, vg = {
+  class: "app-hub-content__section app-hub-content__section--apps"
+}, mp = { class: "app-hub-content__section-header" }, pp = { class: "app-hub-content__section-title" }, gp = {
   key: 0,
-  class: "mobile-layout__tab-badge"
-}, fg = {
-  id: "mobile-layout-panel-menu",
-  role: "tabpanel",
-  class: "mobile-layout__panel mobile-layout__panel--menu"
-}, mg = {
+  class: "app-hub-content__apps-list app-hub-content__apps-list--tiles"
+}, bp = ["data-test-id", "onClick"], hp = ["src", "alt"], yp = { class: "app-hub-content__item-content app-hub-content__item-content--center" }, wp = { class: "app-hub-content__item-title app-hub-content__item-title--app app-hub-content__item-title--center" }, kp = {
+  key: 1,
+  class: "app-hub-content__empty"
+}, Sp = { class: "app-hub-content__section app-hub-content__section--widgets" }, Cp = { class: "app-hub-content__widgets-inner" }, $p = { class: "app-hub-content__section-header app-hub-content__section-header--back" }, _p = { class: "app-hub-content__back-title" }, Ep = { class: "app-hub-content__section-header" }, Ap = { class: "app-hub-content__section-title" }, Rp = {
   key: 0,
-  class: "mobile-layout__search"
-}, pg = {
-  id: "mobile-layout-panel-hub",
-  role: "tabpanel",
-  class: "mobile-layout__panel mobile-layout__panel--hub"
-}, gg = {
+  class: "app-hub-content__list"
+}, Ip = ["data-widget-id", "onClick"], Tp = { class: "app-hub-content__widget-icon-wrap" }, xp = {
+  key: 0,
+  class: "app-hub-content__widget-badge"
+}, Mp = { class: "app-hub-content__item-content" }, Op = { class: "app-hub-content__item-title" }, Lp = {
   key: 1,
-  class: "mobile-layout__panel mobile-layout__panel--single mobile-layout__panel--hub"
-}, bg = {
-  key: 2,
-  class: "mobile-layout__panel mobile-layout__panel--single mobile-layout__panel--menu"
-}, hg = {
+  class: "app-hub-content__empty"
+}, Bp = {
   key: 0,
-  class: "mobile-layout__search"
-}, st = 0, Ht = 1, _n = 8, yg = 0.3, wg = 0.3, kg = 1, Sg = 0.2, En = "transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)", Cg = /* @__PURE__ */ U({
-  __name: "MobileLayout",
+  class: "app-hub-content__flyout app-hub-content__flyout--mobile"
+}, Vp = { class: "app-hub-content__flyout-header" }, Dp = { class: "app-hub-content__flyout-title" }, Np = { class: "app-hub-content__flyout-body" }, Cn = 120, bl = 120, Pp = 80, Fp = 120, $a = /* @__PURE__ */ U({
+  __name: "AppHubContent",
   props: {
-    logo: {},
-    title: {},
-    avatar: {},
-    userName: {},
-    userRole: {},
-    disableMenu: { type: Boolean, default: !1 },
-    disableAppSwitcher: { type: Boolean, default: !1 },
-    appsList: { default: () => [] },
-    showSearch: { type: Boolean, default: !1 },
-    searchPlaceholder: {}
+    appsList: {},
+    showApplications: { type: Boolean, default: !0 },
+    mobile: { type: Boolean, default: !1 }
   },
-  emits: ["item:click", "switch-app"],
+  emits: ["switch-app"],
   setup(e, { emit: a }) {
-    const t = e, l = a, r = O(""), s = Fa(), i = de(ll, !1), { blades: u, activeBlade: c } = Aa(), { items: d } = Bl(), v = S(
-      () => d.value.some((X) => X.badge === void 0 ? !1 : typeof X.badge == "function" ? X.badge() : !!X.badge)
-    ), g = S(
-      () => d.value.length > 0 || !t.disableAppSwitcher && t.appsList.length > 0
-    ), f = S(() => g.value && !t.disableMenu), b = O(st), h = O(!1), m = O(0), w = O(null), k = O("idle");
-    let $ = 0, E = 0, _ = 0, M = 0;
-    const C = S(() => {
-      const X = b.value * -50, Y = w.value?.clientWidth ?? 0;
-      if (h.value && Y > 0) {
-        const ue = m.value / Y * 50;
-        return {
-          transform: `translateX(${X + ue}%)`,
-          transition: "none"
-        };
+    const t = e, l = a, r = ct(), s = S(() => typeof r.applications == "function"), i = O(null), u = O(null), { items: c } = Bl(), { currentWidget: d, hideAllWidgets: v, isAnyWidgetVisible: g, toggleWidget: f } = Vl(), { searchQuery: b, filteredApps: h, filteredWidgets: m, getWidgetTitle: w } = dp({
+      appsList: Ie(t, "appsList"),
+      widgets: c,
+      showApplications: Ie(t, "showApplications"),
+      mobile: Ie(t, "mobile")
+    }), k = O(bl), $ = O(bl), E = S(() => !s.value && h.value.length > Cn), _ = S(() => m.value.length > Cn), M = S(() => E.value ? h.value.slice(0, k.value) : h.value), C = S(() => _.value ? m.value.slice(0, $.value) : m.value);
+    ne(
+      () => c.value.map((Y) => Y.id),
+      () => {
+        g.value && !d.value && v();
       }
-      return {
-        transform: `translateX(${X}%)`,
-        transition: En
-      };
-    }), L = S(() => {
-      const X = w.value?.clientWidth ?? 0, Y = h.value && X > 0 ? -m.value / X : 0;
-      return {
-        transform: `translateX(${Math.max(0, Math.min(1, b.value + Y)) * 100}%)`,
-        transition: h.value ? "none" : En
-      };
+    ), ne(
+      [() => h.value.length, E],
+      ([Y, ue]) => {
+        k.value = ue ? Math.min(Y, bl) : Y, Ee(() => te(i.value));
+      },
+      { immediate: !0 }
+    ), ne(
+      [() => m.value.length, _],
+      ([Y, ue]) => {
+        $.value = ue ? Math.min(Y, bl) : Y, Ee(() => te(u.value));
+      },
+      { immediate: !0 }
+    ), ne(
+      () => z(i.value),
+      (Y, ue) => {
+        ue?.removeEventListener("scroll", P), Y?.addEventListener("scroll", P, { passive: !0 });
+      },
+      { immediate: !0 }
+    ), ne(
+      () => z(u.value),
+      (Y, ue) => {
+        ue?.removeEventListener("scroll", W), Y?.addEventListener("scroll", W, { passive: !0 });
+      },
+      { immediate: !0 }
+    ), Ue(() => {
+      z(i.value)?.removeEventListener("scroll", P), z(u.value)?.removeEventListener("scroll", W);
     });
-    function T(X) {
-      b.value = Math.max(st, Math.min(Ht, X)), I();
+    function L(Y) {
+      return !Y || Y.startsWith("/") || Y.startsWith("http://") || Y.startsWith("https://") || Y.startsWith("data:") ? Y : `/${Y}`;
     }
-    function I() {
-      m.value = 0, h.value = !1, k.value = "idle";
+    function T(Y) {
+      if (typeof window > "u")
+        return !1;
+      const ue = I(window.location.pathname), Q = I(Y.relativeUrl ?? "");
+      return Q ? Q === "/" ? ue === "/" : ue.startsWith(Q) : !1;
     }
-    function G(X, Y) {
-      const ue = Math.abs(X);
-      if (!ue || !Y)
-        return 0;
-      const Q = ue * Y / (ue + Y);
-      return Math.sign(X) * Q;
+    function I(Y) {
+      return Y ? Y.replace(/\/+$/, "") || "/" : "";
     }
-    function N(X) {
-      const Y = w.value?.clientWidth ?? 0;
-      if (!Y)
-        return X;
-      const ue = b.value === st && X > 0, Q = b.value === Ht && X < 0;
-      if (ue || Q)
-        return G(X, Y * Sg);
-      const j = Y * kg;
-      return Math.max(-j, Math.min(j, X));
+    function G(Y) {
+      v(), l("switch-app", Y);
     }
-    function P(X) {
-      if (!f.value || X.touches.length === 0)
-        return;
-      const Y = X.touches[0];
-      $ = Y.clientX, E = Y.clientY, _ = Y.clientX, M = Date.now(), m.value = 0, h.value = !1, k.value = "pending";
+    function N(Y) {
+      return `app-hub-app-${(Y.id || Y.title || "unknown").toString().trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || "unknown"}`;
     }
-    function W(X) {
-      if (!f.value || X.touches.length === 0 || k.value === "idle")
-        return;
-      const Y = X.touches[0], ue = Y.clientX - $, Q = Y.clientY - E, j = Math.abs(ue), ke = Math.abs(Q);
-      if (k.value === "pending") {
-        if (j < _n && ke < _n)
-          return;
-        if (ke > j) {
-          k.value = "vertical";
-          return;
-        }
-        k.value = "horizontal", h.value = !0;
-      }
-      k.value === "horizontal" && (X.cancelable && X.preventDefault(), _ = Y.clientX, m.value = N(ue));
+    function P() {
+      E.value && K({
+        container: i.value,
+        totalItems: h.value.length,
+        renderLimit: k
+      });
     }
-    function F(X) {
-      if (!f.value) {
-        I();
-        return;
-      }
-      const Y = X.changedTouches[0];
-      if (k.value !== "horizontal") {
-        I();
+    function W() {
+      _.value && K({
+        container: u.value,
+        totalItems: m.value.length,
+        renderLimit: $
+      });
+    }
+    function F(Y) {
+      Y.component && f(Y.id), Y.onClick?.();
+    }
+    function K(Y) {
+      const ue = z(Y.container);
+      !ue || Y.renderLimit.value >= Y.totalItems || ue.scrollHeight - ue.scrollTop - ue.clientHeight > Fp || (Y.renderLimit.value = Math.min(Y.renderLimit.value + Pp, Y.totalItems), Ee(() => te(Y.container)));
+    }
+    function z(Y) {
+      return Y ? Y.viewportRef?.value ?? null : null;
+    }
+    function te(Y) {
+      if (!Y)
         return;
-      }
-      const Q = (Y?.clientX ?? _) - $, j = Math.max(Date.now() - M, 1), ke = Math.abs(Q) / j, Z = (w.value?.clientWidth ?? 0) * yg;
-      if (ke > wg || Math.abs(Q) > Z) {
-        if (Q < 0) {
-          T(b.value + 1);
-          return;
-        }
-        if (Q > 0) {
-          T(b.value - 1);
-          return;
-        }
-      }
-      I();
+      Y.updateScrollState?.();
     }
-    ne(
-      () => s.isMenuOpen.value,
-      (X) => {
-        X || (T(st), r.value = "");
-      }
-    ), ne(g, (X) => {
-      X || T(st);
-    }), ne(f, (X) => {
-      X || T(st);
-    });
-    const K = S(() => u.value.length <= 1), z = S(() => {
-      const X = c.value?.title, Y = u.value[u.value.length - 1]?.title;
-      return X ?? Y ?? "";
-    });
-    ne(K, (X) => {
-      !X && s.isMenuOpen.value && s.closeMenu();
-    });
-    const te = (X) => {
-      r.value = "", s.closeMenu(), l("item:click", X);
-    }, ve = (X) => {
-      s.closeMenu(), l("switch-app", X);
-    };
-    return (X, Y) => (o(), p(ee, null, [
-      K.value ? (o(), p("div", ig, [
-        V(X.$slots, "sidebar-header", {
-          logo: e.logo,
-          expanded: !1,
-          isMobile: !0
-        }, () => [
-          x(ao, {
-            logo: e.logo,
-            expanded: !1,
-            "is-mobile": !0,
-            "mobile-title": z.value,
-            "show-mobile-title": n(u).length === 1,
-            class: "mobile-layout__header",
-            "onLogo:click": n(s).openMenu
+    function ve(Y) {
+      return d.value?.id === Y;
+    }
+    function X(Y) {
+      return Y.badge === void 0 ? !1 : typeof Y.badge == "function" ? Y.badge() : !!Y.badge;
+    }
+    return (Y, ue) => (o(), p("div", {
+      class: q(["app-hub-content", { "app-hub-content--mobile": e.mobile }])
+    }, [
+      y("div", vp, [
+        x(n(Be), {
+          modelValue: n(b),
+          "onUpdate:modelValue": ue[0] || (ue[0] = (Q) => dt(b) ? b.value = Q : null),
+          clearable: "",
+          size: "small",
+          placeholder: Y.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.APP_HUB.SEARCH_PLACEHOLDER")
+        }, {
+          "prepend-inner": A(() => [
+            x(n(J), {
+              icon: "lucide-search",
+              size: "s"
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue", "placeholder"])
+      ]),
+      y("div", {
+        class: q(["app-hub-content__sections", { "app-hub-content__sections--single": !e.showApplications, "app-hub-content__sections--mobile": e.mobile }])
+      }, [
+        e.showApplications ? (o(), p("section", fp, [
+          y("header", mp, [
+            y("span", pp, D(Y.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.APP_HUB.APPLICATIONS")), 1)
+          ]),
+          x(n(ft), {
+            ref_key: "appsScrollContainerRef",
+            ref: i,
+            class: "app-hub-content__scroll"
           }, {
-            actions: A(() => [
-              x(Jp, {
-                "is-sidebar-mode": n(s).isMenuOpen.value,
-                expanded: !1
-              }, null, 8, ["is-sidebar-mode"])
+            default: A(() => [
+              V(Y.$slots, "applications", {
+                appsList: n(h),
+                switchApp: G
+              }, () => [
+                n(h).length ? (o(), p("div", gp, [
+                  (o(!0), p(ee, null, me(M.value, (Q) => (o(), p("button", {
+                    key: Q.id || Q.title,
+                    type: "button",
+                    "data-test-id": N(Q),
+                    class: q(["app-hub-content__item app-hub-content__item--app app-hub-content__item--app-tile", { "app-hub-content__item--active": T(Q) }]),
+                    onClick: (j) => G(Q)
+                  }, [
+                    Q.iconUrl ? (o(), p("img", {
+                      key: 0,
+                      src: L(Q.iconUrl),
+                      alt: Q.title || Q.id || "app icon",
+                      class: "app-hub-content__item-icon app-hub-content__item-icon--tile"
+                    }, null, 8, hp)) : (o(), B(n(J), {
+                      key: 1,
+                      icon: "lucide-grid-2x2",
+                      size: "m",
+                      class: "app-hub-content__item-icon app-hub-content__item-icon--fallback app-hub-content__item-icon--tile"
+                    })),
+                    y("div", yp, [
+                      y("div", wp, D(Q.title || Q.id), 1)
+                    ])
+                  ], 10, bp))), 128))
+                ])) : (o(), p("div", kp, D(Y.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.APP_HUB.NO_APPLICATIONS")), 1))
+              ])
             ]),
-            _: 1
-          }, 8, ["logo", "mobile-title", "show-mobile-title", "onLogo:click"])
-        ])
-      ])) : R("", !0),
-      x(og, {
-        "is-opened": n(s).isMenuOpen.value,
-        expanded: !0,
-        "onUpdate:isOpened": Y[4] || (Y[4] = (ue) => !ue && n(s).closeMenu())
-      }, {
-        navmenu: A(() => [
-          y("div", {
-            class: q(["mobile-layout__navmenu", { "mobile-layout__navmenu--tabs": f.value }])
-          }, [
-            f.value ? (o(), p(ee, { key: 0 }, [
-              y("div", sg, [
-                y("button", {
-                  type: "button",
-                  class: q(["mobile-layout__tab", { "mobile-layout__tab--active": b.value === st }]),
-                  role: "tab",
-                  "aria-selected": b.value === st,
-                  "aria-controls": "mobile-layout-panel-menu",
-                  onClick: Y[0] || (Y[0] = (ue) => T(st))
-                }, [
-                  y("span", ug, D(X.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.MOBILE_LAYOUT.TAB_MENU")), 1)
-                ], 10, rg),
+            _: 3
+          }, 512)
+        ])) : R("", !0),
+        y("section", Sp, [
+          y("div", Cp, [
+            !e.mobile && n(g) && n(d)?.component ? (o(), p(ee, { key: 0 }, [
+              y("header", $p, [
                 y("button", {
-                  type: "button",
-                  class: q(["mobile-layout__tab", { "mobile-layout__tab--active": b.value === Ht }]),
-                  role: "tab",
-                  "aria-selected": b.value === Ht,
-                  "aria-controls": "mobile-layout-panel-hub",
-                  onClick: Y[1] || (Y[1] = (ue) => T(Ht))
+                  class: "app-hub-content__back-button",
+                  onClick: ue[1] || (ue[1] = //@ts-ignore
+                  (...Q) => n(v) && n(v)(...Q))
                 }, [
-                  y("span", cg, [
-                    ie(D(X.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.MOBILE_LAYOUT.TAB_HUB")) + " ", 1),
-                    v.value ? (o(), p("span", vg)) : R("", !0)
-                  ])
-                ], 10, dg),
-                y("span", {
-                  class: "mobile-layout__tab-indicator",
-                  style: he(L.value)
-                }, null, 4)
+                  x(n(J), {
+                    icon: "lucide-arrow-left",
+                    size: "xs"
+                  }),
+                  y("span", _p, D(n(w)(n(d))), 1)
+                ])
               ]),
-              y("div", {
-                ref_key: "sliderViewportRef",
-                ref: w,
-                class: "mobile-layout__slider-viewport",
-                onTouchstartPassive: P,
-                onTouchmove: W,
-                onTouchendPassive: F,
-                onTouchcancelPassive: F
-              }, [
-                y("div", {
-                  class: "mobile-layout__slider",
-                  style: he(C.value)
-                }, [
-                  y("div", fg, [
-                    e.showSearch ? (o(), p("div", mg, [
-                      x(n(Be), {
-                        modelValue: r.value,
-                        "onUpdate:modelValue": Y[2] || (Y[2] = (ue) => r.value = ue),
-                        placeholder: t.searchPlaceholder || X.$t("SHELL.SIDEBAR.SEARCH_PLACEHOLDER", "Search keyword"),
-                        size: "small",
-                        clearable: "",
-                        debounce: 300
-                      }, null, 8, ["modelValue", "placeholder"])
-                    ])) : R("", !0),
-                    x(n(ft), { class: "mobile-layout__menu-scroll" }, {
-                      default: A(() => [
-                        V(X.$slots, "menu", {
-                          expanded: !0,
-                          onItemClick: te,
-                          searchQuery: r.value
-                        }, () => [
-                          x(Ca, {
-                            expanded: !0,
-                            "search-query": r.value,
-                            "onItem:click": te
-                          }, null, 8, ["search-query"])
-                        ])
-                      ]),
-                      _: 3
-                    })
-                  ]),
-                  y("div", pg, [
-                    x($a, {
-                      "apps-list": t.appsList,
-                      "show-applications": !t.disableAppSwitcher,
-                      mobile: "",
-                      onSwitchApp: ve
-                    }, we({ _: 2 }, [
-                      X.$slots["app-switcher"] && !t.disableAppSwitcher ? {
-                        name: "applications",
-                        fn: A(({ appsList: ue, switchApp: Q }) => [
-                          V(X.$slots, "app-switcher", {
-                            appsList: ue,
-                            switchApp: Q
-                          })
-                        ]),
-                        key: "0"
-                      } : void 0
-                    ]), 1032, ["apps-list", "show-applications"])
-                  ])
-                ], 4)
-              ], 544)
-            ], 64)) : t.disableMenu ? (o(), p("div", gg, [
-              x($a, {
-                "apps-list": t.appsList,
-                "show-applications": !t.disableAppSwitcher,
-                mobile: "",
-                onSwitchApp: ve
-              }, we({ _: 2 }, [
-                X.$slots["app-switcher"] && !t.disableAppSwitcher ? {
-                  name: "applications",
-                  fn: A(({ appsList: ue, switchApp: Q }) => [
-                    V(X.$slots, "app-switcher", {
-                      appsList: ue,
-                      switchApp: Q
-                    })
-                  ]),
-                  key: "0"
-                } : void 0
-              ]), 1032, ["apps-list", "show-applications"])
-            ])) : (o(), p("div", bg, [
-              e.showSearch ? (o(), p("div", hg, [
-                x(n(Be), {
-                  modelValue: r.value,
-                  "onUpdate:modelValue": Y[3] || (Y[3] = (ue) => r.value = ue),
-                  placeholder: t.searchPlaceholder || X.$t("SHELL.SIDEBAR.SEARCH_PLACEHOLDER", "Search keyword"),
-                  size: "small",
-                  clearable: "",
-                  debounce: 300
-                }, null, 8, ["modelValue", "placeholder"])
-              ])) : R("", !0),
-              x(n(ft), { class: "mobile-layout__menu-scroll" }, {
+              x(n(ft), { class: "app-hub-content__widget-inline-body" }, {
                 default: A(() => [
-                  V(X.$slots, "menu", {
-                    expanded: !0,
-                    onItemClick: te,
-                    searchQuery: r.value
-                  }, () => [
-                    x(Ca, {
-                      expanded: !0,
-                      "search-query": r.value,
-                      "onItem:click": te
-                    }, null, 8, ["search-query"])
-                  ])
+                  x(Sn)
                 ]),
-                _: 3
-              })
-            ]))
-          ], 2)
-        ]),
-        "user-dropdown": A(() => [
-          V(X.$slots, e.userName, {
-            avatar: e.avatar,
-            role: e.userRole
-          }, () => [
-            n(i) ? R("", !0) : (o(), B(n(po), {
-              key: 0,
-              "avatar-url": e.avatar,
-              name: e.userName,
-              role: e.userRole
-            }, null, 8, ["avatar-url", "name", "role"]))
-          ])
-        ]),
-        _: 3
-      }, 8, ["is-opened"])
-    ], 64));
-  }
-}), Wa = Symbol("PopupPlugin");
-let ko;
-const rC = {
-  install(e) {
-    const t = {
-      popups: kl([])
-    };
-    e.config.globalProperties.$popupPlugin = t, e.provide(Wa, t), ko = t;
-  }
-};
-function $g() {
-  if (pt())
-    return de(Wa, void 0);
-}
-const _g = ["innerHTML"], Eg = /* @__PURE__ */ U({
-  __name: "vc-popup-container",
-  setup(e) {
-    const a = $g();
-    function t(l) {
-      return xl.sanitize(l, {
-        ALLOWED_TAGS: [
-          "p",
-          "br",
-          "strong",
-          "em",
-          "u",
-          "s",
-          "h1",
-          "h2",
-          "h3",
-          "h4",
-          "h5",
-          "h6",
-          "ul",
-          "ol",
-          "li",
-          "blockquote",
-          "pre",
-          "code",
-          "a",
-          "img",
-          "table",
-          "thead",
-          "tbody",
-          "tr",
-          "th",
-          "td",
-          "hr",
-          "div",
-          "span"
-        ],
-        ALLOWED_ATTR: ["href", "src", "alt", "title", "class", "id", "colspan", "rowspan", "align", "valign"],
-        FORBID_TAGS: ["script", "object", "embed", "form", "input"],
-        FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover", "onfocus", "onblur", "style"]
-      });
-    }
-    return (l, r) => (o(!0), p(ee, null, me(n(a)?.popups, (s, i) => (o(), B(We(s.component), Se({
-      key: s.id ?? i
-    }, { ref_for: !0 }, { ...s.props, ...s.emits }, {
-      onClose: () => s.close?.()
-    }), we({ _: 2 }, [
-      me(s.slots, (u, c) => ({
-        name: c,
-        fn: A(() => [
-          typeof u == "string" ? (o(), p("div", {
-            key: 0,
-            class: "tw-h-full tw-w-full",
-            innerHTML: t(u)
-          }, null, 8, _g)) : (o(), B(We(u), { key: 1 }))
+                _: 1
+              })
+            ], 64)) : (o(), p(ee, { key: 1 }, [
+              y("header", Ep, [
+                y("span", Ap, D(Y.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.APP_HUB.WIDGETS")), 1)
+              ]),
+              x(n(ft), {
+                ref_key: "widgetsScrollContainerRef",
+                ref: u,
+                class: "app-hub-content__scroll"
+              }, {
+                default: A(() => [
+                  n(m).length ? (o(), p("div", Rp, [
+                    (o(!0), p(ee, null, me(C.value, (Q) => (o(), p("button", {
+                      key: Q.id,
+                      type: "button",
+                      "data-widget-id": Q.id,
+                      class: q(["app-hub-content__item app-hub-content__item--widget", { "app-hub-content__item--active": ve(Q.id) }]),
+                      onClick: (j) => F(Q)
+                    }, [
+                      y("div", Tp, [
+                        x(n(J), {
+                          icon: Q.icon || "lucide-layout-grid",
+                          size: "s",
+                          class: "app-hub-content__item-icon app-hub-content__item-icon--fallback"
+                        }, null, 8, ["icon"]),
+                        X(Q) ? (o(), p("span", xp)) : R("", !0)
+                      ]),
+                      y("div", Mp, [
+                        y("div", Op, D(n(w)(Q)), 1)
+                      ])
+                    ], 10, Ip))), 128))
+                  ])) : (o(), p("div", Lp, D(Y.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.APP_HUB.NO_WIDGETS")), 1))
+                ]),
+                _: 1
+              }, 512)
+            ], 64))
+          ])
         ])
-      }))
-    ]), 1040, ["onClose"]))), 128));
+      ], 2),
+      x(_e, { name: "app-hub-content-flyout" }, {
+        default: A(() => [
+          e.mobile && n(g) && n(d)?.component ? (o(), p("div", Bp, [
+            y("div", Vp, [
+              y("span", Dp, D(n(w)(n(d))), 1),
+              x(n(Oe), {
+                icon: "lucide-x",
+                text: "",
+                onClick: n(v)
+              }, null, 8, ["onClick"])
+            ]),
+            y("div", Np, [
+              x(Sn, { mobile: "" })
+            ])
+          ])) : R("", !0)
+        ]),
+        _: 1
+      })
+    ], 2));
   }
-}), Ag = Eg, Rg = { class: "vc-popup__center" }, Ig = ["aria-label"], Tg = { class: "vc-popup__content" }, xg = {
-  key: 0,
-  class: "vc-popup__footer"
-}, qa = /* @__PURE__ */ U({
-  __name: "vc-popup",
+}), zp = /* @__PURE__ */ U({
+  __name: "AppHubPopover",
   props: {
-    modelValue: { type: Boolean, default: void 0 },
-    title: {},
-    closable: { type: Boolean, default: !0 },
-    variant: { default: "default" },
-    isMobileFullscreen: { type: Boolean },
-    isFullscreen: { type: Boolean },
-    modalWidth: { default: "tw-max-w-md" },
-    closeOnOverlay: { type: Boolean, default: void 0 },
-    closeOnEscape: { type: Boolean, default: void 0 }
+    show: { type: Boolean },
+    anchorRef: { default: null },
+    appsList: {},
+    showApplications: { type: Boolean, default: !0 }
   },
-  emits: ["close", "update:modelValue"],
+  emits: ["update:show", "switch-app"],
   setup(e, { emit: a }) {
-    const t = e, l = a, s = `vc-popup-title-${pt()?.uid ?? 0}`, i = de(nt, O(!1)), u = O(null), c = {
-      warning: { icon: "lucide-triangle-alert", className: "vc-popup__icon--warning" },
-      error: { icon: "lucide-circle-alert", className: "vc-popup__icon--error" },
-      success: { icon: "lucide-circle-check", className: "vc-popup__icon--success" },
-      info: { icon: "lucide-info", className: "vc-popup__icon--info" }
-    }, d = S(() => t.modelValue ?? !0), v = S(() => t.closeOnOverlay ?? t.closable), g = S(() => t.closeOnEscape ?? t.closable), f = S(() => t.variant === "default" ? "" : c[t.variant].icon), b = S(() => t.variant === "default" ? "" : c[t.variant].className), h = S(() => i.value && t.isMobileFullscreen);
-    function m(E) {
-      l("update:modelValue", !1), l("close", E);
-    }
-    function w() {
-      t.closable && m("action");
-    }
-    function k() {
-      u.value = "escape";
-    }
-    function $() {
-      const E = u.value ?? "overlay";
-      u.value = null, !(E === "overlay" && !v.value) && (E === "escape" && !g.value || m(E));
+    const t = e, l = a, { hideAllWidgets: r } = Vl(), s = S({
+      get: () => t.show,
+      set: (u) => {
+        l("update:show", u);
+      }
+    });
+    ne(
+      () => t.show,
+      (u) => {
+        u || r();
+      }
+    );
+    function i(u) {
+      l("switch-app", u), l("update:show", !1);
     }
-    return (E, _) => {
-      const M = Ne("VcIcon"), C = Ne("VcButton");
-      return o(), B(n(ir), {
-        appear: "",
-        show: d.value,
-        as: "template"
-      }, {
-        default: A(() => [
-          x(n(sr), {
-            as: "div",
-            class: "vc-popup",
-            "aria-labelledby": s,
-            onClose: $,
-            onKeydown: ge(k, ["esc"])
-          }, {
-            default: A(() => [
-              x(n(fn), {
-                as: "template",
-                enter: "vc-popup__transition-enter",
-                "enter-from": "vc-popup__transition-enter-from",
-                "enter-to": "vc-popup__transition-enter-to",
-                leave: "vc-popup__transition-leave",
-                "leave-from": "vc-popup__transition-leave-from",
-                "leave-to": "vc-popup__transition-leave-to"
-              }, {
-                default: A(() => [..._[0] || (_[0] = [
-                  y("div", { class: "vc-popup__overlay" }, null, -1)
-                ])]),
-                _: 1
-              }),
-              y("div", {
-                class: q(["vc-popup__container", {
-                  "vc-popup__container--desktop": !h.value,
-                  "vc-popup__container--mobile": h.value,
-                  "vc-popup__container--fullscreen": e.isFullscreen
-                }])
-              }, [
-                y("div", Rg, [
-                  x(n(fn), {
-                    as: "template",
-                    enter: "vc-popup__dialog-enter",
-                    "enter-from": "vc-popup__dialog-enter-from",
-                    "enter-to": "vc-popup__dialog-enter-to",
-                    leave: "vc-popup__dialog-leave",
-                    "leave-from": "vc-popup__dialog-leave-from",
-                    "leave-to": "vc-popup__dialog-leave-to"
-                  }, {
-                    default: A(() => [
-                      x(n(rr), {
-                        class: q(["vc-popup__panel", [
-                          {
-                            "vc-popup__panel--desktop": !h.value,
-                            "vc-popup__panel--mobile": h.value,
-                            "vc-popup__panel--fullscreen": e.isFullscreen
-                          },
-                          e.modalWidth
-                        ]])
-                      }, {
-                        default: A(() => [
-                          x(n(ur), {
-                            id: s,
-                            as: "h3",
-                            class: "vc-popup__title"
-                          }, {
-                            default: A(() => [
-                              V(E.$slots, "header", {}, () => [
-                                ie(D(e.title), 1)
-                              ]),
-                              e.closable ? (o(), p("button", {
-                                key: 0,
-                                type: "button",
-                                class: "vc-popup__close-btn",
-                                "aria-label": E.$t("COMPONENTS.ORGANISMS.VC_POPUP.CLOSE"),
-                                onClick: w
-                              }, [..._[1] || (_[1] = [
-                                y("svg", {
-                                  width: "12",
-                                  height: "12",
-                                  viewBox: "0 0 12 12",
-                                  fill: "none",
-                                  xmlns: "http://www.w3.org/2000/svg"
-                                }, [
-                                  y("path", {
-                                    d: "M7.27173 5.99939L11.1499 2.12967C11.3198 1.95981 11.4152 1.72943 11.4152 1.48922C11.4152 1.24901 11.3198 1.01863 11.1499 0.848777C10.9801 0.67892 10.7497 0.583496 10.5096 0.583496C10.2694 0.583496 10.0391 0.67892 9.86922 0.848777L6.00004 4.72752L2.13086 0.848777C1.96103 0.67892 1.73069 0.583496 1.49051 0.583496C1.25033 0.583496 1.01999 0.67892 0.850156 0.848777C0.680324 1.01863 0.584913 1.24901 0.584913 1.48922C0.584913 1.72943 0.680324 1.95981 0.850156 2.12967L4.72835 5.99939L0.850156 9.86912C0.765622 9.95298 0.698526 10.0527 0.652737 10.1627C0.606948 10.2726 0.583374 10.3905 0.583374 10.5096C0.583374 10.6286 0.606948 10.7465 0.652737 10.8565C0.698526 10.9664 0.765622 11.0662 0.850156 11.15C0.934 11.2346 1.03375 11.3017 1.14366 11.3475C1.25356 11.3933 1.37145 11.4168 1.49051 11.4168C1.60957 11.4168 1.72746 11.3933 1.83736 11.3475C1.94727 11.3017 2.04702 11.2346 2.13086 11.15L6.00004 7.27126L9.86922 11.15C9.95306 11.2346 10.0528 11.3017 10.1627 11.3475C10.2726 11.3933 10.3905 11.4168 10.5096 11.4168C10.6286 11.4168 10.7465 11.3933 10.8564 11.3475C10.9663 11.3017 11.0661 11.2346 11.1499 11.15C11.2345 11.0662 11.3016 10.9664 11.3473 10.8565C11.3931 10.7465 11.4167 10.6286 11.4167 10.5096C11.4167 10.3905 11.3931 10.2726 11.3473 10.1627C11.3016 10.0527 11.2345 9.95298 11.1499 9.86912L7.27173 5.99939Z",
-                                    fill: "currentColor"
-                                  })
-                                ], -1)
-                              ])], 8, Ig)) : R("", !0)
-                            ]),
-                            _: 3
-                          }),
-                          y("div", Tg, [
-                            e.variant !== "default" ? (o(), B(M, {
-                              key: 0,
-                              class: q(["vc-popup__icon", b.value]),
-                              icon: f.value
-                            }, null, 8, ["class", "icon"])) : R("", !0),
-                            y("div", {
-                              class: q(["vc-popup__content-inner", {
-                                "vc-popup__content-inner--grow": h.value
-                              }])
-                            }, [
-                              y("div", {
-                                class: q(["vc-popup__content-wrapper", { "vc-popup__content-wrapper--full": e.isFullscreen }])
-                              }, [
-                                V(E.$slots, "content")
-                              ], 2)
-                            ], 2)
-                          ]),
-                          E.$slots.footer ? (o(), p("div", xg, [
-                            V(E.$slots, "footer", { close: w }, () => [
-                              x(C, {
-                                class: "vc-popup__close-button",
-                                onClick: w
-                              }, {
-                                default: A(() => [
-                                  ie(D(E.$t("COMPONENTS.ORGANISMS.VC_POPUP.CLOSE")), 1)
-                                ]),
-                                _: 1
-                              })
-                            ])
-                          ])) : R("", !0)
-                        ]),
-                        _: 3
-                      }, 8, ["class"])
-                    ]),
-                    _: 3
-                  })
-                ])
-              ], 2)
+    return (u, c) => (o(), B(n($t), {
+      show: s.value,
+      "onUpdate:show": c[0] || (c[0] = (d) => s.value = d),
+      "anchor-ref": e.anchorRef,
+      placement: "right-start",
+      width: "560px",
+      "max-width": "calc(100vw - 24px)",
+      "max-height": 9999,
+      "content-scrollable": !1
+    }, {
+      default: A(() => [
+        x($a, {
+          "apps-list": e.appsList,
+          "show-applications": e.showApplications,
+          onSwitchApp: i
+        }, we({ _: 2 }, [
+          u.$slots.applications ? {
+            name: "applications",
+            fn: A((d) => [
+              V(u.$slots, "applications", Qe(Je(d)))
             ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["show"]);
-    };
+            key: "0"
+          } : void 0
+        ]), 1032, ["apps-list", "show-applications"])
+      ]),
+      _: 3
+    }, 8, ["show", "anchor-ref"]));
   }
-}), Ka = /* @__PURE__ */ U({
-  __name: "vc-popup-base",
+}), Up = { class: "vc-notification-template__content" }, Hp = { class: "vc-notification-template__time" }, Gp = {
+  key: 0,
+  class: "vc-notification-template__content-body"
+}, $n = 60, _n = 3600, Wp = 86400, qp = /* @__PURE__ */ U({
+  __name: "notification-template",
   props: {
     title: {},
-    variant: { default: "default" },
-    mode: { default: "acknowledge" },
-    actionLabel: { default: "" },
-    confirmLabel: { default: "" },
-    cancelLabel: { default: "" },
-    confirmAsText: { type: Boolean, default: !1 },
-    closable: { type: Boolean, default: !0 },
-    isMobileFullscreen: { type: Boolean, default: !0 },
-    closeOnConfirm: { type: Boolean, default: !1 }
+    notification: {},
+    icon: {},
+    color: {},
+    severity: {}
   },
-  emits: ["close", "confirm"],
+  emits: ["click"],
   setup(e, { emit: a }) {
-    const t = e, l = a;
-    function r(s) {
-      l("confirm"), t.closeOnConfirm && s();
-    }
-    return (s, i) => {
-      const u = Ne("VcButton");
-      return o(), B(qa, {
-        variant: e.variant,
-        "is-mobile-fullscreen": e.isMobileFullscreen,
-        title: e.title,
-        closable: e.closable,
-        onClose: i[0] || (i[0] = (c) => s.$emit("close"))
-      }, we({
-        content: A(() => [
-          V(s.$slots, "default")
-        ]),
-        footer: A(({ close: c }) => [
-          V(s.$slots, "footer", {
-            close: c,
-            confirm: () => r(c)
-          }, () => [
-            y("div", {
-              class: q(["vc-popup-base__actions", {
-                "vc-popup-base__actions--confirm": e.mode === "confirm",
-                "vc-popup-base__actions--single": e.mode === "acknowledge"
-              }])
-            }, [
-              e.mode === "confirm" ? (o(), p(ee, { key: 0 }, [
-                x(u, {
-                  text: e.confirmAsText,
-                  class: "vc-popup-base__confirm",
-                  onClick: (d) => r(c)
-                }, {
-                  default: A(() => [
-                    ie(D(e.confirmLabel), 1)
-                  ]),
-                  _: 1
-                }, 8, ["text", "onClick"]),
-                x(u, { onClick: c }, {
-                  default: A(() => [
-                    ie(D(e.cancelLabel), 1)
-                  ]),
-                  _: 1
-                }, 8, ["onClick"])
-              ], 64)) : (o(), B(u, {
-                key: 1,
-                class: "vc-popup-base__single",
-                onClick: c
+    const t = e, l = window.navigator.language, r = S(() => {
+      const s = t.notification.created;
+      if (!s) return "";
+      const i = s instanceof Date ? s : new Date(s);
+      if (Number.isNaN(i.getTime())) return "";
+      const u = Date.now(), c = Math.round((u - i.getTime()) / 1e3), d = Math.abs(c), v = new Intl.RelativeTimeFormat(l, { numeric: "auto" });
+      return d < $n ? v.format(-c, "second") : d < _n ? v.format(-Math.round(c / $n), "minute") : d < Wp ? v.format(-Math.round(c / _n), "hour") : new Intl.DateTimeFormat(l, {
+        dateStyle: "short",
+        timeStyle: "short"
+      }).format(i);
+    });
+    return (s, i) => (o(), p("div", {
+      class: "vc-notification-template",
+      onClick: i[0] || (i[0] = (u) => s.$emit("click"))
+    }, [
+      y("div", {
+        class: q(["vc-notification-template__container", {
+          "vc-notification-template__container--mobile": s.$isMobile.value
+        }])
+      }, [
+        y("div", {
+          class: "vc-notification-template__icon-container",
+          style: he({ backgroundColor: e.color ?? "var(--primary-500)" })
+        }, [
+          x(n(J), {
+            icon: e.icon ?? "lucide-bell",
+            size: "s"
+          }, null, 8, ["icon"])
+        ], 4),
+        y("div", Up, [
+          y("p", {
+            class: q(["vc-notification-template__title", { "vc-notification-template__title--desktop": s.$isDesktop.value }])
+          }, D(e.title), 3),
+          y("p", Hp, D(r.value), 1),
+          s.$slots.default ? (o(), p("div", Gp, [
+            V(s.$slots, "default")
+          ])) : R("", !0)
+        ])
+      ], 2)
+    ]));
+  }
+}), Kp = qp, Yp = { class: "vc-notification-item__content" }, jp = /* @__PURE__ */ U({
+  __name: "notification",
+  props: {
+    notification: {}
+  },
+  emits: ["onClick"],
+  setup(e, { emit: a }) {
+    const t = e, l = a, r = Tl(), s = S(() => {
+      const u = t.notification.notifyType;
+      if (u)
+        return r.registry.get(u)?.template;
+    });
+    Me(
+      ui,
+      S(() => t.notification)
+    );
+    const i = () => {
+      l("onClick", t.notification);
+    };
+    return (u, c) => {
+      const d = Ne("VcHint");
+      return o(), p("div", {
+        class: "vc-notification-item",
+        onClick: i
+      }, [
+        y("div", {
+          class: "vc-notification-item__unread-dot",
+          style: he({ visibility: e.notification.isNew ? "visible" : "hidden" })
+        }, null, 4),
+        y("div", Yp, [
+          s.value ? (o(), B(We(s.value), { key: 0 })) : (o(), B(n(Kp), {
+            key: 1,
+            title: e.notification.title ?? "",
+            notification: e.notification
+          }, {
+            default: A(() => [
+              e.notification.description ? (o(), B(d, {
+                key: 0,
+                class: "tw-mb-1"
               }, {
                 default: A(() => [
-                  ie(D(e.actionLabel), 1)
+                  ie(D(e.notification.description), 1)
                 ]),
                 _: 1
-              }, 8, ["onClick"]))
-            ], 2)
-          ])
+              })) : R("", !0)
+            ]),
+            _: 1
+          }, 8, ["title", "notification"]))
+        ])
+      ]);
+    };
+  }
+}), Xp = { class: "notification-dropdown" }, Qp = {
+  key: 1,
+  class: "tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-sm tw-text-[color:var(--neutrals-400)]"
+}, Jp = /* @__PURE__ */ U({
+  __name: "notification-dropdown",
+  setup(e) {
+    const a = Tl(), { t } = Ve({ useScope: "global" }), l = S(
+      () => [...a.history.value].sort(
+        (r, s) => new Date(s.created).getTime() - new Date(r.created).getTime()
+      )
+    );
+    return Ue(() => {
+      a.hasUnread.value && a.markAllAsRead();
+    }), (r, s) => (o(), p("div", Xp, [
+      l.value.length ? (o(), B(n(ft), {
+        key: 0,
+        class: "notification-dropdown__scroll"
+      }, {
+        default: A(() => [
+          (o(!0), p(ee, null, me(l.value, (i) => (o(), p("div", {
+            key: i.id
+          }, [
+            x(jp, { notification: i }, null, 8, ["notification"])
+          ]))), 128))
         ]),
-        _: 2
+        _: 1
+      })) : (o(), p("div", Qp, D(n(t)("COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY")), 1))
+    ]));
+  }
+}), ko = Jp, Zp = /* @__PURE__ */ U({
+  __name: "DesktopLayout",
+  props: {
+    logo: {},
+    title: {},
+    avatar: {},
+    userName: {},
+    userRole: {},
+    disableMenu: { type: Boolean, default: !1 },
+    disableAppSwitcher: { type: Boolean, default: !1 },
+    appsList: { default: () => [] },
+    showSearch: { type: Boolean, default: !1 },
+    searchPlaceholder: {}
+  },
+  emits: ["logo:click", "item:click", "switch-app"],
+  setup(e, { emit: a }) {
+    const t = a, l = Fa(), r = de(ll, !1), s = Dt(), i = O(null), u = O(!1), c = O(null), d = S(() => !r);
+    ne(
+      () => s.fullPath,
+      () => {
+        l.isMenuOpen.value && l.closeMenu(), u.value = !1;
+      }
+    );
+    const v = (h) => {
+      if (h.currentTarget instanceof HTMLElement && (i.value = h.currentTarget), l.isMenuOpen.value) {
+        l.closeMenu();
+        return;
+      }
+      u.value = !1, l.openMenu();
+    }, g = (h) => {
+      h.currentTarget instanceof HTMLElement && (c.value = h.currentTarget), u.value = !u.value, u.value && l.isMenuOpen.value && l.closeMenu();
+    }, f = (h) => {
+      if (!h) {
+        l.closeMenu();
+        return;
+      }
+      !i.value && typeof document < "u" && (i.value = document.querySelector(".sidebar-header__menu-button")), l.openMenu();
+    }, b = (h) => {
+      l.closeMenu(), t("switch-app", h);
+    };
+    return (h, m) => (o(), p(ee, null, [
+      y("div", {
+        class: q(["desktop-layout__spacer", {
+          "desktop-layout__spacer--expanded": n(l).isPinned.value
+        }])
+      }, null, 2),
+      y("div", {
+        class: q(["desktop-layout", {
+          "desktop-layout--collapsed": !n(l).isPinned.value
+        }])
       }, [
-        s.$slots.header ? {
-          name: "header",
-          fn: A(() => [
-            V(s.$slots, "header")
+        y("div", {
+          class: q(["desktop-layout__wrap", {
+            "desktop-layout__wrap--collapsed": !n(l).isPinned.value,
+            "desktop-layout__wrap--expanded": n(l).isPinned.value
+          }])
+        }, [
+          He(x(sp, {
+            collapsed: !n(l).isPinned.value,
+            onClick: n(l).togglePin
+          }, null, 8, ["collapsed", "onClick"]), [
+            [Bt, !n(l).isMenuOpen.value]
+          ]),
+          V(h.$slots, "sidebar-header", {
+            logo: e.logo,
+            expanded: n(l).isExpanded.value,
+            isMobile: !1
+          }, () => [
+            d.value ? (o(), B(ao, {
+              key: 0,
+              logo: e.logo,
+              expanded: n(l).isExpanded.value,
+              "show-burger": n(l).isExpanded.value,
+              "is-menu-open": n(l).isMenuOpen.value,
+              "is-notifications-open": u.value,
+              class: "desktop-layout__header",
+              "onLogo:click": m[0] || (m[0] = (w) => h.$emit("logo:click")),
+              onToggleMenu: v,
+              onToggleNotifications: g
+            }, null, 8, ["logo", "expanded", "show-burger", "is-menu-open", "is-notifications-open"])) : R("", !0)
+          ]),
+          x(op, {
+            expanded: n(l).isExpanded.value,
+            avatar: e.avatar,
+            "user-name": e.userName,
+            "user-role": e.userRole,
+            "disable-menu": e.disableMenu,
+            "header-visible": d.value,
+            "show-search": e.showSearch,
+            "search-placeholder": e.searchPlaceholder,
+            "onItem:click": m[1] || (m[1] = (w) => h.$emit("item:click", w))
+          }, we({ _: 2 }, [
+            h.$slots.menu ? {
+              name: "menu",
+              fn: A((w) => [
+                V(h.$slots, "menu", Qe(Je(w)))
+              ]),
+              key: "0"
+            } : void 0,
+            h.$slots["sidebar-footer"] ? {
+              name: "sidebar-footer",
+              fn: A((w) => [
+                V(h.$slots, "sidebar-footer", Qe(Je(w)))
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["expanded", "avatar", "user-name", "user-role", "disable-menu", "header-visible", "show-search", "search-placeholder"])
+        ], 2)
+      ], 2),
+      x(zp, {
+        show: n(l).isMenuOpen.value,
+        "anchor-ref": i.value,
+        "apps-list": e.appsList,
+        "show-applications": !e.disableAppSwitcher,
+        "onUpdate:show": f,
+        onSwitchApp: b
+      }, we({ _: 2 }, [
+        h.$slots["app-switcher"] && !e.disableAppSwitcher ? {
+          name: "applications",
+          fn: A(({ appsList: w, switchApp: k }) => [
+            V(h.$slots, "app-switcher", {
+              appsList: w,
+              switchApp: k
+            })
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["variant", "is-mobile-fullscreen", "title", "closable"]);
-    };
+      ]), 1032, ["show", "anchor-ref", "apps-list", "show-applications"]),
+      x(n($t), {
+        show: u.value,
+        "onUpdate:show": m[2] || (m[2] = (w) => u.value = w),
+        "anchor-ref": c.value,
+        placement: "right-start",
+        width: "320px",
+        "content-scrollable": !1
+      }, {
+        default: A(() => [
+          x(n(ko))
+        ]),
+        _: 1
+      }, 8, ["show", "anchor-ref"])
+    ], 64));
   }
-}), Mg = /* @__PURE__ */ U({
-  __name: "vc-popup-warning",
+});
+function eg() {
+  const e = O([]), a = S(() => e.value), t = (i) => {
+    const u = e.value.findIndex((c) => c.id === i.id);
+    u >= 0 ? e.value[u] = i : e.value.push(i);
+  }, l = (i) => {
+    e.value = e.value.filter((u) => u.id !== i);
+  }, r = (i) => e.value.find((u) => u.id === i), s = S(
+    () => [...e.value].filter((i) => Te(i.isVisible) !== !1).sort((i, u) => (i.order || 0) - (u.order || 0))
+  );
+  return {
+    registeredButtons: a,
+    register: t,
+    unregister: l,
+    getButton: r,
+    getButtons: s
+  };
+}
+const tg = Ye("use-app-bar-mobile-buttons");
+function lg() {
+  const e = de(ya, null);
+  if (e)
+    return e;
+  const a = eg();
+  return Me(ya, a), kt() && mt(() => {
+  }), a;
+}
+function So() {
+  const e = de(ya);
+  if (!e)
+    throw tg.error("AppBarMobileButtonsService not found"), new Ct("AppBarMobileButtonsService");
+  return e;
+}
+function ag() {
+  const { getButtons: e } = So(), { activeMobileActionId: a } = wo(), {
+    showItem: t,
+    hideAllItems: l,
+    toggleItem: r,
+    currentItem: s,
+    isAnyItemVisible: i,
+    closeItem: u
+  } = ho(e, a);
+  return ne(
+    () => e.value,
+    (c) => {
+      if (a.value && !c.some((v) => v.id === a.value)) {
+        const v = s.value;
+        v?.onClose && v.onClose(), l();
+      }
+    },
+    { deep: !0 }
+  ), {
+    showAction: t,
+    hideAllActions: l,
+    toggleAction: r,
+    currentAction: s,
+    isAnyActionVisible: i,
+    closeAction: u
+  };
+}
+const ng = {
+  key: 0,
+  class: "app-bar-mobile-actions"
+}, og = {
+  key: 1,
+  class: "app-bar-mobile-actions__badge"
+}, ig = /* @__PURE__ */ U({
+  __name: "AppBarMobileActions",
   props: {
-    title: {}
+    isSidebarMode: { type: Boolean },
+    expanded: {}
   },
-  emits: ["close", "confirm"],
   setup(e) {
-    return (a, t) => (o(), B(Ka, {
-      variant: "warning",
-      mode: "confirm",
-      "confirm-label": a.$t("COMPONENTS.ORGANISMS.VC_POPUP.CONFIRM"),
-      "cancel-label": a.$t("COMPONENTS.ORGANISMS.VC_POPUP.CANCEL"),
-      "confirm-as-text": "",
-      title: e.title,
-      onClose: t[0] || (t[0] = (l) => a.$emit("close")),
-      onConfirm: t[1] || (t[1] = (l) => a.$emit("confirm"))
-    }, we({
+    const a = e, { getButtons: t } = So(), { currentAction: l, toggleAction: r, hideAllActions: s, isAnyActionVisible: i } = ag(), u = Dt(), c = (g) => {
+      if (l.value?.id === g.id) {
+        g.onClose?.(), s();
+        return;
+      }
+      l.value && l.value.onClose?.(), r(g.id), !g.component && g.onClick && g.onClick();
+    }, d = (g) => {
+      l.value?.onClose?.(), s();
+    };
+    function v(g) {
+      return g.badge === void 0 ? !1 : !!Te(g.badge);
+    }
+    return ne([() => u.fullPath, () => a.isSidebarMode], () => {
+      s();
+    }), (g, f) => g.$isMobile.value ? (o(), p("div", ng, [
+      (o(!0), p(ee, null, me(n(t), (b) => (o(), p("div", {
+        key: b.id,
+        class: "app-bar-mobile-actions__button-wrap"
+      }, [
+        b.isVisible === void 0 || b.isVisible ? (o(), B(n(Oe), {
+          key: 0,
+          text: "",
+          class: q(["app-bar-mobile-actions__button", { "app-bar-mobile-actions__button--active": b.id === n(l)?.id }]),
+          icon: b.icon,
+          "icon-size": "l",
+          onClick: (h) => c(b)
+        }, null, 8, ["class", "icon", "onClick"])) : R("", !0),
+        v(b) ? (o(), p("span", og)) : R("", !0)
+      ]))), 128)),
+      x(n(Nt), {
+        "model-value": n(i) && !!n(l)?.component,
+        position: "bottom",
+        size: "sm",
+        draggable: "",
+        "drag-handle": "",
+        "close-button": !1,
+        inset: !1,
+        "onUpdate:modelValue": f[1] || (f[1] = (b) => !b && d())
+      }, {
+        default: A(() => [
+          n(l)?.component ? (o(), B(We(n(l)?.component), Se({ key: 0 }, n(l)?.props || {}, {
+            onClose: f[0] || (f[0] = (b) => d())
+          }), null, 16)) : R("", !0)
+        ]),
+        _: 1
+      }, 8, ["model-value"])
+    ])) : R("", !0);
+  }
+}), sg = { class: "menu-sidebar__widgets" }, rg = {
+  key: 0,
+  class: "menu-sidebar__close-button"
+}, ug = {
+  key: 0,
+  class: "menu-sidebar__content-main"
+}, dg = { class: "menu-sidebar__navmenu-container" }, cg = { class: "menu-sidebar__user" }, vg = {
+  key: 2,
+  class: "menu-sidebar__app-switcher-wrapper"
+}, fg = /* @__PURE__ */ U({
+  __name: "MenuSidebar",
+  props: {
+    isOpened: { type: Boolean },
+    expanded: {}
+  },
+  emits: ["update:is-opened"],
+  setup(e, { emit: a }) {
+    const t = e, l = a, r = de(ll, !1), s = de(nt, O(!1)), i = de(tl, O(!1)), u = ct(), c = S(() => !r && (i.value || !!u.widgets)), d = S(() => s.value ? Nt : "div"), v = S(() => s.value ? {
+      modelValue: t.isOpened,
+      position: "left",
+      closeButton: !1,
+      "onUpdate:modelValue": (g) => {
+        g || l("update:is-opened", !1);
+      }
+    } : {});
+    return (g, f) => (o(), B(We(d.value), Qe(Je(v.value)), {
       default: A(() => [
-        V(a.$slots, "default")
+        y("div", {
+          class: q(["menu-sidebar__wrapper", {
+            "menu-sidebar__wrapper--desktop": n(i),
+            "menu-sidebar__wrapper--expanded": n(i) && e.expanded
+          }])
+        }, [
+          c.value ? (o(), p("div", {
+            key: 0,
+            class: q(["menu-sidebar__header", {
+              "menu-sidebar__header--mobile": n(s)
+            }])
+          }, [
+            y("div", sg, [
+              V(g.$slots, "widgets")
+            ]),
+            f[1] || (f[1] = y("div", { class: "menu-sidebar__spacer" }, null, -1)),
+            n(i) ? (o(), p("div", rg, [
+              x(n(Oe), {
+                "icon-class": "menu-sidebar__close-button-icon",
+                icon: "lucide-x",
+                text: "",
+                onClick: f[0] || (f[0] = le((b) => g.$emit("update:is-opened", !1), ["stop"]))
+              })
+            ])) : R("", !0)
+          ], 2)) : R("", !0),
+          y("div", {
+            class: q(["menu-sidebar__content", { "menu-sidebar__content--without-header": !c.value }])
+          }, [
+            g.$slots["widgets-active-content"] ? (o(), p("div", ug, [
+              V(g.$slots, "widgets-active-content")
+            ])) : R("", !0),
+            n(s) ? (o(), p(ee, { key: 1 }, [
+              y("div", dg, [
+                V(g.$slots, "navmenu")
+              ]),
+              y("div", cg, [
+                V(g.$slots, "user-dropdown")
+              ])
+            ], 64)) : (o(), p("div", vg, [
+              V(g.$slots, "app-switcher")
+            ]))
+          ], 2)
+        ], 2)
       ]),
-      _: 2
-    }, [
-      a.$slots.header ? {
-        name: "header",
-        fn: A(() => [
-          V(a.$slots, "header")
-        ]),
-        key: "0"
-      } : void 0
-    ]), 1032, ["confirm-label", "cancel-label", "title"]));
+      _: 3
+    }, 16));
   }
-}), Og = /* @__PURE__ */ U({
-  __name: "vc-popup-error",
+}), mg = {
+  key: 0,
+  class: "mobile-layout"
+}, pg = {
+  class: "mobile-layout__tabs",
+  role: "tablist"
+}, gg = ["aria-selected"], bg = { class: "mobile-layout__tab-label" }, hg = ["aria-selected"], yg = { class: "mobile-layout__tab-label" }, wg = {
+  key: 0,
+  class: "mobile-layout__tab-badge"
+}, kg = {
+  id: "mobile-layout-panel-menu",
+  role: "tabpanel",
+  class: "mobile-layout__panel mobile-layout__panel--menu"
+}, Sg = {
+  key: 0,
+  class: "mobile-layout__search"
+}, Cg = {
+  id: "mobile-layout-panel-hub",
+  role: "tabpanel",
+  class: "mobile-layout__panel mobile-layout__panel--hub"
+}, $g = {
+  key: 1,
+  class: "mobile-layout__panel mobile-layout__panel--single mobile-layout__panel--hub"
+}, _g = {
+  key: 2,
+  class: "mobile-layout__panel mobile-layout__panel--single mobile-layout__panel--menu"
+}, Eg = {
+  key: 0,
+  class: "mobile-layout__search"
+}, st = 0, Ht = 1, En = 8, Ag = 0.3, Rg = 0.3, Ig = 1, Tg = 0.2, An = "transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)", xg = /* @__PURE__ */ U({
+  __name: "MobileLayout",
   props: {
-    title: {}
+    logo: {},
+    title: {},
+    avatar: {},
+    userName: {},
+    userRole: {},
+    disableMenu: { type: Boolean, default: !1 },
+    disableAppSwitcher: { type: Boolean, default: !1 },
+    appsList: { default: () => [] },
+    showSearch: { type: Boolean, default: !1 },
+    searchPlaceholder: {}
   },
-  emits: ["close"],
-  setup(e) {
-    return (a, t) => (o(), B(Ka, {
-      variant: "error",
-      mode: "acknowledge",
-      "action-label": a.$t("COMPONENTS.ORGANISMS.VC_POPUP.OK"),
-      title: e.title,
-      onClose: t[0] || (t[0] = (l) => a.$emit("close"))
-    }, we({
-      default: A(() => [
-        V(a.$slots, "default")
-      ]),
-      _: 2
-    }, [
-      a.$slots.header ? {
-        name: "header",
-        fn: A(() => [
-          V(a.$slots, "header")
+  emits: ["item:click", "switch-app"],
+  setup(e, { emit: a }) {
+    const t = e, l = a, r = O(""), s = Fa(), i = de(ll, !1), { blades: u, activeBlade: c } = Aa(), { items: d } = Bl(), v = S(
+      () => d.value.some((X) => X.badge === void 0 ? !1 : typeof X.badge == "function" ? X.badge() : !!X.badge)
+    ), g = S(
+      () => d.value.length > 0 || !t.disableAppSwitcher && t.appsList.length > 0
+    ), f = S(() => g.value && !t.disableMenu), b = O(st), h = O(!1), m = O(0), w = O(null), k = O("idle");
+    let $ = 0, E = 0, _ = 0, M = 0;
+    const C = S(() => {
+      const X = b.value * -50, Y = w.value?.clientWidth ?? 0;
+      if (h.value && Y > 0) {
+        const ue = m.value / Y * 50;
+        return {
+          transform: `translateX(${X + ue}%)`,
+          transition: "none"
+        };
+      }
+      return {
+        transform: `translateX(${X}%)`,
+        transition: An
+      };
+    }), L = S(() => {
+      const X = w.value?.clientWidth ?? 0, Y = h.value && X > 0 ? -m.value / X : 0;
+      return {
+        transform: `translateX(${Math.max(0, Math.min(1, b.value + Y)) * 100}%)`,
+        transition: h.value ? "none" : An
+      };
+    });
+    function T(X) {
+      b.value = Math.max(st, Math.min(Ht, X)), I();
+    }
+    function I() {
+      m.value = 0, h.value = !1, k.value = "idle";
+    }
+    function G(X, Y) {
+      const ue = Math.abs(X);
+      if (!ue || !Y)
+        return 0;
+      const Q = ue * Y / (ue + Y);
+      return Math.sign(X) * Q;
+    }
+    function N(X) {
+      const Y = w.value?.clientWidth ?? 0;
+      if (!Y)
+        return X;
+      const ue = b.value === st && X > 0, Q = b.value === Ht && X < 0;
+      if (ue || Q)
+        return G(X, Y * Tg);
+      const j = Y * Ig;
+      return Math.max(-j, Math.min(j, X));
+    }
+    function P(X) {
+      if (!f.value || X.touches.length === 0)
+        return;
+      const Y = X.touches[0];
+      $ = Y.clientX, E = Y.clientY, _ = Y.clientX, M = Date.now(), m.value = 0, h.value = !1, k.value = "pending";
+    }
+    function W(X) {
+      if (!f.value || X.touches.length === 0 || k.value === "idle")
+        return;
+      const Y = X.touches[0], ue = Y.clientX - $, Q = Y.clientY - E, j = Math.abs(ue), ke = Math.abs(Q);
+      if (k.value === "pending") {
+        if (j < En && ke < En)
+          return;
+        if (ke > j) {
+          k.value = "vertical";
+          return;
+        }
+        k.value = "horizontal", h.value = !0;
+      }
+      k.value === "horizontal" && (X.cancelable && X.preventDefault(), _ = Y.clientX, m.value = N(ue));
+    }
+    function F(X) {
+      if (!f.value) {
+        I();
+        return;
+      }
+      const Y = X.changedTouches[0];
+      if (k.value !== "horizontal") {
+        I();
+        return;
+      }
+      const Q = (Y?.clientX ?? _) - $, j = Math.max(Date.now() - M, 1), ke = Math.abs(Q) / j, Z = (w.value?.clientWidth ?? 0) * Ag;
+      if (ke > Rg || Math.abs(Q) > Z) {
+        if (Q < 0) {
+          T(b.value + 1);
+          return;
+        }
+        if (Q > 0) {
+          T(b.value - 1);
+          return;
+        }
+      }
+      I();
+    }
+    ne(
+      () => s.isMenuOpen.value,
+      (X) => {
+        X || (T(st), r.value = "");
+      }
+    ), ne(g, (X) => {
+      X || T(st);
+    }), ne(f, (X) => {
+      X || T(st);
+    });
+    const K = S(() => u.value.length <= 1), z = S(() => {
+      const X = c.value?.title, Y = u.value[u.value.length - 1]?.title;
+      return X ?? Y ?? "";
+    });
+    ne(K, (X) => {
+      !X && s.isMenuOpen.value && s.closeMenu();
+    });
+    const te = (X) => {
+      r.value = "", s.closeMenu(), l("item:click", X);
+    }, ve = (X) => {
+      s.closeMenu(), l("switch-app", X);
+    };
+    return (X, Y) => (o(), p(ee, null, [
+      K.value ? (o(), p("div", mg, [
+        V(X.$slots, "sidebar-header", {
+          logo: e.logo,
+          expanded: !1,
+          isMobile: !0
+        }, () => [
+          x(ao, {
+            logo: e.logo,
+            expanded: !1,
+            "is-mobile": !0,
+            "mobile-title": z.value,
+            "show-mobile-title": n(u).length === 1,
+            class: "mobile-layout__header",
+            "onLogo:click": n(s).openMenu
+          }, {
+            actions: A(() => [
+              x(ig, {
+                "is-sidebar-mode": n(s).isMenuOpen.value,
+                expanded: !1
+              }, null, 8, ["is-sidebar-mode"])
+            ]),
+            _: 1
+          }, 8, ["logo", "mobile-title", "show-mobile-title", "onLogo:click"])
+        ])
+      ])) : R("", !0),
+      x(fg, {
+        "is-opened": n(s).isMenuOpen.value,
+        expanded: !0,
+        "onUpdate:isOpened": Y[4] || (Y[4] = (ue) => !ue && n(s).closeMenu())
+      }, {
+        navmenu: A(() => [
+          y("div", {
+            class: q(["mobile-layout__navmenu", { "mobile-layout__navmenu--tabs": f.value }])
+          }, [
+            f.value ? (o(), p(ee, { key: 0 }, [
+              y("div", pg, [
+                y("button", {
+                  type: "button",
+                  class: q(["mobile-layout__tab", { "mobile-layout__tab--active": b.value === st }]),
+                  role: "tab",
+                  "aria-selected": b.value === st,
+                  "aria-controls": "mobile-layout-panel-menu",
+                  onClick: Y[0] || (Y[0] = (ue) => T(st))
+                }, [
+                  y("span", bg, D(X.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.MOBILE_LAYOUT.TAB_MENU")), 1)
+                ], 10, gg),
+                y("button", {
+                  type: "button",
+                  class: q(["mobile-layout__tab", { "mobile-layout__tab--active": b.value === Ht }]),
+                  role: "tab",
+                  "aria-selected": b.value === Ht,
+                  "aria-controls": "mobile-layout-panel-hub",
+                  onClick: Y[1] || (Y[1] = (ue) => T(Ht))
+                }, [
+                  y("span", yg, [
+                    ie(D(X.$t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.MOBILE_LAYOUT.TAB_HUB")) + " ", 1),
+                    v.value ? (o(), p("span", wg)) : R("", !0)
+                  ])
+                ], 10, hg),
+                y("span", {
+                  class: "mobile-layout__tab-indicator",
+                  style: he(L.value)
+                }, null, 4)
+              ]),
+              y("div", {
+                ref_key: "sliderViewportRef",
+                ref: w,
+                class: "mobile-layout__slider-viewport",
+                onTouchstartPassive: P,
+                onTouchmove: W,
+                onTouchendPassive: F,
+                onTouchcancelPassive: F
+              }, [
+                y("div", {
+                  class: "mobile-layout__slider",
+                  style: he(C.value)
+                }, [
+                  y("div", kg, [
+                    e.showSearch ? (o(), p("div", Sg, [
+                      x(n(Be), {
+                        modelValue: r.value,
+                        "onUpdate:modelValue": Y[2] || (Y[2] = (ue) => r.value = ue),
+                        placeholder: t.searchPlaceholder || X.$t("SHELL.SIDEBAR.SEARCH_PLACEHOLDER", "Search keyword"),
+                        size: "small",
+                        clearable: "",
+                        debounce: 300
+                      }, null, 8, ["modelValue", "placeholder"])
+                    ])) : R("", !0),
+                    x(n(ft), { class: "mobile-layout__menu-scroll" }, {
+                      default: A(() => [
+                        V(X.$slots, "menu", {
+                          expanded: !0,
+                          onItemClick: te,
+                          searchQuery: r.value
+                        }, () => [
+                          x(Ca, {
+                            expanded: !0,
+                            "search-query": r.value,
+                            "onItem:click": te
+                          }, null, 8, ["search-query"])
+                        ])
+                      ]),
+                      _: 3
+                    })
+                  ]),
+                  y("div", Cg, [
+                    x($a, {
+                      "apps-list": t.appsList,
+                      "show-applications": !t.disableAppSwitcher,
+                      mobile: "",
+                      onSwitchApp: ve
+                    }, we({ _: 2 }, [
+                      X.$slots["app-switcher"] && !t.disableAppSwitcher ? {
+                        name: "applications",
+                        fn: A(({ appsList: ue, switchApp: Q }) => [
+                          V(X.$slots, "app-switcher", {
+                            appsList: ue,
+                            switchApp: Q
+                          })
+                        ]),
+                        key: "0"
+                      } : void 0
+                    ]), 1032, ["apps-list", "show-applications"])
+                  ])
+                ], 4)
+              ], 544)
+            ], 64)) : t.disableMenu ? (o(), p("div", $g, [
+              x($a, {
+                "apps-list": t.appsList,
+                "show-applications": !t.disableAppSwitcher,
+                mobile: "",
+                onSwitchApp: ve
+              }, we({ _: 2 }, [
+                X.$slots["app-switcher"] && !t.disableAppSwitcher ? {
+                  name: "applications",
+                  fn: A(({ appsList: ue, switchApp: Q }) => [
+                    V(X.$slots, "app-switcher", {
+                      appsList: ue,
+                      switchApp: Q
+                    })
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["apps-list", "show-applications"])
+            ])) : (o(), p("div", _g, [
+              e.showSearch ? (o(), p("div", Eg, [
+                x(n(Be), {
+                  modelValue: r.value,
+                  "onUpdate:modelValue": Y[3] || (Y[3] = (ue) => r.value = ue),
+                  placeholder: t.searchPlaceholder || X.$t("SHELL.SIDEBAR.SEARCH_PLACEHOLDER", "Search keyword"),
+                  size: "small",
+                  clearable: "",
+                  debounce: 300
+                }, null, 8, ["modelValue", "placeholder"])
+              ])) : R("", !0),
+              x(n(ft), { class: "mobile-layout__menu-scroll" }, {
+                default: A(() => [
+                  V(X.$slots, "menu", {
+                    expanded: !0,
+                    onItemClick: te,
+                    searchQuery: r.value
+                  }, () => [
+                    x(Ca, {
+                      expanded: !0,
+                      "search-query": r.value,
+                      "onItem:click": te
+                    }, null, 8, ["search-query"])
+                  ])
+                ]),
+                _: 3
+              })
+            ]))
+          ], 2)
         ]),
-        key: "0"
-      } : void 0
-    ]), 1032, ["action-label", "title"]));
-  }
-}), Lg = /* @__PURE__ */ U({
-  __name: "vc-popup-info",
-  props: {
-    title: {}
-  },
-  emits: ["close"],
-  setup(e) {
-    return (a, t) => (o(), B(Ka, {
-      variant: "info",
-      mode: "acknowledge",
-      "action-label": a.$t("COMPONENTS.ORGANISMS.VC_POPUP.OK"),
-      title: e.title,
-      onClose: t[0] || (t[0] = (l) => a.$emit("close"))
-    }, we({
-      default: A(() => [
-        V(a.$slots, "default")
-      ]),
-      _: 2
-    }, [
-      a.$slots.header ? {
-        name: "header",
-        fn: A(() => [
-          V(a.$slots, "header")
+        "user-dropdown": A(() => [
+          V(X.$slots, e.userName, {
+            avatar: e.avatar,
+            role: e.userRole
+          }, () => [
+            n(i) ? R("", !0) : (o(), B(n(bo), {
+              key: 0,
+              "avatar-url": e.avatar,
+              name: e.userName,
+              role: e.userRole
+            }, null, 8, ["avatar-url", "name", "role"]))
+          ])
         ]),
-        key: "0"
-      } : void 0
-    ]), 1032, ["action-label", "title"]));
+        _: 3
+      }, 8, ["is-opened"])
+    ], 64));
   }
 });
-function An() {
-  return pt() && de(Wa, void 0) || ko;
+function Mg() {
+  if (pt())
+    return de(Wa, void 0);
 }
-function So(e) {
-  const { t: a } = Ve({ useScope: "global" }), t = An();
-  let l;
-  e && (l = b(n(e))), ne(
-    () => e ? n(e) : void 0,
-    (h) => {
-      h && (l = b(h));
-    },
-    { deep: !0 }
-  );
-  function r(h) {
-    if (!h)
-      return;
-    const m = An(), w = m?.popups?.findIndex(
-      (k) => or(k, h, ($) => $.component)
-    );
-    typeof w == "number" && w !== -1 && m?.popups?.splice(w, 1);
-  }
-  function s(h) {
-    return l ?? h;
-  }
-  function i(h) {
-    h && (r(h), t?.popups?.push(h));
-  }
-  async function u(h) {
-    await Ee(), i(s(h));
-  }
-  function c(h) {
-    const m = s(h);
-    if (!m)
-      return;
-    const w = t?.popups.indexOf(m);
-    typeof w == "number" && w !== -1 && t?.popups?.splice(w, 1);
-  }
-  function d(h, m, w) {
-    const k = b({
-      component: h,
-      props: {
-        title: m
-      },
-      emits: {
-        onClose() {
-          c(k);
-        }
-      },
-      slots: {
-        default: w
-      }
-    });
-    return i(k), k;
-  }
-  function v(h) {
-    return new Promise((m) => {
-      const w = b({
-        component: Mg,
-        props: {
-          title: a("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.CONFIRMATION")
-        },
-        emits: {
-          onClose() {
-            m(!1), c(w);
-          },
-          onConfirm() {
-            m(!0), c(w);
-          }
-        },
-        slots: {
-          default: h
-        }
+const Og = ["innerHTML"], Lg = /* @__PURE__ */ U({
+  __name: "vc-popup-container",
+  setup(e) {
+    const a = Mg();
+    function t(l) {
+      return xl.sanitize(l, {
+        ALLOWED_TAGS: [
+          "p",
+          "br",
+          "strong",
+          "em",
+          "u",
+          "s",
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6",
+          "ul",
+          "ol",
+          "li",
+          "blockquote",
+          "pre",
+          "code",
+          "a",
+          "img",
+          "table",
+          "thead",
+          "tbody",
+          "tr",
+          "th",
+          "td",
+          "hr",
+          "div",
+          "span"
+        ],
+        ALLOWED_ATTR: ["href", "src", "alt", "title", "class", "id", "colspan", "rowspan", "align", "valign"],
+        FORBID_TAGS: ["script", "object", "embed", "form", "input"],
+        FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover", "onfocus", "onblur", "style"]
       });
-      i(w);
-    });
-  }
-  function g(h) {
-    d(Og, a("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.ERROR"), h);
-  }
-  function f(h) {
-    d(Lg, a("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.INFO"), h);
-  }
-  function b(h) {
-    const m = xt({
-      ...Bg(h),
-      id: Symbol("vc-popup-instance"),
-      close: () => {
-      },
-      open: () => {
-      }
-    });
-    return m.close = () => c(m), m.open = () => u(m), m;
+    }
+    return (l, r) => (o(!0), p(ee, null, me(n(a)?.popups, (s, i) => (o(), B(We(s.component), Se({
+      key: s.id ?? i
+    }, { ref_for: !0 }, { ...s.props, ...s.emits }, {
+      onClose: () => s.close?.()
+    }), we({ _: 2 }, [
+      me(s.slots, (u, c) => ({
+        name: c,
+        fn: A(() => [
+          typeof u == "string" ? (o(), p("div", {
+            key: 0,
+            class: "tw-h-full tw-w-full",
+            innerHTML: t(u)
+          }, null, 8, Og)) : (o(), B(We(u), { key: 1 }))
+        ])
+      }))
+    ]), 1040, ["onClose"]))), 128));
   }
-  return {
-    open: u,
-    close: c,
-    showConfirmation: v,
-    showError: g,
-    showInfo: f
-  };
-}
-function Bg(e) {
-  const a = typeof e.slots > "u" ? {} : Object.fromEntries(
-    Object.entries(e.slots).map(([t, l]) => typeof l == "string" ? [t, l] : [t, Yt(l)])
-  );
-  return {
-    ...e,
-    slots: a,
-    component: Yt(ni(e.component))
-  };
-}
+}), Bg = Lg;
 function Vg() {
   const e = O({}), a = O({});
   return {
@@ -10281,7 +10282,7 @@ const Ng = { class: "vc-menu-item__content" }, Pg = { class: "vc-menu-item__titl
 }), Xg = jg, Qg = /* @__PURE__ */ U({
   __name: "change-password-button",
   setup(e) {
-    const { open: a } = So({ component: Xg }), t = de(Ea, void 0), l = () => {
+    const { open: a } = mo({ component: Xg }), t = de(Ea, void 0), l = () => {
       t?.(), a();
     };
     return (r, s) => (o(), B(n(Dl), {
@@ -10309,7 +10310,7 @@ const Ng = { class: "vc-menu-item__content" }, Pg = { class: "vc-menu-item__titl
   }
 });
 function Zg(e) {
-  const a = de(Cl), t = Yp();
+  const a = de(Cl), t = lg();
   Dg(), ym(), Me(ll, e.isEmbedded), e.internalRoutes && Me(di, e.internalRoutes), e.dynamicModules !== void 0 && Me(Fn, e.dynamicModules), e.aiAgentConfig?.url && ci({
     config: e.aiAgentConfig,
     addGlobalToolbarButton: e.aiAgentAddGlobalToolbarButton ?? !0,
@@ -10324,7 +10325,7 @@ function eb(e) {
   const a = Tl();
   e.isEmbedded || e.registerMobileButton({
     id: "notifications",
-    component: yo,
+    component: ko,
     icon: "lucide-bell",
     order: 10,
     isVisible: !0,
@@ -10416,7 +10417,7 @@ const ib = { class: "vc-app__main-content" }, sb = {
     const s = Dt().query.EmbeddedMode === "true", i = O();
     Me(zn, i);
     const u = tm();
-    tp();
+    up();
     const { isAppReady: c, isAuthenticated: d, appsList: v, switchApp: g } = ob(a), { handleMenuItemClick: f, openRoot: b } = lb(), h = de(gi), m = de(Fn, void 0), w = de("aiAgentConfig", void 0), k = de("aiAgentAddGlobalToolbarButton", !0), $ = de(bi, O(!1));
     return Zg({
       isEmbedded: s,
@@ -10448,7 +10449,7 @@ const ib = { class: "vc-app__main-content" }, sb = {
             openRoot: n(b),
             handleMenuItemClick: n(f)
           }, () => [
-            (o(), B(We(E.$isDesktop.value ? Wp : Cg), {
+            (o(), B(We(E.$isDesktop.value ? Zp : xg), {
               logo: e.logo,
               avatar: e.avatar,
               "user-name": e.name,
@@ -10502,7 +10503,7 @@ const ib = { class: "vc-app__main-content" }, sb = {
               n(w)?.url ? (o(), B(n(hi), { key: 1 })) : R("", !0)
             ])) : R("", !0)
           ]),
-          x(n(Ag))
+          x(n(Bg))
         ])
       ], 2)) : (o(), B(M, {
         key: 0,
@@ -12532,7 +12533,7 @@ const Mh = { class: "vc-widget-container-desktop" }, Oh = { class: "vc-widget-co
   }
 });
 function Eo(e) {
-  const a = O(0), { open: t } = So(
+  const a = O(0), { open: t } = mo(
     S(() => ({
       component: oy,
       props: {
@@ -19006,18 +19007,18 @@ const V1 = ["aria-busy"], D1 = {
 });
 export {
   OS as $,
-  Jp as A,
+  ig as A,
   cC as B,
   B1 as C,
-  kn as D,
+  Sn as D,
   Rn as E,
   vC as F,
-  Wp as G,
+  Zp as G,
   Ca as H,
-  og as I,
-  Cg as J,
-  Zm as K,
-  Qm as L,
+  fg as I,
+  xg as J,
+  sp as K,
+  op as L,
   ao as M,
   fC as N,
   $r as O,
@@ -19054,10 +19055,10 @@ export {
   Va as aG,
   FS as aH,
   $l as aI,
-  tp as aJ,
-  fo as aK,
-  jp as aL,
-  ho as aM,
+  up as aJ,
+  po as aK,
+  ag as aL,
+  wo as aM,
   Vl as aN,
   dC as aO,
   Ll as aP,
@@ -19067,7 +19068,7 @@ export {
   it as aT,
   Eo as aU,
   Uf as aV,
-  sC as aW,
+  rC as aW,
   Gr as aX,
   Zg as aY,
   ob as aZ,
@@ -19106,7 +19107,7 @@ export {
   C1 as b4,
   BS as b5,
   LS as b6,
-  go as b7,
+  ho as b7,
   SC as b8,
   Yn as b9,
   xr as bA,
@@ -19129,7 +19130,7 @@ export {
   mm as bR,
   em as bS,
   io as bT,
-  So as bU,
+  mo as bU,
   $m as bV,
   Fa as bW,
   _m as bX,
@@ -19141,18 +19142,18 @@ export {
   vo as bf,
   wm as bg,
   Sm as bh,
-  rC as bi,
+  sC as bi,
   Xg as bj,
   Qg as bk,
   _l as bl,
   Hg as bm,
   Jg as bn,
-  yo as bo,
-  Pp as bp,
-  mo as bq,
+  ko as bo,
+  Kp as bp,
+  go as bq,
   Dl as br,
   Gg as bs,
-  po as bt,
+  bo as bt,
   tC as bu,
   aC as bv,
   Ba as bw,