vlite3 1.0.4 → 1.0.6

package/components/Navbar/Navbar.vue.js

@@ -1,59 +1,59 @@
-import { defineComponent as _, computed as m, ref as w, provide as ee, useSlots as le, onMounted as se, onUnmounted as oe, watch as A, openBlock as r, createElementBlock as i, createVNode as f, Transition as W, withCtx as g, withDirectives as Y, createElementVNode as t, normalizeClass as n, renderSlot as s, createCommentVNode as u, vShow as q, unref as c, createTextVNode as P, normalizeStyle as te, Fragment as x, createBlock as G } from "vue";
-import { useRoute as ae } from "vue-router";
-import { useLocalStorage as re, onClickOutside as ie, useBreakpoints as ne, breakpointsTailwind as de } from "@vueuse/core";
-import z from "../Icon.vue.js";
-import L from "../SidePanel.vue.js";
-import J from "./NavbarTabs.vue.js";
+import { defineComponent as le, computed as m, shallowRef as se, ref as p, provide as oe, useSlots as te, onMounted as ae, onUnmounted as re, watch as Y, nextTick as ie, openBlock as r, createElementBlock as i, createVNode as b, Transition as q, withCtx as g, withDirectives as G, createElementVNode as t, normalizeClass as n, renderSlot as s, createCommentVNode as u, vShow as J, unref as c, createTextVNode as L, normalizeStyle as ne, Fragment as $, createBlock as K } from "vue";
+import { useRoute as de } from "vue-router";
+import { useLocalStorage as ue, onClickOutside as fe, useBreakpoints as be, breakpointsTailwind as me } from "@vueuse/core";
+import B from "../Icon.vue.js";
+import E from "../SidePanel.vue.js";
+import Q from "./NavbarTabs.vue.js";
 /* empty css                */
-import K from "../Breadcrumb/Breadcrumb.vue.js";
+import X from "../Breadcrumb/Breadcrumb.vue.js";
 /* empty css                                */
-import { useBreadcrumb as ue } from "../../composables/useBreadcrumb.js";
-const be = {
+import { useBreadcrumb as ce } from "../../composables/useBreadcrumb.js";
+const ve = {
   key: 0,
   class: "vlite-app-layout flex flex-row w-full h-full bg-body overflow-hidden"
-}, fe = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden" }, me = {
+}, ge = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden" }, he = {
   key: 0,
   class: "w-full shrink-0 z-20 bg-background"
-}, ce = {
-  key: 1,
-  class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col min-h-0 scrollbar-thin scrollbar-stable"
-}, ve = {
+}, pe = {
   key: 0,
   class: "shrink-0 w-full"
-}, ge = { class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable" }, he = { class: "flex flex-col h-full" }, pe = { class: "flex-1 overflow-y-auto px-3.5 pt-4 scrollbar-thin scrollbar-stable" }, ye = {
+}, ye = { class: "flex flex-col h-full" }, ke = { class: "flex-1 overflow-y-auto px-3.5 pt-4 scrollbar-thin scrollbar-stable" }, we = {
   key: 0,
   class: "mt-auto pt-2 border-t border-border px-3 py-2"
-}, ke = {
+}, xe = {
   key: 1,
   class: "vlite-app-layout flex flex-col w-full h-full bg-body overflow-hidden"
-}, we = {
+}, $e = {
   key: 0,
   class: "w-full shrink-0 z-50 flex flex-col relative"
-}, xe = { class: "flex flex-1 w-full overflow-hidden relative" }, $e = { class: "flex items-center gap-4 shrink-0 z-10" }, Ce = {
-  key: 0,
-  class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col scrollbar-thin scrollbar-stable"
-}, Te = {
+}, Ce = { class: "flex flex-1 w-full overflow-hidden relative" }, Te = { class: "flex items-center gap-4 shrink-0 z-10" }, ze = {
   key: 0,
   class: "shrink-0 w-full"
-}, ze = { class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable" }, Se = { class: "flex flex-col max-h-[80vh] overflow-y-auto scrollbar-thin" }, Be = { class: "space-y-1 p-2" }, Ve = { class: "space-y-1 p-2" }, Me = { class: "flex flex-col space-y-6 pt-4 h-full" }, Oe = {
+}, Se = {
+  class: "flex flex-col max-h-[80vh] overflow-y-auto scrollbar-thin",
+  style: { "will-change": "transform", contain: "layout style" }
+}, Be = { class: "space-y-1 p-2" }, Me = { class: "space-y-1 p-2" }, Ve = { class: "flex flex-col space-y-6 pt-4 h-full" }, Re = {
   key: 0,
   class: "flex flex-col space-y-1"
-}, Ne = {
+}, Oe = {
   key: 1,
   class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5! scrollbar-thin scrollbar-stable"
-}, Pe = {
+}, Ne = {
   key: 2,
   class: "mt-auto pt-2 border-t border-border px-3! py-2!"
-}, Le = { class: "flex items-center gap-4 shrink-0 z-10" }, Re = { class: "flex flex-col max-h-[80vh] overflow-y-auto scrollbar-thin" }, He = { class: "space-y-1 p-2" }, je = { class: "space-y-1 p-2" }, Ie = { class: "flex flex-col space-y-6 pt-4 h-full" }, Ue = {
+}, Pe = { class: "flex items-center gap-4 shrink-0 z-10" }, Le = {
+  class: "flex flex-col max-h-[80vh] overflow-y-auto scrollbar-thin",
+  style: { "will-change": "transform", contain: "layout style" }
+}, Ee = { class: "space-y-1 p-2" }, He = { class: "space-y-1 p-2" }, je = { class: "flex flex-col space-y-6 pt-4 h-full" }, Ie = {
   key: 0,
   class: "flex flex-col space-y-1"
-}, Ee = {
+}, Ue = {
   key: 1,
   class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5! scrollbar-thin scrollbar-stable"
 }, De = {
   key: 2,
   class: "mt-auto pt-2 border-t border-border px-3! py-2!"
-}, el = /* @__PURE__ */ _({
+}, el = /* @__PURE__ */ le({
   __name: "Navbar",
   props: {
     variant: { default: "header" },
@@ -88,60 +88,60 @@ const be = {
   },
   emits: ["toggle-mobile"],
   setup(v, { emit: Fe }) {
-    const l = v, p = l.breadcrumb ? ue({
+    const l = v, y = l.breadcrumb ? ce({
       homeIcon: l.breadcrumbHomeIcon,
       labelMap: l.breadcrumbLabels || {}
-    }) : { items: m(() => []) }, y = w([]), k = w("");
-    ee("navbar-context", {
+    }) : { items: m(() => []) }, k = se([]), w = p("");
+    oe("navbar-context", {
       compact: m(() => l.compact),
       renderNestedTabs: m(() => l.renderNestedTabs),
       setNestedTabs: (e, o) => {
-        y.value = e, k.value = o;
+        k.value = e, w.value = o;
       }
     });
-    const a = w(!1), S = w(!1), R = le(), B = w(null), $ = w(null), C = re("vlite-navbar-sidebar-visible", !0), H = (e) => {
-      y.value.find((d) => d.value === e) && (typeof e == "string" && e.startsWith("/") ? import("vue-router").then(({ useRouter: d }) => {
+    const a = p(!1), M = p(!1), H = te(), V = p(null), C = p(null), x = p(null), z = p(null), T = ue("vlite-navbar-sidebar-visible", !0), j = (e) => {
+      k.value.find((d) => d.value === e) && (typeof e == "string" && e.startsWith("/") ? import("vue-router").then(({ useRouter: d }) => {
         d().push(e).catch(() => {
         });
-      }) : k.value = e);
-    }, h = m(() => !!(R.header || R.main)), j = m(() => l.sidebarToggle && h.value), I = () => {
-      C.value = !C.value;
+      }) : w.value = e);
+    }, h = m(() => !!(H.header || H.main)), I = m(() => l.sidebarToggle && h.value), U = () => {
+      T.value = !T.value;
     };
-    ie(
-      B,
+    fe(
+      V,
       () => {
         a.value = !1;
       },
-      { ignore: [$] }
+      { ignore: [C] }
     );
-    const U = () => {
-      S.value = window.scrollY > 10;
+    const D = () => {
+      M.value = window.scrollY > 10;
     };
-    se(() => {
-      window.addEventListener("scroll", U, { passive: !0 });
-    }), oe(() => {
-      window.removeEventListener("scroll", U);
+    ae(() => {
+      window.addEventListener("scroll", D, { passive: !0 });
+    }), re(() => {
+      window.removeEventListener("scroll", D);
     });
-    const E = m(() => {
+    const F = m(() => {
       const e = l.variant === "sidebar", o = {
         fixed: h.value ? "relative z-40" : "fixed top-0 left-0 z-40",
         sticky: h.value ? "relative z-40" : "sticky top-0 z-40",
         relative: "relative z-10",
         absolute: h.value ? "relative z-40" : "absolute top-0 left-0 w-full z-40"
-      }, d = "bg-body", T = [
-        l.glass && (S.value || e || l.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "bg-background",
+      }, d = "bg-body", S = [
+        l.glass && (M.value || e || l.floating) ? "bg-background/95" : "bg-background",
         l.border && !l.floating ? e ? "border-r border-border" : "border-b border-border" : "",
         l.floating ? "m-4 rounded shadow-lg border border-border/50" : "",
-        S.value && !l.floating && !e && l.position === "sticky" ? "shadow-sm" : ""
-      ], V = l.mobileBreakpoint || "md", M = {
+        M.value && !l.floating && !e && l.position === "sticky" ? "shadow-sm" : ""
+      ], R = l.mobileBreakpoint || "md", O = {
         sm: "max-sm:hidden",
         md: "max-md:hidden",
         lg: "max-lg:hidden",
         xl: "max-xl:hidden"
-      }, O = h.value && e ? M[V] : "";
-      let N = "";
-      return e ? N = b.value.sidebarLayout : N = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [d, o[l.position], ...T, N, O, l.class].filter(Boolean).join(" ");
-    }), b = m(() => {
+      }, N = h.value && e ? O[R] : "";
+      let P = "";
+      return e ? P = f.value.sidebarLayout : P = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [d, o[l.position], ...S, P, N, l.class].filter(Boolean).join(" ");
+    }), f = m(() => {
       const e = l.mobileBreakpoint || "md", o = {
         sm: "sm:hidden",
         md: "md:hidden",
@@ -152,22 +152,22 @@ const be = {
         md: "hidden md:flex",
         lg: "hidden lg:flex",
         xl: "hidden xl:flex"
-      }, T = {
+      }, S = {
         sm: `flex flex-col max-sm:w-full ${l.compact ? "w-20" : ""} h-auto sm:h-full sm:max-h-screen shrink-0`,
         md: `flex flex-col max-md:w-full ${l.compact ? "w-20" : ""} h-auto md:h-full md:max-h-screen shrink-0`,
         lg: `flex flex-col max-lg:w-full ${l.compact ? "w-20" : ""} h-auto lg:h-full lg:max-h-screen shrink-0`,
         xl: `flex flex-col max-xl:w-full ${l.compact ? "w-20" : ""} h-auto xl:h-full xl:max-h-screen shrink-0`
-      }, V = {
+      }, R = {
         sm: "sm:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         md: "md:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         lg: "lg:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         xl: "xl:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background"
-      }, M = {
+      }, O = {
         sm: "hidden sm:flex flex-col h-full w-full overflow-hidden",
         md: "hidden md:flex flex-col h-full w-full overflow-hidden",
         lg: "hidden lg:flex flex-col h-full w-full overflow-hidden",
         xl: "hidden xl:flex flex-col h-full w-full overflow-hidden"
-      }, O = {
+      }, N = {
         sm: "hidden sm:flex",
         md: "hidden md:flex",
         lg: "hidden lg:flex",
@@ -176,30 +176,32 @@ const be = {
       return {
         mobileTrigger: o[e],
         desktopContent: d[e],
-        sidebarLayout: T[e],
-        mobileHeader: V[e],
-        desktopSidebar: M[e],
-        desktopOnly: O[e]
+        sidebarLayout: S[e],
+        mobileHeader: R[e],
+        desktopSidebar: O[e],
+        desktopOnly: N[e]
       };
-    }), D = m(() => {
+    }), A = m(() => {
       if (l.variant === "sidebar")
         return "flex-1 py-4 overflow-y-auto scrollbar-thin scrollbar-stable";
       if (l.centerPosition === "left")
         return "flex items-center justify-start";
-    }), Q = ae();
-    A(
-      () => Q.path,
+    }), Z = de();
+    Y(
+      () => Z.path,
       () => {
-        a.value = !1;
+        a.value = !1, ie(() => {
+          x.value && (x.value.scrollTop = 0, x.value.firstElementChild && (x.value.firstElementChild.scrollTop = 0)), z.value && (z.value.scrollTop = 0);
+        });
       }
     );
-    const X = ne(de).greater(l.mobileBreakpoint);
-    A(X, (e) => {
+    const _ = be(me).greater(l.mobileBreakpoint);
+    Y(_, (e) => {
       e && (a.value = !1);
     });
-    const F = m(() => j.value && !C.value), Z = m(() => h.value && l.variant === "sidebar" && l.layoutMode === "sidebar-first");
-    return (e, o) => Z.value ? (r(), i("div", be, [
-      f(W, {
+    const W = m(() => I.value && !T.value), ee = m(() => h.value && l.variant === "sidebar" && l.layoutMode === "sidebar-first");
+    return (e, o) => ee.value ? (r(), i("div", ve, [
+      b(q, {
         "enter-active-class": "transition-all duration-300 ease-in-out",
         "leave-active-class": "transition-all duration-300 ease-in-out",
         "enter-from-class": "opacity-0 -translate-x-2",
@@ -208,17 +210,18 @@ const be = {
         "leave-to-class": "opacity-0 -translate-x-2"
       }, {
         default: g(() => [
-          Y(t("nav", {
+          G(t("nav", {
             class: n([
               "shrink-0 h-full flex flex-col bg-background border-r border-border overflow-hidden z-30",
-              b.value.mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
+              f.value.mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
               l.class
             ]),
             role: "navigation",
             "aria-label": "Sidebar"
           }, [
             t("div", {
-              class: n(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-stable", l.contentClass])
+              class: n(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-stable", l.contentClass]),
+              style: { "will-change": "transform", contain: "layout style" }
             }, [
               s(e.$slots, "default")
             ], 2),
@@ -229,85 +232,95 @@ const be = {
               s(e.$slots, "right")
             ], 2)) : u("", !0)
           ], 2), [
-            [q, !F.value]
+            [J, !W.value]
           ])
         ]),
         _: 3
       }),
-      t("div", fe, [
-        e.$slots.header ? (r(), i("header", me, [
+      t("div", ge, [
+        e.$slots.header ? (r(), i("header", he, [
           s(e.$slots, "header", {
             isOpen: a.value,
             toggle: () => a.value = !a.value,
-            sidebarVisible: c(C),
-            toggleSidebar: I,
-            breadcrumbItems: c(p).items.value
+            sidebarVisible: c(T),
+            toggleSidebar: U,
+            breadcrumbItems: c(y).items.value
           })
         ])) : u("", !0),
-        e.$slots.main ? (r(), i("main", ce, [
-          l.renderNestedTabs && y.value.length > 0 ? (r(), i("div", ve, [
-            f(J, {
-              modelValue: k.value,
-              "onUpdate:modelValue": o[0] || (o[0] = (d) => k.value = d),
-              onChange: H,
-              items: y.value
+        e.$slots.main ? (r(), i("main", {
+          key: 1,
+          ref_key: "layoutMainRef",
+          ref: z,
+          class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col min-h-0 scrollbar-thin scrollbar-stable"
+        }, [
+          l.renderNestedTabs && k.value.length > 0 ? (r(), i("div", pe, [
+            b(Q, {
+              modelValue: w.value,
+              "onUpdate:modelValue": o[0] || (o[0] = (d) => w.value = d),
+              onChange: j,
+              items: k.value
             }, null, 8, ["modelValue", "items"])
           ])) : u("", !0),
-          l.breadcrumb && l.breadcrumbPosition === "main" && c(p).items.value.length > 1 ? (r(), i("div", {
+          l.breadcrumb && l.breadcrumbPosition === "main" && c(y).items.value.length > 1 ? (r(), i("div", {
             key: 1,
             class: n(["shrink-0 w-full border-b border-border px-6 py-2", l.breadcrumbClass])
           }, [
-            f(c(K), {
-              items: c(p).items.value,
+            b(c(X), {
+              items: c(y).items.value,
               variant: l.breadcrumbVariant,
               separator: l.breadcrumbSeparator,
               size: l.breadcrumbSize
             }, null, 8, ["items", "variant", "separator", "size"])
           ], 2)) : u("", !0),
-          t("div", ge, [
+          t("div", {
+            ref_key: "mainScrollRef",
+            ref: x,
+            style: { "will-change": "transform", contain: "layout style" },
+            class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable"
+          }, [
             s(e.$slots, "main")
-          ])
-        ])) : u("", !0)
+          ], 512)
+        ], 512)) : u("", !0)
       ]),
-      f(L, {
+      b(E, {
         show: a.value,
         "onUpdate:show": o[1] || (o[1] = (d) => a.value = d),
         position: "left",
         size: "sm",
-        triggerClass: b.value.mobileTrigger,
-        class: n(["z-60", b.value.mobileTrigger]),
+        triggerClass: f.value.mobileTrigger,
+        class: n(["z-60", f.value.mobileTrigger]),
         headerClass: "pl-3! pr-4.5! py-3!",
         bodyClass: "p-0!"
       }, {
         header: g(() => [
           s(e.$slots, "logo", {}, () => [
-            o[9] || (o[9] = P("Brand", -1))
+            o[9] || (o[9] = L("Brand", -1))
           ])
         ]),
         default: g(() => [
-          t("div", he, [
-            t("div", pe, [
+          t("div", ye, [
+            t("div", ke, [
               s(e.$slots, "default")
             ]),
-            e.$slots.right ? (r(), i("div", ye, [
+            e.$slots.right ? (r(), i("div", we, [
               s(e.$slots, "right")
             ])) : u("", !0)
           ])
         ]),
         _: 3
       }, 8, ["show", "triggerClass", "class"])
-    ])) : h.value ? (r(), i("div", ke, [
-      e.$slots.header ? (r(), i("header", we, [
+    ])) : h.value ? (r(), i("div", xe, [
+      e.$slots.header ? (r(), i("header", $e, [
         s(e.$slots, "header", {
           isOpen: a.value,
           toggle: () => a.value = !a.value,
-          sidebarVisible: c(C),
-          toggleSidebar: I,
-          breadcrumbItems: c(p).items.value
+          sidebarVisible: c(T),
+          toggleSidebar: U,
+          breadcrumbItems: c(y).items.value
         })
       ])) : u("", !0),
-      t("div", xe, [
-        f(W, {
+      t("div", Ce, [
+        b(q, {
           "enter-active-class": "transition-all duration-300 ease-in-out overflow-hidden",
           "leave-active-class": "transition-all duration-300 ease-in-out overflow-hidden",
           "enter-from-class": "opacity-0",
@@ -316,13 +329,13 @@ const be = {
           "leave-to-class": "opacity-0"
         }, {
           default: g(() => [
-            Y(t("nav", {
-              class: n(E.value),
+            G(t("nav", {
+              class: n(F.value),
               role: "navigation",
-              style: te(j.value ? "transition: width 0.3s ease, opacity 0.3s ease;" : "")
+              style: ne(I.value ? "transition: width 0.3s ease, opacity 0.3s ease;" : "")
             }, [
-              v.variant === "header" ? (r(), i(x, { key: 0 }, [
-                t("div", $e, [
+              v.variant === "header" ? (r(), i($, { key: 0 }, [
+                t("div", Te, [
                   s(e.$slots, "mobile-trigger", {
                     isOpen: a.value,
                     toggle: () => a.value = !a.value
@@ -330,11 +343,11 @@ const be = {
                     t("button", {
                       type: "button",
                       ref_key: "mobileTriggerRef",
-                      ref: $,
-                      class: n(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [b.value.mobileTrigger, l.mobileTriggerClass]]),
+                      ref: C,
+                      class: n(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [f.value.mobileTrigger, l.mobileTriggerClass]]),
                       onClick: o[2] || (o[2] = (d) => a.value = !a.value)
                     }, [
-                      f(z, {
+                      b(B, {
                         icon: "lucide:menu",
                         class: "w-5 h-5"
                       }),
@@ -343,14 +356,14 @@ const be = {
                   ]),
                   e.$slots?.left ? (r(), i("div", {
                     key: 0,
-                    class: n(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", b.value.desktopContent])
+                    class: n(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", f.value.desktopContent])
                   }, [
                     s(e.$slots, "left")
                   ], 2)) : u("", !0)
                 ]),
                 e.$slots?.center ? (r(), i("div", {
                   key: 0,
-                  class: n([D.value, "max-w-full", l.contentClass])
+                  class: n([A.value, "max-w-full", l.contentClass])
                 }, [
                   s(e.$slots, "center")
                 ], 2)) : u("", !0),
@@ -362,10 +375,10 @@ const be = {
                 }, [
                   s(e.$slots, "right")
                 ], 2)
-              ], 64)) : (r(), i(x, { key: 1 }, [
+              ], 64)) : (r(), i($, { key: 1 }, [
                 e.$slots.header ? u("", !0) : (r(), i("div", {
                   key: 0,
-                  class: n(b.value.mobileHeader)
+                  class: n(f.value.mobileHeader)
                 }, [
                   s(e.$slots, "mobile-trigger", {
                     isOpen: a.value,
@@ -374,11 +387,11 @@ const be = {
                     t("button", {
                       type: "button",
                       ref_key: "mobileTriggerRef",
-                      ref: $,
+                      ref: C,
                       class: n(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", l.mobileTriggerClass]),
                       onClick: o[3] || (o[3] = (d) => a.value = !a.value)
                     }, [
-                      f(z, {
+                      b(B, {
                         icon: "lucide:menu",
                         class: "w-5 h-5"
                       }),
@@ -387,7 +400,7 @@ const be = {
                   ])
                 ], 2)),
                 t("div", {
-                  class: n(b.value.desktopSidebar)
+                  class: n(f.value.desktopSidebar)
                 }, [
                   t("div", {
                     class: n(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin scrollbar-stable", l.contentClass])
@@ -405,40 +418,50 @@ const be = {
                 ], 2)
               ], 64))
             ], 6), [
-              [q, !F.value]
+              [J, !W.value]
             ])
           ]),
           _: 3
         }),
-        e.$slots.main ? (r(), i("main", Ce, [
-          l.renderNestedTabs && y.value.length > 0 ? (r(), i("div", Te, [
-            f(J, {
-              modelValue: k.value,
-              "onUpdate:modelValue": o[4] || (o[4] = (d) => k.value = d),
-              onChange: H,
-              items: y.value
+        e.$slots.main ? (r(), i("main", {
+          key: 0,
+          ref_key: "layoutMainRef",
+          ref: z,
+          class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col scrollbar-thin scrollbar-stable"
+        }, [
+          l.renderNestedTabs && k.value.length > 0 ? (r(), i("div", ze, [
+            b(Q, {
+              modelValue: w.value,
+              "onUpdate:modelValue": o[4] || (o[4] = (d) => w.value = d),
+              onChange: j,
+              items: k.value
             }, null, 8, ["modelValue", "items"])
           ])) : u("", !0),
-          l.breadcrumb && l.breadcrumbPosition === "main" && c(p).items.value.length > 1 ? (r(), i("div", {
+          l.breadcrumb && l.breadcrumbPosition === "main" && c(y).items.value.length > 1 ? (r(), i("div", {
             key: 1,
             class: n(["shrink-0 w-full border-b border-border px-6 py-2", l.breadcrumbClass])
           }, [
-            f(c(K), {
-              items: c(p).items.value,
+            b(c(X), {
+              items: c(y).items.value,
               variant: l.breadcrumbVariant,
               separator: l.breadcrumbSeparator,
               size: l.breadcrumbSize
             }, null, 8, ["items", "variant", "separator", "size"])
           ], 2)) : u("", !0),
-          t("div", ze, [
+          t("div", {
+            ref_key: "mainScrollRef",
+            ref: x,
+            style: { "will-change": "transform", contain: "layout style" },
+            class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable"
+          }, [
             s(e.$slots, "main")
-          ])
-        ])) : u("", !0),
-        l.mobileMenuVariant === "dropdown" ? (r(), i(x, { key: 1 }, [
+          ], 512)
+        ], 512)) : u("", !0),
+        l.mobileMenuVariant === "dropdown" ? (r(), i($, { key: 1 }, [
           a.value ? (r(), i("div", {
             key: 0,
             ref_key: "mobileMenuRef",
-            ref: B,
+            ref: V,
             class: n(["absolute top-[calc(100%_+_1px)] left-0 w-full bg-body border border-border/50 shadow-xl z-50 flex flex-col transition-all duration-300 origin-top overflow-hidden will-change-transform", l.menuClass])
           }, [
             t("div", Se, [
@@ -447,42 +470,42 @@ const be = {
                   s(e.$slots, "left")
                 ]),
                 o[12] || (o[12] = t("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
-                t("div", Ve, [
+                t("div", Me, [
                   s(e.$slots, "center")
                 ])
               ])
             ])
           ], 2)) : u("", !0)
-        ], 64)) : (r(), G(L, {
+        ], 64)) : (r(), K(E, {
           key: 2,
           show: a.value,
           "onUpdate:show": o[5] || (o[5] = (d) => a.value = d),
           position: "left",
           size: "sm",
-          triggerClass: b.value.mobileTrigger,
-          class: n(["z-60", b.value.mobileTrigger]),
+          triggerClass: f.value.mobileTrigger,
+          class: n(["z-60", f.value.mobileTrigger]),
           headerClass: "pl-3! pr-4.5! py-3!",
           bodyClass: "p-0!"
         }, {
           header: g(() => [
             s(e.$slots, "logo", {}, () => [
-              o[13] || (o[13] = P("Brand", -1))
+              o[13] || (o[13] = L("Brand", -1))
             ])
           ]),
           default: g(() => [
-            t("div", Me, [
-              v.variant === "header" ? (r(), i("div", Oe, [
+            t("div", Ve, [
+              v.variant === "header" ? (r(), i("div", Re, [
                 s(e.$slots, "mobile-menu", {}, () => [
                   s(e.$slots, "left"),
                   o[14] || (o[14] = t("div", { class: "h-px bg-border my-2" }, null, -1)),
                   s(e.$slots, "center")
                 ])
-              ])) : (r(), i("div", Ne, [
+              ])) : (r(), i("div", Oe, [
                 s(e.$slots, "left"),
                 s(e.$slots, "default"),
                 s(e.$slots, "center")
               ])),
-              e.$slots?.right ? (r(), i("div", Pe, [
+              e.$slots?.right ? (r(), i("div", Ne, [
                 s(e.$slots, "right")
               ])) : u("", !0)
             ])
@@ -492,11 +515,11 @@ const be = {
       ])
     ])) : (r(), i("nav", {
       key: 2,
-      class: n(E.value),
+      class: n(F.value),
       role: "navigation"
     }, [
-      v.variant === "header" ? (r(), i(x, { key: 0 }, [
-        t("div", Le, [
+      v.variant === "header" ? (r(), i($, { key: 0 }, [
+        t("div", Pe, [
           s(e.$slots, "mobile-trigger", {
             isOpen: a.value,
             toggle: () => a.value = !a.value
@@ -504,11 +527,11 @@ const be = {
             t("button", {
               type: "button",
               ref_key: "mobileTriggerRef",
-              ref: $,
-              class: n(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [b.value.mobileTrigger, l.mobileTriggerClass]]),
+              ref: C,
+              class: n(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [f.value.mobileTrigger, l.mobileTriggerClass]]),
               onClick: o[6] || (o[6] = (d) => a.value = !a.value)
             }, [
-              f(z, {
+              b(B, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
@@ -517,14 +540,14 @@ const be = {
           ]),
           e.$slots?.left ? (r(), i("div", {
             key: 0,
-            class: n(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", b.value.desktopContent])
+            class: n(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", f.value.desktopContent])
           }, [
             s(e.$slots, "left")
           ], 2)) : u("", !0)
         ]),
         e.$slots?.center ? (r(), i("div", {
           key: 0,
-          class: n([D.value, "max-w-full", l.contentClass])
+          class: n([A.value, "max-w-full", l.contentClass])
         }, [
           s(e.$slots, "center")
         ], 2)) : u("", !0),
@@ -536,9 +559,9 @@ const be = {
         }, [
           s(e.$slots, "right")
         ], 2)
-      ], 64)) : (r(), i(x, { key: 1 }, [
+      ], 64)) : (r(), i($, { key: 1 }, [
         t("div", {
-          class: n(b.value.mobileHeader)
+          class: n(f.value.mobileHeader)
         }, [
           s(e.$slots, "mobile-trigger", {
             isOpen: a.value,
@@ -547,11 +570,11 @@ const be = {
             t("button", {
               type: "button",
               ref_key: "mobileTriggerRef",
-              ref: $,
+              ref: C,
               class: n(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", l.mobileTriggerClass]),
               onClick: o[7] || (o[7] = (d) => a.value = !a.value)
             }, [
-              f(z, {
+              b(B, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
@@ -560,7 +583,7 @@ const be = {
           ])
         ], 2),
         t("div", {
-          class: n(b.value.desktopSidebar)
+          class: n(f.value.desktopSidebar)
         }, [
           t("div", {
             class: n(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin scrollbar-stable", l.contentClass])
@@ -577,50 +600,50 @@ const be = {
           ], 2)) : u("", !0)
         ], 2)
       ], 64)),
-      l.mobileMenuVariant === "dropdown" ? (r(), i(x, { key: 2 }, [
+      l.mobileMenuVariant === "dropdown" ? (r(), i($, { key: 2 }, [
         a.value ? (r(), i("div", {
           key: 0,
           ref_key: "mobileMenuRef",
-          ref: B,
+          ref: V,
           class: n(["absolute top-[calc(100%_+_1px)] left-0 w-full bg-body border border-border/50 shadow-xl z-50 flex flex-col transition-all duration-300 origin-top overflow-hidden will-change-transform", l.menuClass])
         }, [
-          t("div", Re, [
+          t("div", Le, [
             s(e.$slots, "mobile-menu", {}, () => [
-              t("div", He, [
+              t("div", Ee, [
                 s(e.$slots, "left")
               ]),
               o[17] || (o[17] = t("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
-              t("div", je, [
+              t("div", He, [
                 s(e.$slots, "center")
               ])
             ])
           ])
         ], 2)) : u("", !0)
-      ], 64)) : (r(), G(L, {
+      ], 64)) : (r(), K(E, {
         key: 3,
         show: a.value,
         "onUpdate:show": o[8] || (o[8] = (d) => a.value = d),
         position: "left",
         size: "sm",
-        triggerClass: b.value.mobileTrigger,
-        class: n(["z-60", b.value.mobileTrigger]),
+        triggerClass: f.value.mobileTrigger,
+        class: n(["z-60", f.value.mobileTrigger]),
         headerClass: "pl-3! pr-4.5! py-3!",
         bodyClass: "p-0!"
       }, {
         header: g(() => [
           s(e.$slots, "logo", {}, () => [
-            o[18] || (o[18] = P("Brand", -1))
+            o[18] || (o[18] = L("Brand", -1))
           ])
         ]),
         default: g(() => [
-          t("div", Ie, [
-            v.variant === "header" ? (r(), i("div", Ue, [
+          t("div", je, [
+            v.variant === "header" ? (r(), i("div", Ie, [
               s(e.$slots, "mobile-menu", {}, () => [
                 s(e.$slots, "left"),
                 o[19] || (o[19] = t("div", { class: "h-px bg-border my-2" }, null, -1)),
                 s(e.$slots, "center")
               ])
-            ])) : (r(), i("div", Ee, [
+            ])) : (r(), i("div", Ue, [
               s(e.$slots, "left"),
               s(e.$slots, "default"),
               s(e.$slots, "center")