@yimingliao/cms 0.0.106 → 0.0.108

package/dist/{chunk-OAENV763.js → chunk-VSV6SQWC.js}

@@ -491,6 +491,13 @@ function formatDateTime(input) {
   return dateTimeFormatter.format(date);
 }
 
+// src/shared/utils/join-url.ts
+function joinUrl(...parts) {
+  return parts.filter(Boolean).map(
+    (part, i) => i === 0 ? part.replace(/\/+$/, "") : part.replace(/^\/+|\/+$/g, "")
+  ).join("/");
+}
+
 // src/shared/units.ts
 var SIZE = {
   BYTE: 1,
@@ -501,4 +508,4 @@ var SIZE = {
   PB: 1024 ** 5
 };
 
-export { FILE_TYPES, OG_TYPE_ARRAY, SIZE, TWITTER_CARD_ARRAY, classifyFileType, createBuildArticleMetadata, createBuildTranslations, createBuildWebsiteMetadata, datetimeToDb, datetimeToUi, ensureArray, findTranslation, formatDateTime, formatFileSize, getMediaInfo, jsonArrayToDb, jsonArrayToUi, mimeToExtension, result, serializeJsonLd };
+export { FILE_TYPES, OG_TYPE_ARRAY, SIZE, TWITTER_CARD_ARRAY, classifyFileType, createBuildArticleMetadata, createBuildTranslations, createBuildWebsiteMetadata, datetimeToDb, datetimeToUi, ensureArray, findTranslation, formatDateTime, formatFileSize, getMediaInfo, joinUrl, jsonArrayToDb, jsonArrayToUi, mimeToExtension, result, serializeJsonLd };

package/dist/client/index.d.ts

@@ -4,11 +4,13 @@ import * as _tanstack_react_query from '@tanstack/react-query';
 import { QueryClient, UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
 import * as _tanstack_query_core from '@tanstack/query-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { c as createVerifyAction, a as createSignInAction, b as createVerifyEmailAction, d as createEmailUnverifiedAction, e as createForgotPasswordAction, f as createResetPasswordAction, g as createChangePasswordAction } from '../create-reset-password-action-D6aTuuqO.js';
-import { U as UIStates, F as FormData, a as FormFieldController } from '../types-BUmWwzpD.js';
+import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
+import * as React$1 from 'react';
+import { HTMLAttributes, ReactNode, ComponentProps, InputHTMLAttributes, Dispatch, SetStateAction } from 'react';
+import { c as createVerifyAction, a as createSignOutAction, b as createSignInAction, d as createVerifyEmailAction, e as createEmailUnverifiedAction, f as createForgotPasswordAction, g as createResetPasswordAction, h as createChangePasswordAction } from '../create-reset-password-action-C-B3uh5m.js';
 import { LucideIcon } from 'lucide-react';
-import { B as ButtonProps$1, L as LabelProps } from '../label-BF4qxS03.js';
-import { ReactNode, ComponentProps, HTMLAttributes, InputHTMLAttributes, Dispatch, SetStateAction } from 'react';
+import { S as Sidebar, B as ButtonProps$1, L as LabelProps } from '../sidebar-Dei7UxR1.js';
+import { U as UIStates, F as FormData, a as FormFieldController } from '../types-BUmWwzpD.js';
 import { ClassValue } from 'clsx';
 import 'zod';
 import 'zod/v4/core';
@@ -21,9 +23,11 @@ import '@prisma/client';
 import 'nodemailer';
 import 'intor';
 import 'keyv';
+import '@radix-ui/react-label';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
-import '@radix-ui/react-label';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-tooltip';
 
 interface FetchContext {
     input: string;
@@ -326,12 +330,54 @@ declare function AdminProvider({ children }: {
 }): react_jsx_runtime.JSX.Element;
 declare function useAdmin(): AdminContextValue;
 
+declare function ThemeProvider({ children, ...props }: React$1.ComponentProps<typeof ThemeProvider$1>): react_jsx_runtime.JSX.Element;
+
 declare function createAdminInitializer({ useAdmin, useQuery, verifyAction, }: {
     useAdmin: () => AdminContextValue;
     useQuery: ReturnType<typeof createUseQuery>;
     verifyAction: ReturnType<typeof createVerifyAction>;
 }): () => null;
 
+interface ContentContainerProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    isNotFound?: boolean;
+    isFixHeight?: boolean;
+}
+declare function ContentContainer({ className, children, isNotFound, isFixHeight, ...props }: ContentContainerProps): react_jsx_runtime.JSX.Element;
+
+declare function ContentSkeleton(): react_jsx_runtime.JSX.Element;
+
+interface NavItem {
+    icon?: LucideIcon;
+    title?: string;
+    url?: string;
+    isSeparator?: boolean;
+    items?: NavItem[];
+}
+declare function NavMain({ items }: {
+    items: NavItem[];
+}): react_jsx_runtime.JSX.Element;
+
+declare function SidebarSkeleton({ ...props }: React$1.ComponentProps<typeof Sidebar>): react_jsx_runtime.JSX.Element;
+
+declare function createNavbar({ webUrl, storageUrl, I18nSelector, SignOutButton, }: {
+    webUrl: string;
+    storageUrl: string;
+    I18nSelector: ReactNode;
+    SignOutButton: ReactNode;
+}): () => react_jsx_runtime.JSX.Element;
+
+declare function createI18nSelector({ enabled, locales, localeDisplay, }: {
+    enabled: boolean;
+    locales: string[];
+    localeDisplay: Record<string, string>;
+}): () => react_jsx_runtime.JSX.Element | null;
+
+declare function createSignOutButton(): ({ useCommand, signOutAction, }: {
+    useCommand: ReturnType<typeof createUseCommand>;
+    signOutAction: ReturnType<typeof createSignOutAction>;
+}) => react_jsx_runtime.JSX.Element;
+
 interface PageHeaderTitleProps {
     icon?: LucideIcon;
     title?: ReactNode;
@@ -542,4 +588,4 @@ declare const cn: (...inputs: ClassValue[]) => string;
 
 declare function useDeviceInfo(): DeviceInfo | null;
 
-export { AdminProvider, ArrayInput, Button, type ButtonProps, Checkbox, ControlFields, type ControlMeta, Field, FieldBody, FieldsContainer, Form, IndexField, Input, type InputProps, MainFields, PageHeader, PasswordInput, ReturnButton, SearchInput, type ShowToastOption, SideFields, SlugField, Textarea, cn, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin, useDeviceInfo };
+export { AdminProvider, ArrayInput, Button, type ButtonProps, Checkbox, ContentContainer, ContentSkeleton, ControlFields, type ControlMeta, Field, FieldBody, FieldsContainer, Form, IndexField, Input, type InputProps, MainFields, type NavItem, NavMain, PageHeader, PasswordInput, ReturnButton, SearchInput, type ShowToastOption, SideFields, SidebarSkeleton, SlugField, Textarea, ThemeProvider, cn, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createI18nSelector, createNavbar, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSignOutButton, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin, useDeviceInfo };

package/dist/client/index.js

@@ -1,14 +1,16 @@
-import { Button, Spinner, useParentPathname, cn, Separator, Label, InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton, Textarea, Card, useDeviceInfo, CardHeader, CardTitle, CardContent, useCountdown, CardDescription, isConfirm } from '../chunk-FLKUBNE4.js';
-export { cn, useDeviceInfo } from '../chunk-FLKUBNE4.js';
-import { ensureArray } from '../chunk-OAENV763.js';
+import { cn, useSidebar, SidebarMenuSkeleton, SidebarInset, SIDEBAR_WIDTH, Skeleton, SidebarGroup, SidebarMenu, Collapsible, SidebarMenuItem, SidebarMenuButton, Separator, CollapsibleTrigger, SidebarMenuAction, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, Sidebar, Button, Spinner, useParentPathname, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, PAGE_HEADER_HEIGHT, Label, FORM_MIDDLE_GAP_WIDTH, FORM_SIDE_FIELDS_WIDTH, InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton, Textarea, Card, useDeviceInfo, CardHeader, CardTitle, CardContent, useCountdown, CardDescription, NAVBAR_HEIGHT, isConfirm, Avatar, AvatarImage, AvatarFallback, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup } from '../chunk-Q654SMCX.js';
+export { cn, useDeviceInfo } from '../chunk-Q654SMCX.js';
+import { ensureArray, findTranslation, joinUrl } from '../chunk-VSV6SQWC.js';
 import { toast } from 'sonner';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { createContext, useState, useContext, useEffect, createElement, useRef } from 'react';
+import { ThemeProvider as ThemeProvider$1, useTheme } from 'next-themes';
 import { useTranslator } from 'intor/react';
-import { Undo2, Files, Asterisk, Eye, EyeOff, CircleX, CirclePlus, Search, Mail, Trash2, CopyCheck, CopyX, FileSymlink, FileX, FilePlus, FilePen, File, FileStack, FolderSearch, Lock, FolderCog, FileSpreadsheet, Archive, Binary, MapPinCheckInside, Star, House, CircleMinus } from 'lucide-react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { ChevronRight, Undo2, SidebarIcon, House, SquareArrowOutUpRight, Languages, LogOut, Files, Asterisk, Eye, EyeOff, CircleX, CirclePlus, Search, Mail, Sun, Moon, TvMinimal, UserCircle, ChevronsUpDown, PenLine, Trash2, CopyCheck, CopyX, FileSymlink, FileX, FilePlus, FilePen, File, FileStack, FolderSearch, Lock, FolderCog, FileSpreadsheet, Archive, Binary, MapPinCheckInside, Star, CircleMinus } from 'lucide-react';
 import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { Link as Link$1 } from 'intor/next';
 
 // src/client/infrastructure/fetch/smart-fetch.ts
 function createSmartFetch({
@@ -217,6 +219,22 @@ function useAdmin() {
   if (!ctx) throw new Error("useAdmin must be used within AdminProvider");
   return ctx;
 }
+function ThemeProvider({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ThemeProvider$1,
+    {
+      attribute: "class",
+      defaultTheme: "system",
+      enableSystem: true,
+      disableTransitionOnChange: true,
+      ...props,
+      children
+    }
+  );
+}
 function createAdminInitializer({
   useAdmin: useAdmin2,
   useQuery,
@@ -240,29 +258,205 @@ function createAdminInitializer({
     return null;
   };
 }
-
-// src/client/interfaces/styles/constants.ts
-var PAGE_HEADER_HEIGHT = 56;
-var FORM_SIDE_FIELDS_WIDTH = 320;
-var FORM_MIDDLE_GAP_WIDTH = 24;
-function PageHeaderTitle({
-  icon,
-  title,
-  subtitle,
+function ContentContainer({
+  className = "",
   children,
-  leftChildren,
-  className
+  isNotFound = false,
+  isFixHeight,
+  ...props
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
-    leftChildren,
-    icon && createElement(icon),
-    /* @__PURE__ */ jsxs("div", { className: "flex-center w-fit gap-3 whitespace-nowrap", children: [
-      subtitle && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: subtitle }),
-      /* @__PURE__ */ jsx("p", { className: "scroll-m-20 text-xl font-semibold tracking-tight", children: title })
-    ] }),
-    children
+  const { t } = useTranslator();
+  const ABOVE_HEIGHT = NAVBAR_HEIGHT + PAGE_HEADER_HEIGHT;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        height: isFixHeight ? `calc(100vh - ${ABOVE_HEIGHT}px)` : "auto"
+      },
+      className: cn(
+        className,
+        "relative",
+        "flex flex-col gap-4",
+        "px-6 pt-6",
+        isFixHeight ? "pb-6" : "flex-1 pb-64"
+      ),
+      ...props,
+      children: isNotFound ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: t("ui.no-data.text") }) : children
+    }
+  );
+}
+function ContentSkeleton() {
+  const { open } = useSidebar();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1", children: [
+    /* @__PURE__ */ jsx(SidebarMenuSkeleton, {}),
+    /* @__PURE__ */ jsx(
+      SidebarInset,
+      {
+        style: { width: open ? `calc(100% - ${SIDEBAR_WIDTH})` : "100%" },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-6", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-96" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-72" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-64" })
+        ] })
+      }
+    )
   ] });
 }
+var getMainPath = (path) => "/" + path.split("/").slice(3).filter(Boolean).join("/");
+var toSegments = (path) => path.split("/").filter(Boolean);
+var isSegmentMatch = (current, target) => {
+  const currentSeg = toSegments(current);
+  const targetSeg = toSegments(target);
+  if (targetSeg.length > currentSeg.length) return false;
+  return targetSeg.every((seg, i) => currentSeg[i] === seg);
+};
+function NavMain({ items }) {
+  const pathname = usePathname();
+  const [openItems, setOpenItems] = useState([]);
+  const toggleItem = (title, open) => {
+    setOpenItems(
+      (prev) => open ? [...prev, title] : prev.filter((t) => t !== title)
+    );
+  };
+  const parsedPathname = getMainPath(pathname);
+  useEffect(() => {
+    const matched = items.filter(
+      (item) => item.url ? isSegmentMatch(parsedPathname, getMainPath(item.url)) : false
+    ).map((item) => item.title || "");
+    queueMicrotask(() => setOpenItems(matched));
+  }, [parsedPathname, items]);
+  return /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item, index) => {
+    const isOpen = openItems.includes(item.title || "");
+    const parsedUrl = getMainPath(item.url || "");
+    const isCurrentPath = item.url ? isSegmentMatch(parsedPathname, parsedUrl) : false;
+    return /* @__PURE__ */ jsx(
+      Collapsible,
+      {
+        asChild: true,
+        open: isOpen,
+        onOpenChange: (open) => toggleItem(item.title || "", open),
+        children: /* @__PURE__ */ jsxs(SidebarMenuItem, { className: "[&>button]:top-2 [&>button]:size-6", children: [
+          !item.isSeparator ? /* @__PURE__ */ jsx(
+            SidebarMenuButton,
+            {
+              asChild: true,
+              size: "md",
+              isActive: isCurrentPath,
+              children: /* @__PURE__ */ jsxs(Link, { href: item.url || "", children: [
+                item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+                /* @__PURE__ */ jsx("span", { children: item.title })
+              ] })
+            }
+          ) : /* @__PURE__ */ jsx(Separator, {}),
+          item.items?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(SidebarMenuAction, { className: "data-[state=open]:rotate-90", children: [
+              /* @__PURE__ */ jsx(ChevronRight, {}),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle" })
+            ] }) }),
+            /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items?.map((subItem, index2) => {
+              const parsedPathname2 = getMainPath(pathname);
+              const parsedUrl2 = getMainPath(subItem.url || "");
+              const isCurrentPath2 = subItem.url ? isSegmentMatch(parsedPathname2, parsedUrl2) : false;
+              return /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: !subItem.isSeparator ? /* @__PURE__ */ jsx(
+                SidebarMenuSubButton,
+                {
+                  asChild: true,
+                  size: "lg",
+                  isActive: isCurrentPath2,
+                  children: /* @__PURE__ */ jsxs(Link, { href: subItem.url || "", children: [
+                    subItem.icon && /* @__PURE__ */ jsx(subItem.icon, {}),
+                    /* @__PURE__ */ jsx("span", { children: subItem.title })
+                  ] })
+                }
+              ) : /* @__PURE__ */ jsx(Separator, {}) }, index2);
+            }) }) })
+          ] }) : null
+        ] })
+      },
+      index
+    );
+  }) }) });
+}
+function SidebarSkeleton({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Sidebar,
+    {
+      className: "top-(--header-height) h-[calc(100svh-var(--header-height))]!",
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-3", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+      ] })
+    }
+  );
+}
+
+// src/constants/keys/auth.ts
+var AUTH_KEYS = {
+  signIn: { key: "sign-in" },
+  forgotPassword: { key: "forgot-password" },
+  changePassword: { key: "change-password" }};
+
+// src/constants/keys/main.ts
+var MAIN_KEYS = {
+  dashboard: { key: "dashboard" },
+  cmsSettings: { key: "cms-settings" }};
+
+// src/constants/keys/resources.ts
+var RESOURCES_KEYS = {
+  admin: { key: "admin" }};
+
+// src/constants/keys/index.ts
+var KEYS = {
+  main: MAIN_KEYS,
+  auth: AUTH_KEYS,
+  resources: RESOURCES_KEYS};
+
+// src/constants/paths/cms-path.ts
+var CMS_PATH = "/cms";
+
+// src/constants/paths/main.ts
+var MAIN_PATHS = {
+  dashboard: {
+    path: `${CMS_PATH}/${KEYS.main.dashboard.key}`
+  },
+  cmsSettings: {
+    path: `${CMS_PATH}/${KEYS.main.dashboard.key}/${KEYS.main.cmsSettings.key}`
+  }};
+
+// src/constants/paths/auth.ts
+var AUTH_PATHS = {
+  signIn: {
+    path: `${CMS_PATH}/${KEYS.auth.signIn.key}`
+  },
+  forgotPassword: {
+    path: `${CMS_PATH}/${KEYS.auth.forgotPassword.key}`
+  },
+  changePassword: {
+    path: `${MAIN_PATHS.dashboard.path}/${KEYS.auth.changePassword.key}`
+  }
+};
+
+// src/constants/paths/resources.ts
+var RESOURCES_PATHS = {
+  admin: {
+    path: `${MAIN_PATHS.cmsSettings.path}/${KEYS.resources.admin.key}`
+  }};
+
+// src/constants/paths/index.ts
+var PATHS = {
+  main: MAIN_PATHS,
+  auth: AUTH_PATHS,
+  resources: RESOURCES_PATHS
+};
+
+// src/constants/anchor.ts
+var NEW_TAB_TARGET = "_blank";
+var NEW_TAB_REL = "noopener noreferrer";
 function Button2({
   icon,
   href,
@@ -343,6 +537,206 @@ function ReturnButton({
     }
   );
 }
+function NavUser({
+  storageUrl,
+  admin,
+  isLoading = false,
+  SignOutButton
+}) {
+  const { t, locale } = useTranslator();
+  const { name } = findTranslation(admin?.translations, locale);
+  if (isLoading)
+    return /* @__PURE__ */ jsx(Button2, { variant: "outline", size: "icon", disabled: true, className: "w-64", children: /* @__PURE__ */ jsx(Spinner, {}) });
+  if (!admin)
+    return /* @__PURE__ */ jsx(Button2, { variant: "outline", size: "icon", disabled: true, className: "w-64", children: /* @__PURE__ */ jsx(UserCircle, { className: "size-4" }) });
+  return /* @__PURE__ */ jsx(SidebarMenu, { className: "w-64", children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      SidebarMenuButton,
+      {
+        size: "lg",
+        className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+        disabled: isLoading,
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
+            admin.avatarImage?.key && /* @__PURE__ */ jsx(
+              AvatarImage,
+              {
+                src: joinUrl(storageUrl, admin.avatarImage?.key),
+                alt: name ?? ""
+              }
+            ),
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: name }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: admin.email })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto size-4" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
+        side: "bottom",
+        align: "end",
+        sideOffset: 4,
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
+            /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
+              admin.avatarImage?.key && /* @__PURE__ */ jsx(
+                AvatarImage,
+                {
+                  src: joinUrl(storageUrl, admin.avatarImage?.key),
+                  alt: name ?? ""
+                }
+              ),
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: name }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: admin.email })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(Link, { href: PATHS.auth.changePassword.path, children: /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+            /* @__PURE__ */ jsx(PenLine, {}),
+            t("auth.change-password.text")
+          ] }) }) }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          SignOutButton
+        ]
+      }
+    )
+  ] }) }) });
+}
+function ThemeSelector() {
+  const { setTheme } = useTheme();
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button2, { variant: "outline", size: "icon", children: [
+      /* @__PURE__ */ jsx(Sun, { className: "h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }),
+      /* @__PURE__ */ jsx(Moon, { className: "absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Select theme" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme("light"), children: [
+        /* @__PURE__ */ jsx(Sun, {}),
+        t("ui.layout.navbar.theme.light.text")
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme("dark"), children: [
+        /* @__PURE__ */ jsx(Moon, {}),
+        t("ui.layout.navbar.theme.dark.text")
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme("system"), children: [
+        /* @__PURE__ */ jsx(TvMinimal, {}),
+        t("ui.layout.navbar.theme.system.text")
+      ] })
+    ] })
+  ] });
+}
+function createNavbar({
+  webUrl,
+  storageUrl,
+  I18nSelector,
+  SignOutButton
+}) {
+  return function Navbar() {
+    const { toggleSidebar } = useSidebar();
+    const { admin, isLoading } = useAdmin();
+    const { t } = useTranslator();
+    return /* @__PURE__ */ jsx("header", { className: "bg-background sticky top-0 z-50 flex w-full items-center border-b", children: /* @__PURE__ */ jsxs("div", { className: "flex h-(--header-height) w-full items-center gap-2 px-2", children: [
+      /* @__PURE__ */ jsx(
+        Button2,
+        {
+          className: "h-8 w-8",
+          variant: "ghost",
+          size: "icon",
+          onClick: toggleSidebar,
+          children: /* @__PURE__ */ jsx(SidebarIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mr-2 h-4" }),
+      /* @__PURE__ */ jsx(Button2, { variant: "outline", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: PATHS.main.dashboard.path, children: /* @__PURE__ */ jsx(House, {}) }) }),
+      /* @__PURE__ */ jsx(Button2, { variant: "outline", asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: webUrl, target: NEW_TAB_TARGET, rel: NEW_TAB_REL, children: [
+        /* @__PURE__ */ jsx(SquareArrowOutUpRight, {}),
+        t("ui.layout.navbar.website-homepage.text")
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto" }),
+      I18nSelector,
+      /* @__PURE__ */ jsx(ThemeSelector, {}),
+      /* @__PURE__ */ jsx(
+        NavUser,
+        {
+          storageUrl,
+          SignOutButton,
+          admin,
+          isLoading
+        }
+      )
+    ] }) });
+  };
+}
+function createI18nSelector({
+  enabled,
+  locales,
+  localeDisplay
+}) {
+  return function I18nSelector() {
+    if (!enabled) return null;
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button2, { variant: "outline", size: "icon", children: [
+        /* @__PURE__ */ jsx(Languages, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Switch Languages" })
+      ] }) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: locales.map((locale) => /* @__PURE__ */ jsx(Link$1, { locale, children: /* @__PURE__ */ jsx(DropdownMenuItem, { children: localeDisplay[locale] }) }, locale)) })
+    ] });
+  };
+}
+function createSignOutButton() {
+  return function SignOutButton({
+    useCommand,
+    signOutAction
+  }) {
+    const { t } = useTranslator();
+    const router = useRouter();
+    const { setAdmin } = useAdmin();
+    const { execute, isRedirecting } = useCommand(signOutAction, {
+      onSuccess: () => {
+        setAdmin(null);
+        router.push(PATHS.auth.signIn.path);
+      }
+    });
+    const handleSignOut = () => {
+      if (!isConfirm(t)) return;
+      void execute();
+    };
+    const buttonText = isRedirecting ? /* @__PURE__ */ jsx(Spinner, {}) : t("auth.sign-out.text");
+    return /* @__PURE__ */ jsx("button", { onClick: handleSignOut, className: "w-full", children: /* @__PURE__ */ jsxs(DropdownMenuItem, { variant: "destructive", children: [
+      /* @__PURE__ */ jsx(LogOut, {}),
+      buttonText
+    ] }) });
+  };
+}
+function PageHeaderTitle({
+  icon,
+  title,
+  subtitle,
+  children,
+  leftChildren,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
+    leftChildren,
+    icon && createElement(icon),
+    /* @__PURE__ */ jsxs("div", { className: "flex-center w-fit gap-3 whitespace-nowrap", children: [
+      subtitle && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: subtitle }),
+      /* @__PURE__ */ jsx("p", { className: "scroll-m-20 text-xl font-semibold tracking-tight", children: title })
+    ] }),
+    children
+  ] });
+}
 function createIndexPreset(ctx) {
   const { props, t } = ctx;
   return {
@@ -1509,60 +1903,6 @@ function ControlFields({
     }
   ) });
 }
-
-// src/constants/keys/auth.ts
-var AUTH_KEYS = {
-  signIn: { key: "sign-in" },
-  forgotPassword: { key: "forgot-password" }};
-
-// src/constants/keys/main.ts
-var MAIN_KEYS = {
-  dashboard: { key: "dashboard" },
-  cmsSettings: { key: "cms-settings" }};
-
-// src/constants/keys/resources.ts
-var RESOURCES_KEYS = {
-  admin: { key: "admin" }};
-
-// src/constants/keys/index.ts
-var KEYS = {
-  main: MAIN_KEYS,
-  auth: AUTH_KEYS,
-  resources: RESOURCES_KEYS};
-
-// src/constants/paths/cms-path.ts
-var CMS_PATH = "/cms";
-
-// src/constants/paths/main.ts
-var MAIN_PATHS = {
-  dashboard: {
-    path: `${CMS_PATH}/${KEYS.main.dashboard.key}`
-  },
-  cmsSettings: {
-    path: `${CMS_PATH}/${KEYS.main.dashboard.key}/${KEYS.main.cmsSettings.key}`
-  }};
-
-// src/constants/paths/auth.ts
-var AUTH_PATHS = {
-  signIn: {
-    path: `${CMS_PATH}/${KEYS.auth.signIn.key}`
-  },
-  forgotPassword: {
-    path: `${CMS_PATH}/${KEYS.auth.forgotPassword.key}`
-  }};
-
-// src/constants/paths/resources.ts
-var RESOURCES_PATHS = {
-  admin: {
-    path: `${MAIN_PATHS.cmsSettings.path}/${KEYS.resources.admin.key}`
-  }};
-
-// src/constants/paths/index.ts
-var PATHS = {
-  main: MAIN_PATHS,
-  auth: AUTH_PATHS,
-  resources: RESOURCES_PATHS
-};
 function createSignInPage({
   useCommand,
   signInAction
@@ -1986,4 +2326,4 @@ function createChangePasswordPage({
   };
 }
 
-export { AdminProvider, ArrayInput, Button2 as Button, Checkbox, ControlFields, Field, FieldBody, FieldsContainer, Form, IndexField, Input, MainFields, PageHeader, PasswordInput, ReturnButton, SearchInput, SideFields, SlugField, Textarea2 as Textarea, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin };
+export { AdminProvider, ArrayInput, Button2 as Button, Checkbox, ContentContainer, ContentSkeleton, ControlFields, Field, FieldBody, FieldsContainer, Form, IndexField, Input, MainFields, NavMain, PageHeader, PasswordInput, ReturnButton, SearchInput, SideFields, SidebarSkeleton, SlugField, Textarea2 as Textarea, ThemeProvider, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createI18nSelector, createNavbar, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSignOutButton, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin };