vlite3 0.4.8 → 0.5.2

package/components/Navbar/Navbar.vue.js

@@ -1,19 +1,45 @@
-import { defineComponent as R, ref as g, useSlots as V, onMounted as L, onUnmounted as N, computed as p, provide as E, watch as C, openBlock as t, createElementBlock as n, normalizeClass as i, Fragment as x, createElementVNode as r, renderSlot as o, createVNode as B, createBlock as y, resolveDynamicComponent as P, withCtx as k, createCommentVNode as d, toDisplayString as A, createTextVNode as D } from "vue";
-import { useRoute as H } from "vue-router";
-import { onClickOutside as U, useBreakpoints as F, breakpointsTailwind as Y } from "@vueuse/core";
-import T from "../Icon.vue.js";
-import q from "../SidePanel.vue.js";
-import G from "../Logo.vue.js";
-const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K = { key: 2 }, Q = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, W = { class: "space-y-1 p-2" }, X = { class: "space-y-1 p-2" }, Z = { class: "flex flex-col space-y-6 pt-4 h-full" }, _ = {
+import { defineComponent as Q, computed as b, ref as p, provide as X, useSlots as Z, onMounted as _, onUnmounted as ee, watch as D, openBlock as t, createElementBlock as r, renderSlot as o, unref as x, createCommentVNode as d, createElementVNode as a, createVNode as c, Transition as le, withCtx as g, withDirectives as se, normalizeStyle as oe, normalizeClass as n, Fragment as h, createBlock as y, resolveDynamicComponent as E, toDisplayString as I, vShow as te, createTextVNode as U } 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 F from "../SidePanel.vue.js";
+import W from "../Logo.vue.js";
+import ue from "./NavbarTabs.vue.js";
+/* empty css                */
+import fe from "../Breadcrumb/Breadcrumb.vue.js";
+/* empty css                                */
+import { useBreadcrumb as me } from "../../composables/useBreadcrumb.js";
+const be = {
+  key: 0,
+  class: "vlite-app-layout flex flex-col w-full h-full bg-body overflow-hidden"
+}, ce = {
+  key: 0,
+  class: "w-full shrink-0 z-50 flex flex-col relative"
+}, ge = { class: "flex flex-1 w-full overflow-hidden relative" }, ve = { class: "flex items-center gap-4 shrink-0 z-10" }, pe = { key: 1 }, he = { key: 2 }, ye = {
+  key: 0,
+  class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col"
+}, ke = {
+  key: 0,
+  class: "shrink-0 w-full"
+}, xe = { class: "flex-1 overflow-y-auto w-full relative h-full" }, we = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, $e = { class: "space-y-1 p-2" }, Ce = { class: "space-y-1 p-2" }, Te = { class: "flex flex-col space-y-6 pt-4 h-full" }, ze = {
+  key: 0,
+  class: "flex flex-col space-y-1"
+}, Be = {
+  key: 1,
+  class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5!"
+}, Se = {
+  key: 2,
+  class: "mt-auto pt-2 border-t border-border px-3! py-2!"
+}, Me = { class: "flex items-center gap-4 shrink-0 z-10" }, Oe = { key: 1 }, Ve = { key: 2 }, Ne = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, Le = { class: "space-y-1 p-2" }, Re = { class: "space-y-1 p-2" }, Pe = { class: "flex flex-col space-y-6 pt-4 h-full" }, He = {
   key: 0,
   class: "flex flex-col space-y-1"
-}, ee = {
+}, je = {
   key: 1,
   class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5!"
-}, le = {
+}, Ae = {
   key: 2,
   class: "mt-auto pt-2 border-t border-border px-3! py-2!"
-}, ue = /* @__PURE__ */ R({
+}, Ze = /* @__PURE__ */ Q({
   __name: "Navbar",
   props: {
     variant: { default: "header" },
@@ -24,8 +50,8 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
     floating: { type: Boolean, default: !1 },
     class: { default: "" },
     height: { default: "h-16" },
-    width: { default: "w-64" },
     compact: { type: Boolean, default: !1 },
+    renderNestedTabs: { type: Boolean, default: !1 },
     logo: {},
     logoAlt: {},
     mobileBreakpoint: { default: "md" },
@@ -34,278 +60,524 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
     menuClass: { default: "" },
     rightClass: { default: "" },
     mobileTriggerClass: { default: "" },
-    mobileMenuVariant: { default: "sidepanel" }
+    mobileMenuVariant: { default: "sidepanel" },
+    sidebarToggle: { type: Boolean, default: !1 },
+    breadcrumb: { type: Boolean, default: !1 },
+    breadcrumbPosition: { default: "header" },
+    breadcrumbVariant: { default: "default" },
+    breadcrumbSeparator: { default: "chevron" },
+    breadcrumbSize: { default: "sm" },
+    breadcrumbLabels: {},
+    breadcrumbHomeIcon: { default: "lucide:home" },
+    breadcrumbClass: { default: "" }
   },
   emits: ["toggle-mobile"],
-  setup(m, { emit: se }) {
-    const l = m, a = g(!1), b = g(!1);
-    V();
-    const w = g(null), h = g(null);
-    U(
-      w,
+  setup(m, { emit: De }) {
+    const l = m, B = l.breadcrumb ? me({
+      homeIcon: l.breadcrumbHomeIcon,
+      labelMap: l.breadcrumbLabels || {}
+    }) : { items: b(() => []) }, w = p([]), $ = p("");
+    X("navbar-context", {
+      compact: b(() => l.compact),
+      renderNestedTabs: b(() => l.renderNestedTabs),
+      setNestedTabs: (e, s) => {
+        w.value = e, $.value = s;
+      }
+    });
+    const i = p(!1), S = p(!1), R = Z(), M = p(null), k = p(null), C = re("vlite-navbar-sidebar-visible", !0), Y = (e) => {
+      w.value.find((u) => u.value === e) && (typeof e == "string" && e.startsWith("/") ? import("vue-router").then(({ useRouter: u }) => {
+        u().push(e).catch(() => {
+        });
+      }) : $.value = e);
+    }, v = b(() => !!(R.header || R.main)), P = b(() => l.sidebarToggle && v.value), q = () => {
+      C.value = !C.value;
+    };
+    ie(
+      M,
       () => {
-        a.value = !1;
+        i.value = !1;
       },
-      { ignore: [h] }
+      { ignore: [k] }
     );
-    const $ = () => {
-      b.value = window.scrollY > 10;
+    const H = () => {
+      S.value = window.scrollY > 10;
     };
-    L(() => {
-      window.addEventListener("scroll", $, { passive: !0 });
-    }), N(() => {
-      window.removeEventListener("scroll", $);
+    _(() => {
+      window.addEventListener("scroll", H, { passive: !0 });
+    }), ee(() => {
+      window.removeEventListener("scroll", H);
     });
-    const z = p(() => {
+    const j = b(() => {
       const e = l.variant === "sidebar", s = {
-        fixed: "fixed top-0 left-0 z-40",
-        sticky: "sticky top-0 z-40",
+        fixed: v.value ? "relative z-40" : "fixed top-0 left-0 z-40",
+        sticky: v.value ? "relative z-40" : "sticky top-0 z-40",
         relative: "relative z-10",
-        absolute: "absolute top-0 left-0 w-full z-40"
-      }, f = "bg-body", v = [
-        l.glass && (b.value || e || l.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "bg-background",
+        absolute: v.value ? "relative z-40" : "absolute top-0 left-0 w-full z-40"
+      }, u = "bg-body", T = [
+        l.glass && (S.value || e || l.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "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" : "",
-        b.value && !l.floating && !e && l.position === "sticky" ? "shadow-sm" : ""
-      ];
-      let c = "";
-      return e ? c = u.value.sidebarLayout : c = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [f, s[l.position], ...v, c, l.class].join(" ");
-    }), u = p(() => {
+        S.value && !l.floating && !e && l.position === "sticky" ? "shadow-sm" : ""
+      ], O = l.mobileBreakpoint || "md", V = {
+        sm: "max-sm:hidden",
+        md: "max-md:hidden",
+        lg: "max-lg:hidden",
+        xl: "max-xl:hidden"
+      }, N = v.value && e ? V[O] : "";
+      let L = "";
+      return e ? L = f.value.sidebarLayout : L = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [u, s[l.position], ...T, L, N, l.class].filter(Boolean).join(" ");
+    }), f = b(() => {
       const e = l.mobileBreakpoint || "md", s = {
         sm: "sm:hidden",
         md: "md:hidden",
         lg: "lg:hidden",
         xl: "xl:hidden"
-      }, f = {
+      }, u = {
         sm: "hidden sm:flex",
         md: "hidden md:flex",
         lg: "hidden lg:flex",
         xl: "hidden xl:flex"
-      }, v = {
-        sm: `flex flex-col max-sm:w-full ${l.compact ? "w-20" : l.width} h-auto sm:h-full sm:max-h-screen`,
-        md: `flex flex-col max-md:w-full ${l.compact ? "w-20" : l.width} h-auto md:h-full md:max-h-screen`,
-        lg: `flex flex-col max-lg:w-full ${l.compact ? "w-20" : l.width} h-auto lg:h-full lg:max-h-screen`,
-        xl: `flex flex-col max-xl:w-full ${l.compact ? "w-20" : l.width} h-auto xl:h-full xl:max-h-screen`
-      }, c = {
+      }, T = {
+        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`
+      }, O = {
         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"
-      }, O = {
+      }, V = {
         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"
+      }, N = {
+        sm: "hidden sm:flex",
+        md: "hidden md:flex",
+        lg: "hidden lg:flex",
+        xl: "hidden xl:flex"
       };
       return {
         mobileTrigger: s[e],
-        desktopContent: f[e],
-        sidebarLayout: v[e],
-        mobileHeader: c[e],
-        desktopSidebar: O[e]
+        desktopContent: u[e],
+        sidebarLayout: T[e],
+        mobileHeader: O[e],
+        desktopSidebar: V[e],
+        desktopOnly: N[e]
       };
-    }), M = p(() => {
+    }), A = b(() => {
       if (l.variant === "sidebar") return "flex-1 py-4 overflow-y-auto";
-      switch (l.centerPosition) {
-        case "left":
-          return "flex items-center justify-start";
-        case "right":
-          return "flex items-center justify-end ml-auto";
-        default:
-          return `${u.value.desktopContent} items-center justify-center mx-auto`;
-      }
-    });
-    E("navbar-context", {
-      compact: p(() => l.compact)
-    });
-    const S = H();
-    C(
-      () => S.path,
+      if (l.centerPosition === "left")
+        return "flex items-center justify-start";
+    }), G = ae();
+    D(
+      () => G.path,
       () => {
-        a.value = !1;
+        i.value = !1;
       }
     );
-    const j = F(Y).greater(l.mobileBreakpoint);
-    return C(j, (e) => {
-      e && (a.value = !1);
-    }), (e, s) => (t(), n("nav", {
-      class: i(z.value),
+    const J = ne(de).greater(l.mobileBreakpoint);
+    D(J, (e) => {
+      e && (i.value = !1);
+    });
+    const K = b(() => P.value && !C.value);
+    return (e, s) => v.value ? (t(), r("div", be, [
+      e.$slots.header ? (t(), r("header", ce, [
+        o(e.$slots, "header", {
+          isOpen: i.value,
+          toggle: () => i.value = !i.value,
+          sidebarVisible: x(C),
+          toggleSidebar: q,
+          breadcrumbItems: x(B).items.value
+        })
+      ])) : d("", !0),
+      a("div", ge, [
+        c(le, {
+          "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",
+          "enter-to-class": "opacity-100",
+          "leave-from-class": "opacity-100",
+          "leave-to-class": "opacity-0"
+        }, {
+          default: g(() => [
+            se(a("nav", {
+              class: n(j.value),
+              role: "navigation",
+              style: oe(P.value ? "transition: width 0.3s ease, opacity 0.3s ease;" : "")
+            }, [
+              m.variant === "header" ? (t(), r(h, { key: 0 }, [
+                a("div", ve, [
+                  o(e.$slots, "mobile-trigger", {
+                    isOpen: i.value,
+                    toggle: () => i.value = !i.value
+                  }, () => [
+                    a("button", {
+                      type: "button",
+                      ref_key: "mobileTriggerRef",
+                      ref: k,
+                      class: n(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [f.value.mobileTrigger, l.mobileTriggerClass]]),
+                      onClick: s[0] || (s[0] = (u) => i.value = !i.value)
+                    }, [
+                      c(z, {
+                        icon: "lucide:menu",
+                        class: "w-5 h-5"
+                      }),
+                      s[7] || (s[7] = a("span", { class: "sr-only" }, "Open Menu", -1))
+                    ], 2)
+                  ]),
+                  e.$slots?.logo ? (t(), r("div", {
+                    key: 0,
+                    class: n(["shrink-0", l.logoClass])
+                  }, [
+                    o(e.$slots, "logo", {}, () => [
+                      (t(), y(E(l.logo ? "img" : "div"), {
+                        src: l.logo,
+                        class: "h-8 w-auto font-bold text-xl flex items-center gap-2"
+                      }, {
+                        default: g(() => [
+                          l.logo ? d("", !0) : (t(), y(W, {
+                            key: 0,
+                            class: "h-6 w-6"
+                          })),
+                          !l.logo && l.logoAlt ? (t(), r("span", pe, I(l.logoAlt), 1)) : l.logo ? d("", !0) : (t(), r("span", he, "Brand"))
+                        ]),
+                        _: 1
+                      }, 8, ["src"]))
+                    ])
+                  ], 2)) : d("", !0),
+                  e.$slots?.left ? (t(), r("div", {
+                    key: 1,
+                    class: n(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", f.value.desktopContent])
+                  }, [
+                    o(e.$slots, "left")
+                  ], 2)) : d("", !0)
+                ]),
+                e.$slots?.center ? (t(), r("div", {
+                  key: 0,
+                  class: n([A.value, "max-w-full", l.contentClass])
+                }, [
+                  o(e.$slots, "center")
+                ], 2)) : d("", !0),
+                a("div", {
+                  class: n(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
+                    {
+                      "ml-auto": m.centerPosition === "left" || m.centerPosition === "center"
+                    },
+                    l.rightClass
+                  ]])
+                }, [
+                  o(e.$slots, "right")
+                ], 2)
+              ], 64)) : (t(), r(h, { key: 1 }, [
+                e.$slots.header ? d("", !0) : (t(), r("div", {
+                  key: 0,
+                  class: n(f.value.mobileHeader)
+                }, [
+                  e.$slots?.logo ? o(e.$slots, "logo", { key: 0 }, () => [
+                    s[8] || (s[8] = a("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+                  ]) : d("", !0),
+                  o(e.$slots, "mobile-trigger", {
+                    isOpen: i.value,
+                    toggle: () => i.value = !i.value
+                  }, () => [
+                    a("button", {
+                      type: "button",
+                      ref_key: "mobileTriggerRef",
+                      ref: k,
+                      class: n(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", l.mobileTriggerClass]),
+                      onClick: s[1] || (s[1] = (u) => i.value = !i.value)
+                    }, [
+                      c(z, {
+                        icon: "lucide:menu",
+                        class: "w-5 h-5"
+                      }),
+                      s[9] || (s[9] = a("span", { class: "sr-only" }, "Open Menu", -1))
+                    ], 2)
+                  ])
+                ], 2)),
+                a("div", {
+                  class: n(f.value.desktopSidebar)
+                }, [
+                  e.$slots?.logo ? (t(), r("div", {
+                    key: 0,
+                    class: n(["py-4.5 flex items-center px-4.5 z-10", l.logoClass])
+                  }, [
+                    o(e.$slots, "logo", {}, () => [
+                      s[10] || (s[10] = a("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+                    ])
+                  ], 2)) : d("", !0),
+                  a("div", {
+                    class: n(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin", l.contentClass])
+                  }, [
+                    o(e.$slots, "left"),
+                    o(e.$slots, "default"),
+                    o(e.$slots, "center")
+                  ], 2),
+                  e.$slots?.right ? (t(), r("div", {
+                    key: 1,
+                    class: n(["p-2 border-t border-border shrink-0 bg-background mt-auto", l.rightClass])
+                  }, [
+                    o(e.$slots, "right")
+                  ], 2)) : d("", !0)
+                ], 2)
+              ], 64))
+            ], 6), [
+              [te, !K.value]
+            ])
+          ]),
+          _: 3
+        }),
+        e.$slots.main ? (t(), r("main", ye, [
+          l.renderNestedTabs && w.value.length > 0 ? (t(), r("div", ke, [
+            c(ue, {
+              modelValue: $.value,
+              "onUpdate:modelValue": s[2] || (s[2] = (u) => $.value = u),
+              onChange: Y,
+              items: w.value
+            }, null, 8, ["modelValue", "items"])
+          ])) : d("", !0),
+          l.breadcrumb && l.breadcrumbPosition === "main" && x(B).items.value.length > 1 ? (t(), r("div", {
+            key: 1,
+            class: n(["shrink-0 w-full border-b border-border px-6 py-2", l.breadcrumbClass])
+          }, [
+            c(x(fe), {
+              items: x(B).items.value,
+              variant: l.breadcrumbVariant,
+              separator: l.breadcrumbSeparator,
+              size: l.breadcrumbSize
+            }, null, 8, ["items", "variant", "separator", "size"])
+          ], 2)) : d("", !0),
+          a("div", xe, [
+            o(e.$slots, "main")
+          ])
+        ])) : d("", !0),
+        l.mobileMenuVariant === "dropdown" ? (t(), r(h, { key: 1 }, [
+          i.value ? (t(), r("div", {
+            key: 0,
+            ref_key: "mobileMenuRef",
+            ref: M,
+            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])
+          }, [
+            a("div", we, [
+              o(e.$slots, "mobile-menu", {}, () => [
+                a("div", $e, [
+                  o(e.$slots, "left")
+                ]),
+                s[11] || (s[11] = a("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
+                a("div", Ce, [
+                  o(e.$slots, "center")
+                ])
+              ])
+            ])
+          ], 2)) : d("", !0)
+        ], 64)) : (t(), y(F, {
+          key: 2,
+          show: i.value,
+          "onUpdate:show": s[3] || (s[3] = (u) => i.value = u),
+          position: "left",
+          size: "sm",
+          triggerClass: f.value.mobileTrigger,
+          class: n(["z-60", f.value.mobileTrigger]),
+          headerClass: "pl-3! pr-4.5! py-3!",
+          bodyClass: "p-0!"
+        }, {
+          header: g(() => [
+            o(e.$slots, "logo", {}, () => [
+              s[12] || (s[12] = U("Brand", -1))
+            ])
+          ]),
+          default: g(() => [
+            a("div", Te, [
+              m.variant === "header" ? (t(), r("div", ze, [
+                o(e.$slots, "mobile-menu", {}, () => [
+                  o(e.$slots, "left"),
+                  s[13] || (s[13] = a("div", { class: "h-px bg-border my-2" }, null, -1)),
+                  o(e.$slots, "center")
+                ])
+              ])) : (t(), r("div", Be, [
+                o(e.$slots, "left"),
+                o(e.$slots, "default"),
+                o(e.$slots, "center")
+              ])),
+              e.$slots?.right ? (t(), r("div", Se, [
+                o(e.$slots, "right")
+              ])) : d("", !0)
+            ])
+          ]),
+          _: 3
+        }, 8, ["show", "triggerClass", "class"]))
+      ])
+    ])) : (t(), r("nav", {
+      key: 1,
+      class: n(j.value),
       role: "navigation"
     }, [
-      m.variant === "header" ? (t(), n(x, { key: 0 }, [
-        r("div", I, [
+      m.variant === "header" ? (t(), r(h, { key: 0 }, [
+        a("div", Me, [
           o(e.$slots, "mobile-trigger", {
-            isOpen: a.value,
-            toggle: () => a.value = !a.value
+            isOpen: i.value,
+            toggle: () => i.value = !i.value
           }, () => [
-            r("button", {
+            a("button", {
               type: "button",
               ref_key: "mobileTriggerRef",
-              ref: h,
-              class: i(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [u.value.mobileTrigger, l.mobileTriggerClass]]),
-              onClick: s[0] || (s[0] = (f) => a.value = !a.value)
+              ref: k,
+              class: n(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [f.value.mobileTrigger, l.mobileTriggerClass]]),
+              onClick: s[4] || (s[4] = (u) => i.value = !i.value)
             }, [
-              B(T, {
+              c(z, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
-              s[3] || (s[3] = r("span", { class: "sr-only" }, "Open Menu", -1))
+              s[14] || (s[14] = a("span", { class: "sr-only" }, "Open Menu", -1))
             ], 2)
           ]),
-          e.$slots?.logo ? (t(), n("div", {
+          e.$slots?.logo ? (t(), r("div", {
             key: 0,
-            class: i(["shrink-0", l.logoClass])
+            class: n(["shrink-0", l.logoClass])
           }, [
             o(e.$slots, "logo", {}, () => [
-              (t(), y(P(l.logo ? "img" : "div"), {
+              (t(), y(E(l.logo ? "img" : "div"), {
                 src: l.logo,
                 class: "h-8 w-auto font-bold text-xl flex items-center gap-2"
               }, {
-                default: k(() => [
-                  l.logo ? d("", !0) : (t(), y(G, {
+                default: g(() => [
+                  l.logo ? d("", !0) : (t(), y(W, {
                     key: 0,
                     class: "h-6 w-6"
                   })),
-                  !l.logo && l.logoAlt ? (t(), n("span", J, A(l.logoAlt), 1)) : l.logo ? d("", !0) : (t(), n("span", K, "Brand"))
+                  !l.logo && l.logoAlt ? (t(), r("span", Oe, I(l.logoAlt), 1)) : l.logo ? d("", !0) : (t(), r("span", Ve, "Brand"))
                 ]),
                 _: 1
               }, 8, ["src"]))
             ])
           ], 2)) : d("", !0),
-          e.$slots?.left ? (t(), n("div", {
+          e.$slots?.left ? (t(), r("div", {
             key: 1,
-            class: i(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", u.value.desktopContent])
+            class: n(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", f.value.desktopContent])
           }, [
             o(e.$slots, "left")
           ], 2)) : d("", !0)
         ]),
-        e.$slots?.center ? (t(), n("div", {
+        e.$slots?.center ? (t(), r("div", {
           key: 0,
-          class: i([
-            M.value,
-            // Width constraint to ensure it doesn't crush others, but allows simple resizing
-            "max-w-full",
-            l.contentClass
-          ])
+          class: n([A.value, "max-w-full", l.contentClass])
         }, [
           o(e.$slots, "center")
         ], 2)) : d("", !0),
-        r("div", {
-          class: i(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
+        a("div", {
+          class: n(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
             {
-              // Always push to end unless Center is pushing it.
-              // If Center is 'center' (mx-auto) or 'right' (ml-auto), this naturally falls to end.
-              // If Center is 'left', we MUST have ml-auto here.
               "ml-auto": m.centerPosition === "left" || m.centerPosition === "center"
-              // If center is 'right', Center has ml-auto. Right just sits next to it.
-              // But if we add ml-auto here too, they might split space? No, flexbox parses strictly.
             },
             l.rightClass
           ]])
         }, [
           o(e.$slots, "right")
         ], 2)
-      ], 64)) : (t(), n(x, { key: 1 }, [
-        r("div", {
-          class: i(u.value.mobileHeader)
+      ], 64)) : (t(), r(h, { key: 1 }, [
+        a("div", {
+          class: n(f.value.mobileHeader)
         }, [
           e.$slots?.logo ? o(e.$slots, "logo", { key: 0 }, () => [
-            s[4] || (s[4] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+            s[15] || (s[15] = a("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
           ]) : d("", !0),
           o(e.$slots, "mobile-trigger", {
-            isOpen: a.value,
-            toggle: () => a.value = !a.value
+            isOpen: i.value,
+            toggle: () => i.value = !i.value
           }, () => [
-            r("button", {
+            a("button", {
               type: "button",
               ref_key: "mobileTriggerRef",
-              ref: h,
-              class: i(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", l.mobileTriggerClass]),
-              onClick: s[1] || (s[1] = (f) => a.value = !a.value)
+              ref: k,
+              class: n(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", l.mobileTriggerClass]),
+              onClick: s[5] || (s[5] = (u) => i.value = !i.value)
             }, [
-              B(T, {
+              c(z, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
-              s[5] || (s[5] = r("span", { class: "sr-only" }, "Open Menu", -1))
+              s[16] || (s[16] = a("span", { class: "sr-only" }, "Open Menu", -1))
             ], 2)
           ])
         ], 2),
-        r("div", {
-          class: i(u.value.desktopSidebar)
+        a("div", {
+          class: n(f.value.desktopSidebar)
         }, [
-          e.$slots?.logo ? (t(), n("div", {
+          e.$slots?.logo ? (t(), r("div", {
             key: 0,
-            class: i(["py-4.5 flex items-center px-4.5 z-10", l.logoClass])
+            class: n(["py-4.5 flex items-center px-4.5 z-10", l.logoClass])
           }, [
             o(e.$slots, "logo", {}, () => [
-              s[6] || (s[6] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+              s[17] || (s[17] = a("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
             ])
           ], 2)) : d("", !0),
-          r("div", {
-            class: i(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin", l.contentClass])
+          a("div", {
+            class: n(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin", l.contentClass])
           }, [
             o(e.$slots, "left"),
             o(e.$slots, "default"),
             o(e.$slots, "center")
           ], 2),
-          e.$slots?.right ? (t(), n("div", {
+          e.$slots?.right ? (t(), r("div", {
             key: 1,
-            class: i(["p-2 border-t border-border shrink-0 bg-background mt-auto", l.rightClass])
+            class: n(["p-2 border-t border-border shrink-0 bg-background mt-auto", l.rightClass])
           }, [
             o(e.$slots, "right")
           ], 2)) : d("", !0)
         ], 2)
       ], 64)),
-      l.mobileMenuVariant === "dropdown" ? (t(), n(x, { key: 2 }, [
-        a.value ? (t(), n("div", {
+      l.mobileMenuVariant === "dropdown" ? (t(), r(h, { key: 2 }, [
+        i.value ? (t(), r("div", {
           key: 0,
           ref_key: "mobileMenuRef",
-          ref: w,
-          class: i(["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])
+          ref: M,
+          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])
         }, [
-          r("div", Q, [
+          a("div", Ne, [
             o(e.$slots, "mobile-menu", {}, () => [
-              r("div", W, [
+              a("div", Le, [
                 o(e.$slots, "left")
               ]),
-              s[7] || (s[7] = r("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
-              r("div", X, [
+              s[18] || (s[18] = a("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
+              a("div", Re, [
                 o(e.$slots, "center")
               ])
             ])
           ])
         ], 2)) : d("", !0)
-      ], 64)) : (t(), y(q, {
+      ], 64)) : (t(), y(F, {
         key: 3,
-        show: a.value,
-        "onUpdate:show": s[2] || (s[2] = (f) => a.value = f),
+        show: i.value,
+        "onUpdate:show": s[6] || (s[6] = (u) => i.value = u),
         position: "left",
         size: "sm",
-        triggerClass: u.value.mobileTrigger,
-        class: i(["z-60", u.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: k(() => [
+        header: g(() => [
           o(e.$slots, "logo", {}, () => [
-            s[8] || (s[8] = D("Brand", -1))
+            s[19] || (s[19] = U("Brand", -1))
           ])
         ]),
-        default: k(() => [
-          r("div", Z, [
-            m.variant === "header" ? (t(), n("div", _, [
+        default: g(() => [
+          a("div", Pe, [
+            m.variant === "header" ? (t(), r("div", He, [
               o(e.$slots, "mobile-menu", {}, () => [
                 o(e.$slots, "left"),
-                s[9] || (s[9] = r("div", { class: "h-px bg-border my-2" }, null, -1)),
+                s[20] || (s[20] = a("div", { class: "h-px bg-border my-2" }, null, -1)),
                 o(e.$slots, "center")
               ])
-            ])) : (t(), n("div", ee, [
+            ])) : (t(), r("div", je, [
               o(e.$slots, "left"),
               o(e.$slots, "default"),
               o(e.$slots, "center")
             ])),
-            e.$slots?.right ? (t(), n("div", le, [
+            e.$slots?.right ? (t(), r("div", Ae, [
               o(e.$slots, "right")
             ])) : d("", !0)
           ])
@@ -316,5 +588,5 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
   }
 });
 export {
-  ue as default
+  Ze as default
 };