@pelatform/starter.shared 0.2.15 → 0.2.17

package/dist/index.js

@@ -5,6 +5,7 @@ import Link3 from "next/link";
 import { usePathname } from "next/navigation";
 import { useTranslations as useTranslations4 } from "next-intl";
 import { useConfig as useConfig3 } from "@pelatform/starter.hook";
+import { cn as cn3 } from "pelatform-ui";
 import { LayoutBlank } from "pelatform-ui/components";
 
 // src/components/logo.tsx
@@ -52,11 +53,11 @@ import { useTranslations as useTranslations2 } from "next-intl";
 import { useSession as useSession2 } from "@pelatform/starter.hook";
 import { ScreenLoader } from "pelatform-ui/components";
 import { jsx as jsx3 } from "react/jsx-runtime";
-function LayoutLoader({ children }) {
+function LayoutLoader({ children, className }) {
   const t = useTranslations2();
   const { isPending } = useSession2();
   if (isPending) {
-    return /* @__PURE__ */ jsx3(ScreenLoader, { loadingText: t("common.status.loading") });
+    return /* @__PURE__ */ jsx3(ScreenLoader, { className, loadingText: t("common.status.loading") });
   }
   return children;
 }
@@ -148,6 +149,7 @@ function ToolbarRSC({ show = DEFAULT_SHOW }) {
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function AuthLayout({
   children,
+  className,
   logo = /* @__PURE__ */ jsx6(LogoWithHref, {}),
   disableFooter = false,
   signInHint = false,
@@ -184,7 +186,7 @@ function AuthLayout({
     /* @__PURE__ */ jsx6(
       LayoutBlank,
       {
-        className: "[&_.max-w-4xl]:max-w-sm [&_.max-w-4xl]:px-0",
+        className: cn3("[&_.max-w-4xl]:max-w-sm [&_.max-w-4xl]:px-0", className),
         logo,
         footer: disableFooter || pathname === path.auth.SIGN_OUT || pathname === path.auth.CALLBACK ? null : footer,
         children
@@ -200,6 +202,7 @@ import { useEffect as useEffect2, useState as useState2 } from "react";
 import { usePathname as usePathname2 } from "next/navigation";
 import { MenuIcon, PanelRightIcon } from "lucide-react";
 import { useLayout } from "@pelatform/starter.hook";
+import { cn as cn6 } from "pelatform-ui";
 import {
   Button as Button2,
   Sheet,
@@ -215,7 +218,14 @@ import {
 import { Fragment as Fragment2, useCallback, useEffect, useState } from "react";
 import Link4 from "next/link";
 import { useRouter as useRouter2 } from "next/navigation";
-import { HouseIcon, LogOutIcon, PlusCircleIcon, SettingsIcon, ShieldIcon } from "lucide-react";
+import {
+  HouseIcon,
+  LogOutIcon,
+  PlusCircleIcon,
+  SettingsIcon,
+  ShieldIcon,
+  UserStarIcon
+} from "lucide-react";
 import { useTranslations as useTranslations7 } from "next-intl";
 import {
   useConfig as useConfig4,
@@ -238,13 +248,13 @@ import {
 // src/components/view.tsx
 import { KeyRoundIcon } from "lucide-react";
 import { useLocale as useLocale2, useTranslations as useTranslations6 } from "next-intl";
-import { cn as cn4, formatDate, getUserName as getUserName2 } from "pelatform-ui";
+import { cn as cn5, formatDate, getUserName as getUserName2 } from "pelatform-ui";
 import { Skeleton as Skeleton2 } from "pelatform-ui/default";
 
 // src/components/avatar.tsx
 import { BuildingIcon, UserRoundIcon } from "lucide-react";
 import { useTranslations as useTranslations5 } from "next-intl";
-import { cn as cn3, getSizeAvatar, getUserName } from "pelatform-ui";
+import { cn as cn4, getSizeAvatar, getUserName } from "pelatform-ui";
 import { getInitials } from "pelatform-ui/components";
 import { Avatar, AvatarFallback, AvatarImage, Skeleton } from "pelatform-ui/default";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -264,7 +274,7 @@ function UserAvatar({
     return /* @__PURE__ */ jsx7(
       Skeleton,
       {
-        className: cn3(
+        className: cn4(
           "shrink-0 rounded-full",
           getSizeAvatar(size),
           className,
@@ -277,7 +287,7 @@ function UserAvatar({
   return /* @__PURE__ */ jsxs5(
     Avatar,
     {
-      className: cn3("rounded-full bg-accent", getSizeAvatar(size), className, classNames?.base),
+      className: cn4("rounded-full bg-accent", getSizeAvatar(size), className, classNames?.base),
       ...props,
       children: [
         /* @__PURE__ */ jsx7(
@@ -291,9 +301,9 @@ function UserAvatar({
         /* @__PURE__ */ jsx7(
           AvatarFallback,
           {
-            className: cn3("text-foreground uppercase", classNames?.fallback),
+            className: cn4("text-foreground uppercase", classNames?.fallback),
             delayMs: src ? 600 : void 0,
-            children: getInitials(name, 2) || /* @__PURE__ */ jsx7(UserRoundIcon, { className: cn3("size-[50%]", classNames?.fallbackIcon) })
+            children: getInitials(name, 2) || /* @__PURE__ */ jsx7(UserRoundIcon, { className: cn4("size-[50%]", classNames?.fallbackIcon) })
           }
         )
       ]
@@ -316,7 +326,7 @@ function WorkspaceLogo({
     return /* @__PURE__ */ jsx7(
       Skeleton,
       {
-        className: cn3(
+        className: cn4(
           "shrink-0 rounded-full",
           getSizeAvatar(size),
           className,
@@ -329,7 +339,7 @@ function WorkspaceLogo({
   return /* @__PURE__ */ jsxs5(
     Avatar,
     {
-      className: cn3("rounded-full bg-accent", getSizeAvatar(size), className, classNames?.base),
+      className: cn4("rounded-full bg-accent", getSizeAvatar(size), className, classNames?.base),
       ...props,
       children: [
         /* @__PURE__ */ jsx7(
@@ -343,9 +353,9 @@ function WorkspaceLogo({
         /* @__PURE__ */ jsx7(
           AvatarFallback,
           {
-            className: cn3("text-foreground", classNames?.fallback),
+            className: cn4("text-foreground", classNames?.fallback),
             delayMs: src ? 600 : void 0,
-            children: /* @__PURE__ */ jsx7(BuildingIcon, { className: cn3("size-[50%]", classNames?.fallbackIcon) })
+            children: /* @__PURE__ */ jsx7(BuildingIcon, { className: cn4("size-[50%]", classNames?.fallbackIcon) })
           }
         )
       ]
@@ -357,22 +367,22 @@ function WorkspaceLogo({
 import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function UserView({ className, classNames, isPending, size, user }) {
   const t = useTranslations6();
-  return /* @__PURE__ */ jsxs6("div", { className: cn4("flex items-center gap-2", className, classNames?.base), children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn5("flex items-center gap-2", className, classNames?.base), children: [
     /* @__PURE__ */ jsx8(
       UserAvatar,
       {
-        className: cn4(size !== "sm" && "my-0.5"),
+        className: cn5(size !== "sm" && "my-0.5"),
         classNames: classNames?.avatar,
         isPending,
         size,
         user
       }
     ),
-    /* @__PURE__ */ jsx8("div", { className: cn4("grid flex-1 text-start leading-tight", classNames?.content), children: isPending ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx8("div", { className: cn5("grid flex-1 text-start leading-tight", classNames?.content), children: isPending ? /* @__PURE__ */ jsxs6(Fragment, { children: [
       /* @__PURE__ */ jsx8(
         Skeleton2,
         {
-          className: cn4(
+          className: cn5(
             "max-w-full",
             size === "lg" ? "h-4.5 w-32" : "h-3.5 w-24",
             classNames?.title,
@@ -383,7 +393,7 @@ function UserView({ className, classNames, isPending, size, user }) {
       size !== "sm" && /* @__PURE__ */ jsx8(
         Skeleton2,
         {
-          className: cn4(
+          className: cn5(
             "mt-1.5 max-w-full",
             size === "lg" ? "h-3.5 w-40" : "h-3 w-32",
             classNames?.subtitle,
@@ -395,7 +405,7 @@ function UserView({ className, classNames, isPending, size, user }) {
       /* @__PURE__ */ jsx8(
         "span",
         {
-          className: cn4(
+          className: cn5(
             "truncate font-semibold",
             size === "lg" ? "text-base" : "text-sm",
             classNames?.title
@@ -406,7 +416,7 @@ function UserView({ className, classNames, isPending, size, user }) {
       !user?.isAnonymous && size !== "sm" && (user?.name || user?.username) && /* @__PURE__ */ jsx8(
         "span",
         {
-          className: cn4(
+          className: cn5(
             "truncate opacity-70",
             size === "lg" ? "text-sm" : "text-xs",
             classNames?.subtitle
@@ -431,8 +441,8 @@ function ApiKeyView({ className, classNames, apiKey }) {
     );
     return `${t("common.time.expires")} ${expiresDate}`;
   };
-  return /* @__PURE__ */ jsxs6("div", { className: cn4("flex items-center gap-3 truncate", className, classNames?.base), children: [
-    /* @__PURE__ */ jsx8(KeyRoundIcon, { className: cn4("size-4 shrink-0", classNames?.icon) }),
+  return /* @__PURE__ */ jsxs6("div", { className: cn5("flex items-center gap-3 truncate", className, classNames?.base), children: [
+    /* @__PURE__ */ jsx8(KeyRoundIcon, { className: cn5("size-4 shrink-0", classNames?.icon) }),
     /* @__PURE__ */ jsxs6("div", { className: "flex flex-col truncate text-start", children: [
       /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx8("span", { className: "truncate font-semibold text-sm", children: apiKey.name }),
@@ -447,22 +457,22 @@ function ApiKeyView({ className, classNames, apiKey }) {
 }
 function WorkspaceView({ className, classNames, isPending, size, workspace }) {
   const t = useTranslations6();
-  return /* @__PURE__ */ jsxs6("div", { className: cn4("flex items-center gap-2 truncate", className, classNames?.base), children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn5("flex items-center gap-2 truncate", className, classNames?.base), children: [
     /* @__PURE__ */ jsx8(
       WorkspaceLogo,
       {
-        className: cn4(size !== "sm" && "my-0.5"),
+        className: cn5(size !== "sm" && "my-0.5"),
         classNames: classNames?.avatar,
         isPending,
         workspace,
         size
       }
     ),
-    /* @__PURE__ */ jsx8("div", { className: cn4("flex flex-col truncate text-start leading-tight", classNames?.content), children: isPending ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx8("div", { className: cn5("flex flex-col truncate text-start leading-tight", classNames?.content), children: isPending ? /* @__PURE__ */ jsxs6(Fragment, { children: [
       /* @__PURE__ */ jsx8(
         Skeleton2,
         {
-          className: cn4(
+          className: cn5(
             "max-w-full",
             size === "lg" ? "h-4.5 w-32" : "h-3.5 w-24",
             classNames?.title,
@@ -473,7 +483,7 @@ function WorkspaceView({ className, classNames, isPending, size, workspace }) {
       size !== "sm" && /* @__PURE__ */ jsx8(
         Skeleton2,
         {
-          className: cn4(
+          className: cn5(
             "mt-1.5 max-w-full",
             size === "lg" ? "h-3.5 w-24" : "h-3 w-16",
             classNames?.subtitle,
@@ -485,7 +495,7 @@ function WorkspaceView({ className, classNames, isPending, size, workspace }) {
       /* @__PURE__ */ jsx8(
         "span",
         {
-          className: cn4(
+          className: cn5(
             "truncate font-semibold",
             size === "lg" ? "text-base" : "text-sm",
             classNames?.title
@@ -496,7 +506,7 @@ function WorkspaceView({ className, classNames, isPending, size, workspace }) {
       size !== "sm" && workspace?.slug && /* @__PURE__ */ jsx8(
         "span",
         {
-          className: cn4(
+          className: cn5(
             "truncate opacity-70",
             size === "lg" ? "text-sm" : "text-xs",
             classNames?.subtitle
@@ -512,7 +522,13 @@ function WorkspaceView({ className, classNames, isPending, size, workspace }) {
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function UserMenu({
   homeUrl,
-  hiddenSwitcher = false
+  disableSettings = false,
+  disableSecurity = false,
+  disableAdminMenu = true,
+  hiddenSwitcher = false,
+  side = "bottom",
+  align = "end",
+  sideOffset = 11
 }) {
   const { auth, features, path } = useConfig4();
   const router = useRouter2();
@@ -553,7 +569,7 @@ function UserMenu({
   const userRole = user?.role || "user";
   return /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
     /* @__PURE__ */ jsx9(DropdownMenuTrigger, { className: "focus:outline-none focus:ring-0", children: isPending ? /* @__PURE__ */ jsx9(Skeleton3, { className: "size-8 shrink-0 rounded-full" }) : /* @__PURE__ */ jsx9(UserAvatar2, { className: "size-8", indicator: true, src: userAvatar, alt: userName }) }),
-    /* @__PURE__ */ jsxs7(DropdownMenuContent, { className: "w-56", side: "bottom", align: "end", sideOffset: 11, children: [
+    /* @__PURE__ */ jsxs7(DropdownMenuContent, { className: "w-56", side, align, sideOffset, children: [
       /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 px-3 py-2", children: [
         /* @__PURE__ */ jsx9(UserAvatar2, { src: userAvatar, alt: userName }),
         /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-1 flex-col items-start", children: [
@@ -567,14 +583,18 @@ function UserMenu({
         /* @__PURE__ */ jsx9(HouseIcon, {}),
         /* @__PURE__ */ jsx9("span", { children: t("ui.navigation.home") })
       ] }) }),
-      /* @__PURE__ */ jsx9(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs7(Link4, { href: path.account.SETTINGS, children: [
+      !disableSettings && /* @__PURE__ */ jsx9(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs7(Link4, { href: path.account.SETTINGS, children: [
         /* @__PURE__ */ jsx9(SettingsIcon, {}),
         /* @__PURE__ */ jsx9("span", { children: t("ui.navigation.preferences") })
       ] }) }),
-      /* @__PURE__ */ jsx9(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs7(Link4, { href: path.account.SECURITY, children: [
+      !disableSecurity && /* @__PURE__ */ jsx9(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs7(Link4, { href: path.account.SECURITY, children: [
         /* @__PURE__ */ jsx9(ShieldIcon, {}),
         /* @__PURE__ */ jsx9("span", { children: t("ui.navigation.security") })
       ] }) }),
+      !disableAdminMenu && "admin" === userRole && /* @__PURE__ */ jsx9(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs7(Link4, { href: path.admin.OVERVIEW, children: [
+        /* @__PURE__ */ jsx9(UserStarIcon, {}),
+        /* @__PURE__ */ jsx9("span", { children: "Admin Dashboard" })
+      ] }) }),
       !hiddenSwitcher && /* @__PURE__ */ jsxs7(Fragment3, { children: [
         /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
         /* @__PURE__ */ jsx9(
@@ -627,12 +647,34 @@ function UserMenu({
 
 // src/components/layouts/header.tsx
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-function Header({ children }) {
-  return /* @__PURE__ */ jsx10("header", { className: "fixed start-0 end-0 top-0 z-10 flex h-(--header-height-mobile) shrink-0 items-stretch border-border border-b bg-background/95 pe-(--removed-body-scroll-bar-size,0px) backdrop-blur-sm supports-backdrop-filter:bg-background/60 lg:h-(--header-height)", children: /* @__PURE__ */ jsx10("div", { className: "@container flex grow items-stretch justify-between gap-2.5 pe-5", children }) });
+function Header({ children, className }) {
+  const { version } = useLayout();
+  if (version === "v2") {
+    return /* @__PURE__ */ jsx10(
+      "header",
+      {
+        className: cn6(
+          "fixed start-0 end-0 top-0 z-50 flex h-(--header-height-mobile) shrink-0 items-center bg-background/95 pe-[var(--removed-body-scroll-bar-size,0px)] backdrop-blur-sm transition-[start,end] duration-300 supports-backdrop-filter:bg-muted",
+          className
+        ),
+        children: /* @__PURE__ */ jsx10("div", { className: "@container flex grow items-stretch justify-between gap-2.5 pe-5", children })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx10(
+    "header",
+    {
+      className: cn6(
+        "fixed start-0 end-0 top-0 z-10 flex h-(--header-height-mobile) shrink-0 items-stretch border-border border-b bg-background/95 pe-(--removed-body-scroll-bar-size,0px) backdrop-blur-sm supports-backdrop-filter:bg-background/60 lg:h-(--header-height)",
+        className
+      ),
+      children: /* @__PURE__ */ jsx10("div", { className: "@container flex grow items-stretch justify-between gap-2.5 pe-5", children })
+    }
+  );
 }
-function HeaderLeft() {
+function HeaderLeft({ className }) {
   const { logoHeader, sidebarToggle } = useLayout();
-  return /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-2 px-5 lg:w-(--sidebar-width)", children: /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center justify-between", children: [
+  return /* @__PURE__ */ jsx10("div", { className: cn6("flex items-center gap-2 px-5 lg:w-(--sidebar-width)", className), children: /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center justify-between", children: [
     logoHeader,
     /* @__PURE__ */ jsx10(
       Button2,
@@ -647,18 +689,22 @@ function HeaderLeft() {
   ] }) });
 }
 function HeaderRight({
+  className,
   sidebar,
   button,
   homeUrl
 }) {
   const { isMobile } = useLayout();
-  return /* @__PURE__ */ jsxs8("nav", { className: "flex items-center gap-1.5 lg:gap-2.5", children: [
+  return /* @__PURE__ */ jsxs8("nav", { className: cn6("flex items-center gap-1.5 lg:gap-2.5", className), children: [
     button,
     isMobile && sidebar,
     /* @__PURE__ */ jsx10(UserMenu, { homeUrl })
   ] });
 }
-function HeaderSidebarMobile({ children }) {
+function HeaderSidebarMobile({
+  children,
+  className
+}) {
   const pathname = usePathname2();
   const [isSheetOpen, setIsSheetOpen] = useState2(false);
   useEffect2(() => {
@@ -666,13 +712,21 @@ function HeaderSidebarMobile({ children }) {
   }, [pathname]);
   return /* @__PURE__ */ jsxs8(Sheet, { open: isSheetOpen, onOpenChange: setIsSheetOpen, children: [
     /* @__PURE__ */ jsx10(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(Button2, { variant: "ghost", mode: "icon", size: "icon", children: /* @__PURE__ */ jsx10(MenuIcon, { className: "size-4" }) }) }),
-    /* @__PURE__ */ jsxs8(SheetContent, { className: "w-(--sidebar-width) gap-0 p-0", side: "left", close: false, children: [
-      /* @__PURE__ */ jsxs8(SheetHeader, { className: "hidden space-y-0 p-0", children: [
-        /* @__PURE__ */ jsx10(SheetTitle, { className: "sr-only", children: "Navigation menu" }),
-        /* @__PURE__ */ jsx10(SheetDescription, { className: "sr-only", children: "NavigatSheet Description" })
-      ] }),
-      /* @__PURE__ */ jsx10(SheetBody, { className: "flex grow flex-col p-0", children })
-    ] })
+    /* @__PURE__ */ jsxs8(
+      SheetContent,
+      {
+        className: cn6("w-(--sidebar-width) gap-0 p-0", className),
+        side: "left",
+        close: false,
+        children: [
+          /* @__PURE__ */ jsxs8(SheetHeader, { className: "hidden space-y-0 p-0", children: [
+            /* @__PURE__ */ jsx10(SheetTitle, { className: "sr-only", children: "Navigation menu" }),
+            /* @__PURE__ */ jsx10(SheetDescription, { className: "sr-only", children: "NavigatSheet Description" })
+          ] }),
+          /* @__PURE__ */ jsx10(SheetBody, { className: "flex grow flex-col p-0", children })
+        ]
+      }
+    )
   ] });
 }
 
@@ -682,6 +736,7 @@ import Link5 from "next/link";
 import { usePathname as usePathname3 } from "next/navigation";
 import { useLocale as useLocale3, useTranslations as useTranslations8 } from "next-intl";
 import { useLayout as useLayout2 } from "@pelatform/starter.hook";
+import { cn as cn7 } from "pelatform-ui";
 import { BackLink } from "pelatform-ui/components";
 import {
   AccordionMenu,
@@ -696,28 +751,85 @@ import {
   ScrollArea
 } from "pelatform-ui/default";
 import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-function Sidebar({ children }) {
-  const { isMobile } = useLayout2();
+function Sidebar({ children, className }) {
+  const { isMobile, logoHeader, version } = useLayout2();
   if (isMobile) {
     return null;
   }
-  return /* @__PURE__ */ jsxs9("aside", { className: "fixed in-data-[sidebar-open=false]:-start-full start-0 top-(--header-height) bottom-0 flex w-(--sidebar-width) shrink-0 flex-col items-stretch border-border border-e transition-all duration-300", children: [
-    children,
-    /* @__PURE__ */ jsx11("div", {})
-  ] });
+  if (version === "v2") {
+    return /* @__PURE__ */ jsx11(
+      "aside",
+      {
+        className: cn7(
+          "fixed start-2.5 top-2.5 bottom-2.5 z-20 flex in-data-[sidebar-open=false]:w-(--sidebar-width-collapsed) w-(--sidebar-width) shrink-0 items-stretch overflow-hidden rounded-xl border border-input bg-background transition-all duration-300",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs9("div", { className: "w-(--sidebar-width) shrink-0 grow transition-all duration-300", children: [
+          /* @__PURE__ */ jsx11("div", { className: "flex h-14 shrink-0 items-center justify-center px-2.5 lg:h-15", children: logoHeader }),
+          children
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs9(
+    "aside",
+    {
+      className: cn7(
+        "fixed in-data-[sidebar-open=false]:-start-full start-0 top-(--header-height) bottom-0 flex w-(--sidebar-width) shrink-0 flex-col items-stretch border-border border-e transition-all duration-300",
+        className
+      ),
+      children: [
+        children,
+        /* @__PURE__ */ jsx11("div", {})
+      ]
+    }
+  );
 }
 function SidebarHeaderBack({
+  className,
   linkHref = "/",
   admin = false,
   text
 }) {
   const t = useTranslations8();
-  return /* @__PURE__ */ jsx11("div", { className: "flex h-14 shrink-0 items-center gap-2 border-border border-b px-2.5 lg:h-15", children: /* @__PURE__ */ jsx11(BackLink, { Link: Link5, href: linkHref, children: text ?? (admin ? t("common.actions.back") : t("ui.navigation.settings")) }) });
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: cn7(
+        "flex h-14 shrink-0 items-center gap-2 border-border border-b px-2.5 lg:h-15",
+        className
+      ),
+      children: /* @__PURE__ */ jsx11(BackLink, { Link: Link5, href: linkHref, children: text ?? (admin ? t("common.actions.back") : t("ui.navigation.settings")) })
+    }
+  );
 }
-function SidebarContent({ children }) {
-  return /* @__PURE__ */ jsx11(ScrollArea, { className: "mt-2 mb-2.5 h-[calc(100vh-5.5rem)] grow lg:mt-4 lg:mb-7.5 lg:h-[calc(100vh-4rem)]", children });
+function SidebarContent({
+  children,
+  className
+}) {
+  const { isMobile, version } = useLayout2();
+  if (version === "v2") {
+    return /* @__PURE__ */ jsx11(
+      ScrollArea,
+      {
+        className: cn7(
+          isMobile ? "my-2 h-[calc(100vh-5.5rem)] grow" : "my-2 h-[calc(100vh-1rem)] w-full shrink-0 lg:my-4 lg:h-[calc(100vh-14.7rem)]",
+          className
+        ),
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx11(
+    ScrollArea,
+    {
+      className: cn7("my-2 h-[calc(100vh-5.5rem)] grow lg:my-4 lg:h-[calc(100vh-4rem)]", className),
+      children
+    }
+  );
 }
 function SidebarContentMenu({
+  className,
   menu,
   type = "default"
 }) {
@@ -766,7 +878,7 @@ function SidebarContentMenu({
         defaultValue: "menu-trigger",
         matchPath,
         collapsible: true,
-        className: "space-y-7.5 px-2.5",
+        className: cn7("space-y-7.5 px-2.5", className),
         classNames: {
           item: "h-8.5 px-2.5 text-sm font-normal text-foreground hover:text-primary data-[selected=true]:bg-muted data-[selected=true]:text-foreground [&[data-selected=true]_svg]:opacity-100",
           subTrigger: "text-xs font-normal text-muted-foreground hover:bg-transparent",
@@ -817,7 +929,7 @@ function SidebarContentMenu({
       type: "multiple",
       selectedValue: pathname,
       matchPath,
-      className: "space-y-7.5 px-2.5",
+      className: cn7("space-y-7.5 px-2.5", className),
       classNames: {
         label: "text-xs font-normal text-muted-foreground mb-2",
         item: "h-8.5 px-2.5 text-sm font-normal text-foreground hover:text-primary data-[selected=true]:bg-muted data-[selected=true]:font-medium data-[selected=true]:text-foreground [&[data-selected=true]_svg]:opacity-100",
@@ -860,41 +972,72 @@ function SidebarContentMenu({
     }
   );
 }
+function SidebarFooter({
+  children,
+  className,
+  side = "top",
+  align = "start",
+  sideOffset = 10,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: cn7(
+        "flex h-14 shrink-0 items-center gap-2 border-border border-t px-2.5 lg:h-15",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx11(UserMenu, { side, align, sideOffset, ...props }),
+        children
+      ]
+    }
+  );
+}
 
 // src/components/layouts/site-footer.tsx
 import Link6 from "next/link";
 import { useTranslations as useTranslations9 } from "next-intl";
 import { useConfig as useConfig5 } from "@pelatform/starter.hook";
-import { cn as cn5 } from "pelatform-ui";
+import { cn as cn8 } from "pelatform-ui";
 import { SiteFooter as UISiteFooter } from "pelatform-ui/components";
 import { Button as Button3 } from "pelatform-ui/default";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
-function SiteFooter({ disableProjectBy = false }) {
+function SiteFooter({
+  className,
+  disableProjectBy = false
+}) {
   const { app } = useConfig5();
   const t = useTranslations9();
-  return /* @__PURE__ */ jsxs10(UISiteFooter, { className: cn5("*:gap-2! *:py-0!", disableProjectBy ? "*:justify-center!" : ""), children: [
-    /* @__PURE__ */ jsxs10("div", { className: "text-balance text-center text-muted-foreground text-sm leading-loose md:text-left", children: [
-      "\xA9 ",
-      (/* @__PURE__ */ new Date()).getFullYear(),
-      " ",
-      app.name,
-      ". ",
-      t("ui.common.copyright")
-    ] }),
-    !disableProjectBy && /* @__PURE__ */ jsx12("div", { className: "flex items-center gap-2.5 text-balance text-sm leading-loose", children: /* @__PURE__ */ jsxs10("div", { className: "inline-flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground", children: t("ui.common.projectBy") }),
-      " ",
-      /* @__PURE__ */ jsx12(Button3, { mode: "link", underline: "dashed", children: /* @__PURE__ */ jsx12(
-        Link6,
-        {
-          href: "https://pelatform.com",
-          target: "_blank",
-          className: "font-medium text-foreground",
-          children: "Pelatform"
-        }
-      ) })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsxs10(
+    UISiteFooter,
+    {
+      className: cn8("*:gap-2! *:py-0!", disableProjectBy ? "*:justify-center!" : "", className),
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: "text-balance text-center text-muted-foreground text-sm leading-loose md:text-left", children: [
+          "\xA9 ",
+          (/* @__PURE__ */ new Date()).getFullYear(),
+          " ",
+          app.name,
+          ". ",
+          t("ui.common.copyright")
+        ] }),
+        !disableProjectBy && /* @__PURE__ */ jsx12("div", { className: "flex items-center gap-2.5 text-balance text-sm leading-loose", children: /* @__PURE__ */ jsxs10("div", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground", children: t("ui.common.projectBy") }),
+          " ",
+          /* @__PURE__ */ jsx12(Button3, { mode: "link", underline: "dashed", children: /* @__PURE__ */ jsx12(
+            Link6,
+            {
+              href: "https://pelatform.com",
+              target: "_blank",
+              className: "font-medium text-foreground",
+              children: "Pelatform"
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
 }
 
 // src/components/layouts/site-header.tsx
@@ -903,6 +1046,7 @@ import Link7 from "next/link";
 import { usePathname as usePathname4, useRouter as useRouter3 } from "next/navigation";
 import { useTranslations as useTranslations10 } from "next-intl";
 import { useConfig as useConfig6, useSession as useSession4 } from "@pelatform/starter.hook";
+import { cn as cn9 } from "pelatform-ui";
 import {
   MainNav,
   MobileNav,
@@ -913,6 +1057,7 @@ import {
 import { Button as Button4, Separator } from "pelatform-ui/default";
 import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function SiteHeader({
+  className,
   menu,
   logo = /* @__PURE__ */ jsx13(LogoWithHref, { href: "/" })
 }) {
@@ -923,45 +1068,52 @@ function SiteHeader({
   const { isPending, session, user } = useSession4();
   const [, setMobileNavOpen] = useState3(false);
   const isAuthenticated = !isPending && session && user;
-  return /* @__PURE__ */ jsxs11(UISiteHeader, { className: "backdrop-blur-none supports-backdrop-filter:bg-background", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4.5", children: [
-      logo,
-      /* @__PURE__ */ jsx13(MainNav, { Link: Link7, pathname, items: menu })
-    ] }),
-    /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-end gap-3", children: /* @__PURE__ */ jsxs11("nav", { className: "flex items-center gap-0 md:gap-1", children: [
-      /* @__PURE__ */ jsx13(ModeSwitcher3, {}),
-      /* @__PURE__ */ jsx13(LanguageSwitcher, {}),
-      /* @__PURE__ */ jsx13(Separator, { orientation: "vertical", className: "mx-3 h-5 max-lg:hidden" }),
-      /* @__PURE__ */ jsx13(MobileNav, { children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col space-y-3", children: [
-        menu?.map(
-          (item, navIndex) => item.href || item.children ? /* @__PURE__ */ jsx13(
-            MobileNavItemRenderer,
-            {
-              item,
-              Link: Link7,
-              pathname,
-              level: 1,
-              onOpenChange: setMobileNavOpen
-            },
-            `nav-${navIndex}-${item.href}`
-          ) : null
-        ),
-        /* @__PURE__ */ jsx13("div", { className: "border-t pt-3", children: isAuthenticated ? /* @__PURE__ */ jsx13(
-          Button4,
-          {
-            variant: "outline",
-            size: "sm",
-            className: "w-full",
-            onClick: () => router.push(path.auth.SIGN_OUT),
-            children: t("ui.navigation.signOut")
-          }
-        ) : /* @__PURE__ */ jsx13(Button4, { variant: "secondary", size: "sm", className: "w-full", children: /* @__PURE__ */ jsx13(Link7, { href: path.auth.SIGN_IN, children: t("ui.navigation.signIn") }) }) })
-      ] }) }),
-      isAuthenticated ? /* @__PURE__ */ jsx13(UserMenu, { hiddenSwitcher: true }) : /* @__PURE__ */ jsx13(Button4, { variant: "secondary", size: "sm", className: "hidden md:flex", children: /* @__PURE__ */ jsx13(Link7, { href: path.auth.SIGN_IN, children: t("ui.navigation.signIn") }) })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsxs11(
+    UISiteHeader,
+    {
+      className: cn9("backdrop-blur-none supports-backdrop-filter:bg-background", className),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4.5", children: [
+          logo,
+          /* @__PURE__ */ jsx13(MainNav, { Link: Link7, pathname, items: menu })
+        ] }),
+        /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-end gap-3", children: /* @__PURE__ */ jsxs11("nav", { className: "flex items-center gap-0 md:gap-1", children: [
+          /* @__PURE__ */ jsx13(ModeSwitcher3, {}),
+          /* @__PURE__ */ jsx13(LanguageSwitcher, {}),
+          /* @__PURE__ */ jsx13(Separator, { orientation: "vertical", className: "mx-3 h-5 max-lg:hidden" }),
+          /* @__PURE__ */ jsx13(MobileNav, { children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col space-y-3", children: [
+            menu?.map(
+              (item, navIndex) => item.href || item.children ? /* @__PURE__ */ jsx13(
+                MobileNavItemRenderer,
+                {
+                  item,
+                  Link: Link7,
+                  pathname,
+                  level: 1,
+                  onOpenChange: setMobileNavOpen
+                },
+                `nav-${navIndex}-${item.href}`
+              ) : null
+            ),
+            /* @__PURE__ */ jsx13("div", { className: "border-t pt-3", children: isAuthenticated ? /* @__PURE__ */ jsx13(
+              Button4,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "w-full",
+                onClick: () => router.push(path.auth.SIGN_OUT),
+                children: t("ui.navigation.signOut")
+              }
+            ) : /* @__PURE__ */ jsx13(Button4, { variant: "secondary", size: "sm", className: "w-full", children: /* @__PURE__ */ jsx13(Link7, { href: path.auth.SIGN_IN, children: t("ui.navigation.signIn") }) }) })
+          ] }) }),
+          isAuthenticated ? /* @__PURE__ */ jsx13(UserMenu, { hiddenSwitcher: true }) : /* @__PURE__ */ jsx13(Button4, { variant: "secondary", size: "sm", className: "hidden md:flex", children: /* @__PURE__ */ jsx13(Link7, { href: path.auth.SIGN_IN, children: t("ui.navigation.signIn") }) })
+        ] }) })
+      ]
+    }
+  );
 }
 function SiteHeaderSecondary({
+  className,
   menu,
   logo = /* @__PURE__ */ jsx13(LogoWithHref, { href: "/" }),
   loginHref,
@@ -970,84 +1122,112 @@ function SiteHeaderSecondary({
   const pathname = usePathname4();
   const t = useTranslations10();
   const [, setMobileNavOpen] = useState3(false);
-  return /* @__PURE__ */ jsxs11(UISiteHeader, { className: "backdrop-blur-none supports-backdrop-filter:bg-background", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4.5", children: [
-      logo,
-      /* @__PURE__ */ jsx13(MainNav, { Link: Link7, pathname, items: menu })
-    ] }),
-    /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-end gap-3", children: /* @__PURE__ */ jsxs11("nav", { className: "flex items-center gap-0 md:gap-1", children: [
-      /* @__PURE__ */ jsx13(ModeSwitcher3, {}),
-      /* @__PURE__ */ jsx13(LanguageSwitcher, {}),
-      /* @__PURE__ */ jsx13(MobileNav, { children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col space-y-3", children: [
-        menu?.map(
-          (item, navIndex) => item.href || item.children ? /* @__PURE__ */ jsx13(
-            MobileNavItemRenderer,
-            {
-              item,
-              Link: Link7,
-              pathname,
-              level: 1,
-              onOpenChange: setMobileNavOpen
-            },
-            `nav-${navIndex}-${item.href}`
-          ) : null
-        ),
-        loginHref && /* @__PURE__ */ jsx13("div", { className: "border-t pt-3", children: /* @__PURE__ */ jsx13(Button4, { variant: "secondary", size: "sm", className: "w-full", children: /* @__PURE__ */ jsx13(Link7, { href: loginHref, target: loginTarget, children: t("ui.navigation.signIn") }) }) })
-      ] }) }),
-      loginHref && /* @__PURE__ */ jsxs11(Fragment5, { children: [
-        /* @__PURE__ */ jsx13(Separator, { orientation: "vertical", className: "mx-3 h-5 max-md:hidden" }),
-        /* @__PURE__ */ jsx13(Button4, { variant: "secondary", size: "sm", className: "hidden md:flex", children: /* @__PURE__ */ jsx13(Link7, { href: loginHref, target: loginTarget, children: t("ui.navigation.signIn") }) })
-      ] })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsxs11(
+    UISiteHeader,
+    {
+      className: cn9("backdrop-blur-none supports-backdrop-filter:bg-background", className),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4.5", children: [
+          logo,
+          /* @__PURE__ */ jsx13(MainNav, { Link: Link7, pathname, items: menu })
+        ] }),
+        /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-end gap-3", children: /* @__PURE__ */ jsxs11("nav", { className: "flex items-center gap-0 md:gap-1", children: [
+          /* @__PURE__ */ jsx13(ModeSwitcher3, {}),
+          /* @__PURE__ */ jsx13(LanguageSwitcher, {}),
+          /* @__PURE__ */ jsx13(MobileNav, { children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col space-y-3", children: [
+            menu?.map(
+              (item, navIndex) => item.href || item.children ? /* @__PURE__ */ jsx13(
+                MobileNavItemRenderer,
+                {
+                  item,
+                  Link: Link7,
+                  pathname,
+                  level: 1,
+                  onOpenChange: setMobileNavOpen
+                },
+                `nav-${navIndex}-${item.href}`
+              ) : null
+            ),
+            loginHref && /* @__PURE__ */ jsx13("div", { className: "border-t pt-3", children: /* @__PURE__ */ jsx13(Button4, { variant: "secondary", size: "sm", className: "w-full", children: /* @__PURE__ */ jsx13(Link7, { href: loginHref, target: loginTarget, children: t("ui.navigation.signIn") }) }) })
+          ] }) }),
+          loginHref && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+            /* @__PURE__ */ jsx13(Separator, { orientation: "vertical", className: "mx-3 h-5 max-md:hidden" }),
+            /* @__PURE__ */ jsx13(Button4, { variant: "secondary", size: "sm", className: "hidden md:flex", children: /* @__PURE__ */ jsx13(Link7, { href: loginHref, target: loginTarget, children: t("ui.navigation.signIn") }) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
 }
 
 // src/components/layouts/wrapper.tsx
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import Link8 from "next/link";
 import { RocketIcon } from "lucide-react";
-import { useSession as useSession5 } from "@pelatform/starter.hook";
+import { useLayout as useLayout3, useSession as useSession5 } from "@pelatform/starter.hook";
+import { cn as cn11 } from "pelatform-ui";
 import { Button as Button5 } from "pelatform-ui/default";
 
 // src/components/providers/layout.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useState as useState4 } from "react";
 import { LayoutContext } from "@pelatform/starter.hook";
-import { cn as cn6 } from "pelatform-ui";
+import { cn as cn10 } from "pelatform-ui";
+import { TooltipProvider } from "pelatform-ui/default";
 import { useIsMobile } from "pelatform-ui/hooks";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var SIDEBAR_WIDTH = "240px";
 var HEADER_HEIGHT = "54px";
 var SIDEBAR_WIDTH_MOBILE = "240px";
 var HEADER_HEIGHT_MOBILE = "54px";
+var SIDEBAR_WIDTH_V2 = "255px";
+var HEADER_HEIGHT_V2 = "60px";
+var SIDEBAR_WIDTH_MOBILE_V2 = "60px";
+var HEADER_HEIGHT_MOBILE_V2 = "60px";
 function LayoutProvider({
   children,
   style: customStyle,
   bodyClassName = "",
   className = "",
-  logoHeader = /* @__PURE__ */ jsx14(LogoWithHref, {})
+  logoHeader = /* @__PURE__ */ jsx14(LogoWithHref, {}),
+  version = "v1"
 }) {
   const isMobile = useIsMobile();
   const [isSidebarOpen, setIsSidebarOpen] = useState4(true);
-  const defaultStyle = {
-    "--sidebar-width": SIDEBAR_WIDTH,
-    "--header-height": HEADER_HEIGHT,
-    "--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE,
-    "--header-height-mobile": HEADER_HEIGHT_MOBILE
-  };
-  const style = {
-    ...defaultStyle,
-    ...customStyle
-  };
+  const cssVariables = useMemo2(
+    () => ({
+      "--sidebar-width": version === "v1" ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_V2,
+      "--header-height": version === "v1" ? HEADER_HEIGHT : HEADER_HEIGHT_V2,
+      "--sidebar-width-mobile": version === "v1" ? SIDEBAR_WIDTH_MOBILE : SIDEBAR_WIDTH_MOBILE_V2,
+      "--header-height-mobile": version === "v1" ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT_MOBILE_V2,
+      ...customStyle || {}
+    }),
+    [version, customStyle]
+  );
+  const style = useMemo2(
+    () => ({
+      ...cssVariables
+    }),
+    [cssVariables]
+  );
   const sidebarToggle = () => setIsSidebarOpen((open) => !open);
   useEffect3(() => {
+    const html = document.documentElement;
+    const body = document.body;
+    const originalHtmlStyle = html.style.cssText;
+    const originalBodyClasses = body.className;
+    Object.entries(cssVariables).forEach(([prop, val]) => {
+      html.style.setProperty(prop, val);
+    });
     if (bodyClassName) {
-      const body = document.body;
-      const existingClasses = body.className;
-      body.className = `${existingClasses} ${bodyClassName}`.trim();
-      return () => {
-        body.className = existingClasses;
-      };
+      body.className = `${originalBodyClasses} ${bodyClassName}`.trim();
     }
-  }, [bodyClassName]);
+    body.setAttribute("data-sidebar-open", isSidebarOpen.toString());
+    return () => {
+      html.style.cssText = originalHtmlStyle;
+      body.className = originalBodyClasses;
+      body.removeAttribute("data-sidebar-open");
+    };
+  }, [cssVariables, bodyClassName, isSidebarOpen]);
   return /* @__PURE__ */ jsx14(
     LayoutContext.Provider,
     {
@@ -1057,16 +1237,17 @@ function LayoutProvider({
         isMobile,
         isSidebarOpen,
         sidebarToggle,
-        logoHeader
+        logoHeader,
+        version
       },
       children: /* @__PURE__ */ jsx14(
         "div",
         {
           "data-slot": "layout-wrapper",
-          className: cn6("flex grow", className),
+          className: cn10("flex grow", className),
           "data-sidebar-open": isSidebarOpen,
           style,
-          children
+          children: /* @__PURE__ */ jsx14(TooltipProvider, { delayDuration: 0, children })
         }
       )
     }
@@ -1077,42 +1258,142 @@ function LayoutProvider({
 import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function LayoutWrapper({
   children,
+  classNames,
+  logoHeader,
+  version = "v1",
+  ...props
+}) {
+  const isVersionV1 = version === "v1";
+  return /* @__PURE__ */ jsx15(
+    LayoutProvider,
+    {
+      logoHeader,
+      version,
+      bodyClassName: cn11(isVersionV1 ? "" : "bg-muted!", classNames?.body),
+      className: classNames?.layout,
+      children: isVersionV1 ? /* @__PURE__ */ jsx15(ContentWrapper, { classNames, ...props, children }) : /* @__PURE__ */ jsx15(ContentWrapperV2, { classNames, ...props, children })
+    }
+  );
+}
+function ContentWrapper({
+  children,
+  classNames,
   sidebarHeader,
   sidebarMenu,
-  logoHeader,
   homeUrl,
   studioUrl
 }) {
   const { user } = useSession5();
   const sidebarContent = /* @__PURE__ */ jsxs12(Fragment6, { children: [
     sidebarHeader,
-    /* @__PURE__ */ jsx15(SidebarContent, { children: sidebarMenu })
+    /* @__PURE__ */ jsx15(SidebarContent, { className: classNames?.sidebarContent, children: sidebarMenu })
   ] });
-  const studioButton = /* @__PURE__ */ jsx15(Button5, { variant: "ghost", asChild: true, children: /* @__PURE__ */ jsxs12(Link8, { href: studioUrl || "#", target: "_blank", children: [
+  const studioButton = /* @__PURE__ */ jsx15(Button5, { variant: "ghost", asChild: true, className: classNames?.studioButton, children: /* @__PURE__ */ jsxs12(Link8, { href: studioUrl || "#", target: "_blank", children: [
     /* @__PURE__ */ jsx15(RocketIcon, {}),
     " Studio"
   ] }) });
-  return /* @__PURE__ */ jsxs12(LayoutProvider, { logoHeader, children: [
-    /* @__PURE__ */ jsxs12(Header, { children: [
-      /* @__PURE__ */ jsx15(HeaderLeft, {}),
+  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
+    /* @__PURE__ */ jsxs12(Header, { className: classNames?.header, children: [
+      /* @__PURE__ */ jsx15(HeaderLeft, { className: classNames?.headerLeft }),
       /* @__PURE__ */ jsx15(
         HeaderRight,
         {
+          className: classNames?.headerRight,
           sidebar: /* @__PURE__ */ jsx15(HeaderSidebarMobile, { children: sidebarContent }),
           button: studioUrl && user?.role === "admin" ? studioButton : null,
           homeUrl
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs12("div", { className: "flex grow pt-(--header-height-mobile) lg:pt-(--header-height)", children: [
-      /* @__PURE__ */ jsx15(Sidebar, { children: sidebarContent }),
-      /* @__PURE__ */ jsx15("main", { className: "grow transition-all duration-300 lg:in-data-[sidebar-open=false]:ps-0 lg:ps-(--sidebar-width)", children })
+    /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        className: cn11(
+          "flex grow pt-(--header-height-mobile) lg:pt-(--header-height)",
+          classNames?.wrapper
+        ),
+        children: [
+          /* @__PURE__ */ jsx15(Sidebar, { className: classNames?.sidebar, children: sidebarContent }),
+          /* @__PURE__ */ jsx15(
+            "main",
+            {
+              className: cn11(
+                "grow transition-all duration-300 lg:in-data-[sidebar-open=false]:ps-0 lg:ps-(--sidebar-width)",
+                classNames?.content
+              ),
+              children
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function ContentWrapperV2({
+  children,
+  classNames,
+  sidebarHeader,
+  sidebarMenu,
+  sidebarFooter,
+  homeUrl,
+  studioUrl
+}) {
+  const { isMobile } = useLayout3();
+  const { user } = useSession5();
+  const [enableTransitions, setEnableTransitions] = useState5(false);
+  useEffect4(() => {
+    const id = requestAnimationFrame(() => setEnableTransitions(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  const sidebarContent = /* @__PURE__ */ jsxs12(Fragment6, { children: [
+    sidebarHeader,
+    /* @__PURE__ */ jsx15(SidebarContent, { className: classNames?.sidebarContent, children: sidebarMenu }),
+    !isMobile && sidebarFooter
+  ] });
+  const studioButton = /* @__PURE__ */ jsx15(
+    Button5,
+    {
+      variant: "mono",
+      size: "sm",
+      className: cn11("rounded-full", classNames?.studioButton),
+      asChild: true,
+      children: /* @__PURE__ */ jsxs12(Link8, { href: studioUrl || "#", target: "_blank", children: [
+        /* @__PURE__ */ jsx15(RocketIcon, {}),
+        " Studio"
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs12("div", { className: cn11("flex h-screen w-full [&_.container-fluid]:px-5", classNames?.wrapper), children: [
+    /* @__PURE__ */ jsx15(Sidebar, { className: classNames?.sidebar, children: sidebarContent }),
+    /* @__PURE__ */ jsxs12("div", { className: "flex w-full min-w-0 flex-1 flex-col pt-(--header-height-mobile) lg:pt-0", children: [
+      isMobile && /* @__PURE__ */ jsxs12(Header, { className: classNames?.header, children: [
+        /* @__PURE__ */ jsx15(HeaderLeft, { className: classNames?.headerLeft }),
+        /* @__PURE__ */ jsx15(
+          HeaderRight,
+          {
+            className: classNames?.headerRight,
+            sidebar: /* @__PURE__ */ jsx15(HeaderSidebarMobile, { children: sidebarContent }),
+            button: studioUrl && user?.role === "admin" ? studioButton : null,
+            homeUrl
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx15("div", { className: "mx-5 flex grow py-2.5 lg:mx-2.5", children: /* @__PURE__ */ jsx15(
+        "div",
+        {
+          className: cn11(
+            "grow overflow-y-auto rounded-xl border border-input bg-background shadow-xs duration-300 lg:in-data-[sidebar-open=true]:ms-[calc(var(--sidebar-width)+0.6rem)] lg:ms-[calc(var(--sidebar-width-collapsed)+0.6rem)]",
+            enableTransitions ? "transition-all duration-300" : "transition-none"
+          ),
+          children: /* @__PURE__ */ jsx15("main", { className: cn11("grow", classNames?.content), children })
+        }
+      ) })
     ] })
   ] });
 }
 
 // src/components/providers/config.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { defaultConfig, mergeConfig } from "@pelatform/starter.config";
 import {
   ConfigContext,
@@ -1128,7 +1409,7 @@ function ConfigProvider({
   workspaceLogo: workspaceLogoProp,
   ...props
 }) {
-  const mergedConfig = useMemo2(() => {
+  const mergedConfig = useMemo3(() => {
     return mergeConfig(defaultConfig, configProp);
   }, [configProp]);
   const config = mergedConfig;
@@ -1137,7 +1418,7 @@ function ConfigProvider({
     extension: "png",
     size: 128
   };
-  const userAvatar = useMemo2(() => {
+  const userAvatar = useMemo3(() => {
     if (!userAvatarProp) {
       return {
         extension: DEFAULT_IMAGE_OPTIONS.extension,
@@ -1151,7 +1432,7 @@ function ConfigProvider({
       size: userAvatarProp.size || (userAvatarProp.upload ? 256 : DEFAULT_IMAGE_OPTIONS.size)
     };
   }, [userAvatarProp]);
-  const workspaceLogo = useMemo2(() => {
+  const workspaceLogo = useMemo3(() => {
     if (!workspaceLogoProp) {
       return {
         extension: DEFAULT_IMAGE_OPTIONS.extension,
@@ -1194,7 +1475,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { NextIntlClientProvider } from "next-intl";
 import { useConfig as useConfig7 } from "@pelatform/starter.hook";
 import { QueryProvider, ThemeProvider } from "pelatform-ui/components";
-import { Toaster as Sonner } from "pelatform-ui/default";
+import { Toaster as Sonner, TooltipProvider as TooltipProvider2 } from "pelatform-ui/default";
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function SharedProviders({
   children,
@@ -1205,16 +1486,16 @@ function SharedProviders({
 }) {
   const config = useConfig7();
   return /* @__PURE__ */ jsxs13(QueryProvider, { children: [
-    /* @__PURE__ */ jsx17(ThemeProvider, { defaultTheme: config.ui.defaultTheme, children: /* @__PURE__ */ jsx17(NextIntlClientProvider, { locale, messages, timeZone, children: /* @__PURE__ */ jsxs13(Suspense2, { children: [
+    /* @__PURE__ */ jsx17(ThemeProvider, { defaultTheme: config.ui.defaultTheme, children: /* @__PURE__ */ jsx17(TooltipProvider2, { children: /* @__PURE__ */ jsx17(NextIntlClientProvider, { locale, messages, timeZone, children: /* @__PURE__ */ jsxs13(Suspense2, { children: [
       children,
       /* @__PURE__ */ jsx17(Sonner, { position: sonnerPosition })
-    ] }) }) }),
+    ] }) }) }) }),
     /* @__PURE__ */ jsx17(ReactQueryDevtools, { initialIsOpen: false })
   ] });
 }
 
 // src/components/utils/card.tsx
-import { cn as cn7 } from "pelatform-ui";
+import { cn as cn12 } from "pelatform-ui";
 import { Button as Button6, Card, CardContent, CardFooter, Skeleton as Skeleton4, Spinner } from "pelatform-ui/default";
 import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function CardComponent({
@@ -1235,7 +1516,7 @@ function CardComponent({
   return /* @__PURE__ */ jsxs14(
     Card,
     {
-      className: cn7(
+      className: cn12(
         "w-full overflow-hidden",
         isDestructive && "border-destructive/70",
         className,
@@ -1243,7 +1524,7 @@ function CardComponent({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs14(CardContent, { className: cn7("space-y-6 p-5 sm:p-10", classNames?.content), children: [
+        /* @__PURE__ */ jsxs14(CardContent, { className: cn12("space-y-6 p-5 sm:p-10", classNames?.content), children: [
           /* @__PURE__ */ jsx18(
             CardHeaderComponent,
             {
@@ -1279,12 +1560,12 @@ function CardHeaderComponent({
   description,
   isPending
 }) {
-  return /* @__PURE__ */ jsx18("div", { className: cn7("flex flex-col space-y-2", className, classNames?.header), children: isPending ? /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsx18(Skeleton4, { className: cn7("h-7 w-1/3", classNames?.skeleton) }),
-    description && /* @__PURE__ */ jsx18(Skeleton4, { className: cn7("h-5 w-2/3", classNames?.skeleton) })
+  return /* @__PURE__ */ jsx18("div", { className: cn12("flex flex-col space-y-2", className, classNames?.header), children: isPending ? /* @__PURE__ */ jsxs14(Fragment7, { children: [
+    /* @__PURE__ */ jsx18(Skeleton4, { className: cn12("h-7 w-1/3", classNames?.skeleton) }),
+    description && /* @__PURE__ */ jsx18(Skeleton4, { className: cn12("h-5 w-2/3", classNames?.skeleton) })
   ] }) : /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsx18("h2", { className: cn7("font-medium text-xl", classNames?.title), children: title }),
-    description && /* @__PURE__ */ jsx18("p", { className: cn7("text-muted-foreground text-sm", classNames?.description), children: description })
+    /* @__PURE__ */ jsx18("h2", { className: cn12("font-medium text-xl", classNames?.title), children: title }),
+    description && /* @__PURE__ */ jsx18("p", { className: cn12("text-muted-foreground text-sm", classNames?.description), children: description })
   ] }) });
 }
 function CardFooterComponent({
@@ -1301,7 +1582,7 @@ function CardFooterComponent({
   return /* @__PURE__ */ jsx18(
     CardFooter,
     {
-      className: cn7(
+      className: cn12(
         "flex items-center justify-between space-x-4 bg-muted p-3 sm:px-10",
         isDestructive && "border-destructive/70",
         className,
@@ -1311,7 +1592,7 @@ function CardFooterComponent({
         instructions && /* @__PURE__ */ jsx18(
           Skeleton4,
           {
-            className: cn7(
+            className: cn12(
               "h-4 w-48 max-w-full bg-muted-foreground/10 md:h-5 md:w-60",
               classNames?.skeleton
             )
@@ -1320,14 +1601,14 @@ function CardFooterComponent({
         actionLabel && /* @__PURE__ */ jsx18(
           Skeleton4,
           {
-            className: cn7("h-8 w-20 bg-muted-foreground/10 md:ms-auto", classNames?.skeleton)
+            className: cn12("h-8 w-20 bg-muted-foreground/10 md:ms-auto", classNames?.skeleton)
           }
         )
       ] }) : /* @__PURE__ */ jsxs14(Fragment7, { children: [
         instructions && /* @__PURE__ */ jsx18(
           "div",
           {
-            className: cn7("text-muted-foreground text-xs md:text-sm", classNames?.instructions),
+            className: cn12("text-muted-foreground text-xs md:text-sm", classNames?.instructions),
             children: instructions
           }
         ),
@@ -1361,7 +1642,7 @@ function CardActionComponent({
       type: onClick ? "button" : "submit",
       variant: isDestructive ? "destructive" : "primary",
       size: "sm",
-      className: cn7(
+      className: cn12(
         "ms-auto",
         isSubmitting || disabled ? "pointer-events-auto! cursor-not-allowed" : "",
         classNames?.button,
@@ -1380,7 +1661,7 @@ function CardActionComponent({
 
 // src/components/utils/dialog.tsx
 import { useTranslations as useTranslations11 } from "next-intl";
-import { cn as cn8 } from "pelatform-ui";
+import { cn as cn13 } from "pelatform-ui";
 import {
   Button as Button7,
   Dialog,
@@ -1408,13 +1689,13 @@ function DialogComponent({
     DialogContent,
     {
       onOpenAutoFocus: (e) => e.preventDefault(),
-      className: cn8("bg-muted sm:max-w-md", classNames?.dialog?.content),
+      className: cn13("bg-muted sm:max-w-md", classNames?.dialog?.content),
       showCloseButton,
       children: [
         /* @__PURE__ */ jsxs15(
           DialogHeader,
           {
-            className: cn8(
+            className: cn13(
               "-ms-6 -me-6 -mt-6 space-y-2 rounded-t-lg bg-background p-6",
               classNames?.header
             ),
@@ -1448,13 +1729,13 @@ function DialogFooterComponent({
   button
 }) {
   const t = useTranslations11();
-  return /* @__PURE__ */ jsxs15(DialogFooter, { className: cn8(className, classNames?.dialog?.footer), children: [
+  return /* @__PURE__ */ jsxs15(DialogFooter, { className: cn13(className, classNames?.dialog?.footer), children: [
     cancelButton && /* @__PURE__ */ jsx19(
       Button7,
       {
         type: "button",
         variant: "ghost",
-        className: cn8(classNames?.button),
+        className: cn13(classNames?.button),
         onClick: () => onOpenChange?.(false),
         disabled: cancelButtonDisabled,
         children: t("common.actions.cancel")
@@ -1465,22 +1746,22 @@ function DialogFooterComponent({
 }
 
 // src/components/utils/skeleton.tsx
-import { cn as cn9 } from "pelatform-ui";
+import { cn as cn14 } from "pelatform-ui";
 import { Card as Card2, Skeleton as Skeleton5 } from "pelatform-ui/default";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function SkeletonViewComponent({ classNames }) {
-  return /* @__PURE__ */ jsxs16(Card2, { className: cn9("flex-row items-center gap-3 px-4 py-3", classNames?.cell), children: [
+  return /* @__PURE__ */ jsxs16(Card2, { className: cn14("flex-row items-center gap-3 px-4 py-3", classNames?.cell), children: [
     /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx20(Skeleton5, { className: cn9("size-5 rounded-full", classNames?.skeleton) }),
-      /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(Skeleton5, { className: cn9("h-4 w-32", classNames?.skeleton) }) })
+      /* @__PURE__ */ jsx20(Skeleton5, { className: cn14("size-5 rounded-full", classNames?.skeleton) }),
+      /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(Skeleton5, { className: cn14("h-4 w-32", classNames?.skeleton) }) })
     ] }),
-    /* @__PURE__ */ jsx20(Skeleton5, { className: cn9("ms-auto size-8 w-16", classNames?.skeleton) })
+    /* @__PURE__ */ jsx20(Skeleton5, { className: cn14("ms-auto size-8 w-16", classNames?.skeleton) })
   ] });
 }
 function SkeletonInputComponent({ classNames }) {
   return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1.5", children: [
-    /* @__PURE__ */ jsx20(Skeleton5, { className: cn9("h-4 w-32", classNames?.skeleton) }),
-    /* @__PURE__ */ jsx20(Skeleton5, { className: cn9("h-9 w-full", classNames?.skeleton) })
+    /* @__PURE__ */ jsx20(Skeleton5, { className: cn14("h-4 w-32", classNames?.skeleton) }),
+    /* @__PURE__ */ jsx20(Skeleton5, { className: cn14("h-9 w-full", classNames?.skeleton) })
   ] });
 }
 
@@ -1488,14 +1769,14 @@ function SkeletonInputComponent({ classNames }) {
 import { useRef } from "react";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useTranslations as useTranslations12 } from "next-intl";
-import { cn as cn10 } from "pelatform-ui";
+import { cn as cn15 } from "pelatform-ui";
 import {
   Button as Button8,
   Input,
   Skeleton as Skeleton6,
   Tooltip,
   TooltipContent,
-  TooltipProvider,
+  TooltipProvider as TooltipProvider3,
   TooltipTrigger
 } from "pelatform-ui/default";
 import { useCopyToClipboard } from "pelatform-ui/hooks";
@@ -1526,17 +1807,17 @@ function DisplayIdCard({
       description,
       isPending,
       ...props,
-      children: isPending ? /* @__PURE__ */ jsx21(Skeleton6, { className: cn10("h-11.5 w-full max-w-md", classNames?.skeleton) }) : /* @__PURE__ */ jsxs17(
+      children: isPending ? /* @__PURE__ */ jsx21(Skeleton6, { className: cn15("h-11.5 w-full max-w-md", classNames?.skeleton) }) : /* @__PURE__ */ jsxs17(
         "div",
         {
-          className: cn10(
+          className: cn15(
             "flex w-full max-w-md items-center justify-between rounded-md border p-2",
             classNames?.grid
           ),
           children: [
             /* @__PURE__ */ jsx21(Input, { value: id, ref: inputRef, disabled: true, className: "border-none! bg-transparent!" }),
-            /* @__PURE__ */ jsx21(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs17(Tooltip, { children: [
-              /* @__PURE__ */ jsx21(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx21(Button8, { variant: "dim", onClick: handleCopy, disabled: copied, children: copied ? /* @__PURE__ */ jsx21(CheckIcon, { className: cn10("stroke-green-600", classNames?.icon) }) : /* @__PURE__ */ jsx21(CopyIcon, { className: classNames?.icon }) }) }),
+            /* @__PURE__ */ jsx21(TooltipProvider3, { delayDuration: 0, children: /* @__PURE__ */ jsxs17(Tooltip, { children: [
+              /* @__PURE__ */ jsx21(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx21(Button8, { variant: "dim", onClick: handleCopy, disabled: copied, children: copied ? /* @__PURE__ */ jsx21(CheckIcon, { className: cn15("stroke-green-600", classNames?.icon) }) : /* @__PURE__ */ jsx21(CopyIcon, { className: classNames?.icon }) }) }),
               /* @__PURE__ */ jsx21(TooltipContent, { className: "px-2 py-1 text-xs", children: t("common.actions.copy") })
             ] }) })
           ]
@@ -1549,7 +1830,7 @@ function DisplayIdCard({
 // src/components/empty-state.tsx
 import Link9 from "next/link";
 import { useTranslations as useTranslations13 } from "next-intl";
-import { cn as cn11 } from "pelatform-ui";
+import { cn as cn16 } from "pelatform-ui";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function EmptyState({
   className,
@@ -1561,7 +1842,7 @@ function EmptyState({
   children
 }) {
   const t = useTranslations13();
-  return /* @__PURE__ */ jsxs18("div", { className: cn11("flex flex-col items-center justify-center gap-y-4", className), children: [
+  return /* @__PURE__ */ jsxs18("div", { className: cn16("flex flex-col items-center justify-center gap-y-4", className), children: [
     Icon && /* @__PURE__ */ jsx22("div", { className: "flex size-14 items-center justify-center rounded-2xl border bg-muted", children: /* @__PURE__ */ jsx22(Icon, { className: "size-6 text-foreground" }) }),
     /* @__PURE__ */ jsx22("p", { className: "text-center font-medium text-base text-foreground", children: title }),
     description && /* @__PURE__ */ jsxs18("p", { className: "max-w-sm text-balance text-center text-muted-foreground text-sm", children: [
@@ -1631,9 +1912,9 @@ function OTPInputGroup({ otpSeparators = 0 }) {
 }
 
 // src/components/password-input.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
-import { cn as cn12 } from "pelatform-ui";
+import { cn as cn17 } from "pelatform-ui";
 import { Button as Button9, Input as Input2 } from "pelatform-ui/default";
 import { Fragment as Fragment9, jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function PasswordInput({
@@ -1643,15 +1924,15 @@ function PasswordInput({
   onChange,
   ...props
 }) {
-  const [disabled, setDisabled] = useState5(true);
-  const [isVisible, setIsVisible] = useState5(false);
+  const [disabled, setDisabled] = useState6(true);
+  const [isVisible, setIsVisible] = useState6(false);
   return /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
     /* @__PURE__ */ jsx24(
       Input2,
       {
         type: isVisible && enableToggle ? "text" : "password",
         variant,
-        className: cn12(enableToggle && "pe-10", className),
+        className: cn17(enableToggle && "pe-10", className),
         ...props,
         onChange: (event) => {
           setDisabled(!event.target.value);
@@ -1827,6 +2108,7 @@ export {
   Sidebar,
   SidebarContent,
   SidebarContentMenu,
+  SidebarFooter,
   SidebarHeaderBack,
   SignedInHint,
   SiteFooter,