@windrun-huaiin/third-ui 10.1.0 → 10.1.2

package/dist/clerk/clerk-user-client.js

@@ -7,7 +7,7 @@ var server = require('@windrun-huaiin/base-ui/components/server');
 var signupButtonWithFingerprintClient = require('./signup-button-with-fingerprint-client.js');
 
 function ClerkUserClient({ data }) {
-    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 h-10 mx-3 md:ml-1 md:mr-2", children: [jsxRuntime.jsx(nextjs.ClerkLoading, { children: jsxRuntime.jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxRuntime.jsxs(nextjs.ClerkLoaded, { children: [jsxRuntime.jsxs(nextjs.SignedOut, { children: [jsxRuntime.jsx(nextjs.SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsxRuntime.jsx("button", { className: "w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap", children: data.signIn }) }), data.showSignUp && (jsxRuntime.jsx(signupButtonWithFingerprintClient.SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }))] }), jsxRuntime.jsx(nextjs.SignedIn, { children: jsxRuntime.jsx(nextjs.UserButton, { appearance: {
+    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsxRuntime.jsx(nextjs.ClerkLoading, { children: jsxRuntime.jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxRuntime.jsxs(nextjs.ClerkLoaded, { children: [jsxRuntime.jsxs(nextjs.SignedOut, { children: [jsxRuntime.jsx(nextjs.SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsxRuntime.jsx("button", { className: "w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap", children: data.signIn }) }), data.showSignUp && (jsxRuntime.jsx(signupButtonWithFingerprintClient.SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }))] }), jsxRuntime.jsx(nextjs.SignedIn, { children: jsxRuntime.jsx(nextjs.UserButton, { appearance: {
                                 elements: {
                                     userButtonAvatarBox: "w-8 h-8 border",
                                 }

package/dist/clerk/clerk-user-client.mjs

@@ -5,7 +5,7 @@ import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
 import { SignUpButtonWithFingerprint } from './signup-button-with-fingerprint-client.mjs';
 
 function ClerkUserClient({ data }) {
-    return (jsxs("div", { className: "flex items-center gap-2 h-10 mx-3 md:ml-1 md:mr-2", children: [jsx(ClerkLoading, { children: jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxs(ClerkLoaded, { children: [jsxs(SignedOut, { children: [jsx(SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsx("button", { className: "w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap", children: data.signIn }) }), data.showSignUp && (jsx(SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }))] }), jsx(SignedIn, { children: jsx(UserButton, { appearance: {
+    return (jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsx(ClerkLoading, { children: jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxs(ClerkLoaded, { children: [jsxs(SignedOut, { children: [jsx(SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsx("button", { className: "w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap", children: data.signIn }) }), data.showSignUp && (jsx(SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }))] }), jsx(SignedIn, { children: jsx(UserButton, { appearance: {
                                 elements: {
                                     userButtonAvatarBox: "w-8 h-8 border",
                                 }

package/dist/fuma/base/custom-header.d.ts

@@ -34,5 +34,20 @@ export interface CustomHomeHeaderProps extends HomeLayoutProps {
      * @defaultValue true
      */
     floating?: boolean;
+    /**
+     * Control order of action items on desktop.
+     */
+    desktopActionsOrder?: DesktopAction[];
+    /**
+     * Control order of quick actions on the mobile bar.
+     */
+    mobileBarActionsOrder?: MobileBarAction[];
+    /**
+     * Control order of utilities inside the mobile dropdown.
+     */
+    mobileMenuActionsOrder?: MobileMenuAction[];
 }
-export declare function CustomHomeHeader({ nav, i18n, links, githubUrl, themeSwitch, searchToggle, bannerHeight, headerHeight, maxContentWidth, navbarClassName, floating, }: CustomHomeHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type DesktopAction = 'search' | 'theme' | 'i18n' | 'secondary' | 'github';
+export type MobileBarAction = 'pinned' | 'search' | 'menu';
+export type MobileMenuAction = 'secondary' | 'github' | 'separator' | 'i18n' | 'theme';
+export declare function CustomHomeHeader({ nav, i18n, links, githubUrl, themeSwitch, searchToggle, bannerHeight, headerHeight, maxContentWidth, navbarClassName, floating, desktopActionsOrder, mobileBarActionsOrder, mobileMenuActionsOrder, }: CustomHomeHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/fuma/base/custom-header.js

@@ -18,30 +18,108 @@ var button = require('fumadocs-ui/components/ui/button');
 var layout = require('fumadocs-ui/contexts/layout');
 var i18n = require('fumadocs-ui/contexts/i18n');
 
-function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle: searchToggle$1 = {}, bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, navbarClassName, floating = false, }) {
+const DEFAULT_DESKTOP_ACTIONS = [
+    'search',
+    'theme',
+    'i18n',
+    'secondary',
+];
+const DEFAULT_MOBILE_BAR_ACTIONS = [
+    'pinned',
+    'search',
+    'menu',
+];
+const DEFAULT_MOBILE_MENU_ACTIONS = [
+    'secondary',
+    'separator',
+    'i18n',
+    'theme',
+];
+function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle: searchToggle$1 = {}, bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, navbarClassName, floating = false, desktopActionsOrder = DEFAULT_DESKTOP_ACTIONS, mobileBarActionsOrder = DEFAULT_MOBILE_BAR_ACTIONS, mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS, }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const finalLinks = React.useMemo(() => shared.getLinks(links, githubUrl), [links, githubUrl]);
     const navItems = finalLinks.filter((item) => { var _a; return ['nav', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
     const menuItems = finalLinks.filter((item) => { var _a; return ['menu', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
     const mobilePinnedItems = navItems.filter((item) => isSecondary(item) && isMobilePinned(item));
     const filteredMenuItems = menuItems.filter((item) => !isMobilePinned(item));
-    return (jsxRuntime.jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsxRuntime.jsx(Link, { href: (_a = nav.url) !== null && _a !== void 0 ? _a : '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, jsxRuntime.jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
+    const primaryMenuItems = filteredMenuItems.filter((item) => !isSecondary(item));
+    const secondaryMenuItems = filteredMenuItems.filter(isSecondary);
+    const desktopSecondaryItems = navItems.filter(isSecondary);
+    const desktopActionsIncludeGithub = desktopActionsOrder.includes('github');
+    const githubDesktopItem = desktopActionsIncludeGithub
+        ? desktopSecondaryItems.find((item) => isGithubItem(item, githubUrl))
+        : undefined;
+    const desktopSecondaryDisplayItems = desktopActionsIncludeGithub && githubDesktopItem
+        ? desktopSecondaryItems.filter((item) => !isGithubItem(item, githubUrl))
+        : desktopSecondaryItems;
+    const desktopActionNodes = {
+        search: searchToggle$1.enabled !== false
+            ? (_b = (_a = searchToggle$1.components) === null || _a === void 0 ? void 0 : _a.lg) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(searchToggle.LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px]", hideIfDisabled: true }))
+            : null,
+        theme: themeSwitch.enabled !== false
+            ? (_c = themeSwitch.component) !== null && _c !== void 0 ? _c : jsxRuntime.jsx(themeToggle.ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+            : null,
+        i18n: i18n ? (jsxRuntime.jsx(CompactLanguageToggle, { children: jsxRuntime.jsx(server.globalLucideIcons.Languages, { className: "size-5" }) })) : null,
+        secondary: desktopSecondaryDisplayItems.length ? (jsxRuntime.jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: desktopSecondaryDisplayItems.map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: cn.cn(item.type === 'icon' && [
+                    '-mx-1',
+                    i === 0 && 'ms-0',
+                    i === desktopSecondaryDisplayItems.length - 1 && 'me-0',
+                ]) }, i))) })) : null,
+        github: githubDesktopItem ? (jsxRuntime.jsx(NavbarLinkItem, { item: githubDesktopItem, className: cn.cn(githubDesktopItem.type === 'icon' && '-mx-1') })) : null,
+    };
+    const mobileMenuActionsIncludeGithub = mobileMenuActionsOrder.includes('github');
+    const githubMobileMenuItem = mobileMenuActionsIncludeGithub
+        ? secondaryMenuItems.find((item) => isGithubItem(item, githubUrl))
+        : undefined;
+    const secondaryMenuDisplayItems = mobileMenuActionsIncludeGithub && githubMobileMenuItem
+        ? secondaryMenuItems.filter((item) => !isGithubItem(item, githubUrl))
+        : secondaryMenuItems;
+    const mobileMenuActionNodes = {
+        secondary: secondaryMenuDisplayItems.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: secondaryMenuDisplayItems.map((item, i) => (jsxRuntime.jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))) })) : null,
+        github: githubMobileMenuItem ? (jsxRuntime.jsx(MenuLinkItem, { item: githubMobileMenuItem, className: "-me-1.5" })) : null,
+        separator: jsxRuntime.jsx("div", { role: "separator", className: "flex-1" }),
+        i18n: i18n ? (jsxRuntime.jsxs(CompactLanguageToggle, { children: [jsxRuntime.jsx(server.globalLucideIcons.Languages, { className: "size-5" }), jsxRuntime.jsx(languageToggle.LanguageToggleText, {}), jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null,
+        theme: themeSwitch.enabled !== false
+            ? (_d = themeSwitch.component) !== null && _d !== void 0 ? _d : jsxRuntime.jsx(themeToggle.ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+            : null,
+    };
+    const shouldRenderMobileUtilities = mobileMenuActionsOrder.some((action) => action !== 'separator' && Boolean(mobileMenuActionNodes[action]));
+    const renderMobileMenuAction = (action) => {
+        if (action === 'separator' && !shouldRenderMobileUtilities)
+            return null;
+        return mobileMenuActionNodes[action];
+    };
+    const menuNode = (jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: cn.cn(button.buttonVariants({
+                    size: 'icon',
+                    color: 'ghost',
+                    className: 'group [&_svg]:size-5.5',
+                })), enableHover: nav.enableHoverToOpen, children: jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: "transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), jsxRuntime.jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [primaryMenuItems.map((item, i) => (jsxRuntime.jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), shouldRenderMobileUtilities ? (jsxRuntime.jsx("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: mobileMenuActionsOrder.map((action) => {
+                            const node = renderMobileMenuAction(action);
+                            if (!node)
+                                return null;
+                            return (jsxRuntime.jsx(React.Fragment, { children: node }, `mobile-menu-${action}`));
+                        }) })) : null] })] }));
+    const mobilePinnedNode = mobilePinnedItems.length > 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: mobilePinnedItems.map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: "max-sm:-mr-1" }, `mobile-pinned-${i}`))) })) : null;
+    const mobileSearchNode = searchToggle$1.enabled !== false
+        ? (_f = (_e = searchToggle$1.components) === null || _e === void 0 ? void 0 : _e.sm) !== null && _f !== void 0 ? _f : (jsxRuntime.jsx(searchToggle.SearchToggle, { className: "p-2", hideIfDisabled: true }))
+        : null;
+    const mobileBarNodes = {
+        pinned: mobilePinnedNode,
+        search: mobileSearchNode,
+        menu: menuNode,
+    };
+    const getMobileBarNode = (action) => { var _a; return (_a = mobileBarNodes[action]) !== null && _a !== void 0 ? _a : null; };
+    return (jsxRuntime.jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsxRuntime.jsx(Link, { href: (_g = nav.url) !== null && _g !== void 0 ? _g : '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, jsxRuntime.jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
                     .filter((item) => !isSecondary(item))
-                    .map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: [searchToggle$1.enabled !== false &&
-                        ((_c = (_b = searchToggle$1.components) === null || _b === void 0 ? void 0 : _b.lg) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(searchToggle.LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px]", hideIfDisabled: true }))), themeSwitch.enabled !== false &&
-                        ((_d = themeSwitch.component) !== null && _d !== void 0 ? _d : jsxRuntime.jsx(themeToggle.ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })), i18n && (jsxRuntime.jsx(CompactLanguageToggle, { children: jsxRuntime.jsx(server.globalLucideIcons.Languages, { className: "size-5" }) })), jsxRuntime.jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: navItems.filter(isSecondary).map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: cn.cn(item.type === 'icon' && [
-                                '-mx-1',
-                                i === 0 && 'ms-0',
-                                i === navItems.length - 1 && 'me-0',
-                            ]) }, i))) })] }), jsxRuntime.jsxs("ul", { className: "flex flex-row items-center ms-auto -me-1.5 lg:hidden", children: [mobilePinnedItems.map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: "max-sm:-mr-1" }, `mobile-pinned-${i}`))), searchToggle$1.enabled !== false &&
-                        ((_f = (_e = searchToggle$1.components) === null || _e === void 0 ? void 0 : _e.sm) !== null && _f !== void 0 ? _f : (jsxRuntime.jsx(searchToggle.SearchToggle, { className: "p-2", hideIfDisabled: true }))), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: cn.cn(button.buttonVariants({
-                                    size: 'icon',
-                                    color: 'ghost',
-                                    className: 'group [&_svg]:size-5.5',
-                                })), enableHover: nav.enableHoverToOpen, children: jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: "transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), jsxRuntime.jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [filteredMenuItems
-                                        .filter((item) => !isSecondary(item))
-                                        .map((item, i) => (jsxRuntime.jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), jsxRuntime.jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: [filteredMenuItems.filter(isSecondary).map((item, i) => (jsxRuntime.jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))), jsxRuntime.jsx("div", { role: "separator", className: "flex-1" }), i18n ? (jsxRuntime.jsxs(CompactLanguageToggle, { children: [jsxRuntime.jsx(server.globalLucideIcons.Languages, { className: "size-5" }), jsxRuntime.jsx(languageToggle.LanguageToggleText, {}), jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null, themeSwitch.enabled !== false &&
-                                                ((_g = themeSwitch.component) !== null && _g !== void 0 ? _g : (jsxRuntime.jsx(themeToggle.ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })))] })] })] })] })] }));
+                    .map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: desktopActionsOrder.map((action) => {
+                    const node = desktopActionNodes[action];
+                    if (!node)
+                        return null;
+                    return (jsxRuntime.jsx(React.Fragment, { children: node }, `desktop-${action}`));
+                }) }), jsxRuntime.jsx("ul", { className: "flex flex-row items-center ms-auto -me-1.5 lg:hidden", children: mobileBarActionsOrder.map((action) => {
+                    const node = getMobileBarNode(action);
+                    return node ? (jsxRuntime.jsx(React.Fragment, { children: node }, `mobile-bar-${action}`)) : null;
+                }) })] }));
 }
 function CustomNavbar(_a) {
     var { bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, className, style, floating = false } = _a, props = tslib_es6.__rest(_a, ["bannerHeight", "headerHeight", "maxContentWidth", "className", "style", "floating"]);
@@ -143,7 +221,7 @@ function CompactLanguageToggle(_a) {
         throw new Error('Missing `<I18nProvider />`');
     return (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.PopoverTrigger, Object.assign({ "aria-label": context.text.chooseLanguage }, props, { className: cn.cn(button.buttonVariants({
                     color: 'ghost',
-                    className: 'gap-1.5 py-1.5 pl-2 pr-0.5',
+                    className: 'gap-1.5 py-1.5 px-1',
                 }), props.className), children: props.children })), jsxRuntime.jsxs(popover.PopoverContent, { className: cn.cn('flex min-w-[150px] z-1001 flex-col overflow-x-hidden rounded-xl border bg-fd-popover/60 p-0 text-fd-popover-foreground backdrop-blur-lg', contentClassName), children: [jsxRuntime.jsx("p", { className: "mb-1 p-2 text-xs font-medium text-fd-muted-foreground", children: context.text.chooseLanguage }), context.locales.map((item) => (jsxRuntime.jsx("button", { type: "button", className: cn.cn('p-2 text-start text-sm', item.locale === context.locale
                             ? 'bg-fd-primary/10 font-medium text-fd-primary'
                             : 'hover:bg-fd-accent hover:text-fd-accent-foreground'), onClick: () => {
@@ -151,6 +229,9 @@ function CompactLanguageToggle(_a) {
                             (_a = context.onChange) === null || _a === void 0 ? void 0 : _a.call(context, item.locale);
                         }, children: item.name }, item.locale)))] })] }));
 }
+function isGithubItem(item, githubUrl) {
+    return Boolean(githubUrl && item.type === 'icon' && item.url === githubUrl);
+}
 function isSecondary(item) {
     if ('secondary' in item && item.secondary != null)
         return item.secondary;

package/dist/fuma/base/custom-header.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { __rest } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.mjs';
-import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { useMemo, useState, Fragment } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, Fragment as Fragment$1, useState } from 'react';
 import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.mjs';
 import Link from 'fumadocs-core/link';
 import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
@@ -10,36 +10,114 @@ import { cn } from 'fumadocs-ui/utils/cn';
 import { LargeSearchToggle, SearchToggle } from 'fumadocs-ui/components/layout/search-toggle';
 import { ThemeToggle } from 'fumadocs-ui/components/layout/theme-toggle';
 import { LanguageToggleText } from 'fumadocs-ui/components/layout/language-toggle';
-import { NavigationMenuItem, NavigationMenu, NavigationMenuList, NavigationMenuViewport, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuContent } from 'fumadocs-ui/components/ui/navigation-menu';
+import { NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, NavigationMenuContent, NavigationMenu, NavigationMenuList, NavigationMenuViewport } from 'fumadocs-ui/components/ui/navigation-menu';
 import { Popover, PopoverTrigger, PopoverContent } from 'fumadocs-ui/components/ui/popover';
 import { buttonVariants } from 'fumadocs-ui/components/ui/button';
 import { useNav } from 'fumadocs-ui/contexts/layout';
 import { useI18n } from 'fumadocs-ui/contexts/i18n';
 
-function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, navbarClassName, floating = false, }) {
+const DEFAULT_DESKTOP_ACTIONS = [
+    'search',
+    'theme',
+    'i18n',
+    'secondary',
+];
+const DEFAULT_MOBILE_BAR_ACTIONS = [
+    'pinned',
+    'search',
+    'menu',
+];
+const DEFAULT_MOBILE_MENU_ACTIONS = [
+    'secondary',
+    'separator',
+    'i18n',
+    'theme',
+];
+function CustomHomeHeader({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {}, bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, navbarClassName, floating = false, desktopActionsOrder = DEFAULT_DESKTOP_ACTIONS, mobileBarActionsOrder = DEFAULT_MOBILE_BAR_ACTIONS, mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS, }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const finalLinks = useMemo(() => getLinks(links, githubUrl), [links, githubUrl]);
     const navItems = finalLinks.filter((item) => { var _a; return ['nav', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
     const menuItems = finalLinks.filter((item) => { var _a; return ['menu', 'all'].includes((_a = item.on) !== null && _a !== void 0 ? _a : 'all'); });
     const mobilePinnedItems = navItems.filter((item) => isSecondary(item) && isMobilePinned(item));
     const filteredMenuItems = menuItems.filter((item) => !isMobilePinned(item));
-    return (jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsx(Link, { href: (_a = nav.url) !== null && _a !== void 0 ? _a : '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
+    const primaryMenuItems = filteredMenuItems.filter((item) => !isSecondary(item));
+    const secondaryMenuItems = filteredMenuItems.filter(isSecondary);
+    const desktopSecondaryItems = navItems.filter(isSecondary);
+    const desktopActionsIncludeGithub = desktopActionsOrder.includes('github');
+    const githubDesktopItem = desktopActionsIncludeGithub
+        ? desktopSecondaryItems.find((item) => isGithubItem(item, githubUrl))
+        : undefined;
+    const desktopSecondaryDisplayItems = desktopActionsIncludeGithub && githubDesktopItem
+        ? desktopSecondaryItems.filter((item) => !isGithubItem(item, githubUrl))
+        : desktopSecondaryItems;
+    const desktopActionNodes = {
+        search: searchToggle.enabled !== false
+            ? (_b = (_a = searchToggle.components) === null || _a === void 0 ? void 0 : _a.lg) !== null && _b !== void 0 ? _b : (jsx(LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px]", hideIfDisabled: true }))
+            : null,
+        theme: themeSwitch.enabled !== false
+            ? (_c = themeSwitch.component) !== null && _c !== void 0 ? _c : jsx(ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+            : null,
+        i18n: i18n ? (jsx(CompactLanguageToggle, { children: jsx(globalLucideIcons.Languages, { className: "size-5" }) })) : null,
+        secondary: desktopSecondaryDisplayItems.length ? (jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: desktopSecondaryDisplayItems.map((item, i) => (jsx(NavbarLinkItem, { item: item, className: cn(item.type === 'icon' && [
+                    '-mx-1',
+                    i === 0 && 'ms-0',
+                    i === desktopSecondaryDisplayItems.length - 1 && 'me-0',
+                ]) }, i))) })) : null,
+        github: githubDesktopItem ? (jsx(NavbarLinkItem, { item: githubDesktopItem, className: cn(githubDesktopItem.type === 'icon' && '-mx-1') })) : null,
+    };
+    const mobileMenuActionsIncludeGithub = mobileMenuActionsOrder.includes('github');
+    const githubMobileMenuItem = mobileMenuActionsIncludeGithub
+        ? secondaryMenuItems.find((item) => isGithubItem(item, githubUrl))
+        : undefined;
+    const secondaryMenuDisplayItems = mobileMenuActionsIncludeGithub && githubMobileMenuItem
+        ? secondaryMenuItems.filter((item) => !isGithubItem(item, githubUrl))
+        : secondaryMenuItems;
+    const mobileMenuActionNodes = {
+        secondary: secondaryMenuDisplayItems.length ? (jsx(Fragment, { children: secondaryMenuDisplayItems.map((item, i) => (jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))) })) : null,
+        github: githubMobileMenuItem ? (jsx(MenuLinkItem, { item: githubMobileMenuItem, className: "-me-1.5" })) : null,
+        separator: jsx("div", { role: "separator", className: "flex-1" }),
+        i18n: i18n ? (jsxs(CompactLanguageToggle, { children: [jsx(globalLucideIcons.Languages, { className: "size-5" }), jsx(LanguageToggleText, {}), jsx(globalLucideIcons.ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null,
+        theme: themeSwitch.enabled !== false
+            ? (_d = themeSwitch.component) !== null && _d !== void 0 ? _d : jsx(ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })
+            : null,
+    };
+    const shouldRenderMobileUtilities = mobileMenuActionsOrder.some((action) => action !== 'separator' && Boolean(mobileMenuActionNodes[action]));
+    const renderMobileMenuAction = (action) => {
+        if (action === 'separator' && !shouldRenderMobileUtilities)
+            return null;
+        return mobileMenuActionNodes[action];
+    };
+    const menuNode = (jsxs(Menu, { children: [jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: cn(buttonVariants({
+                    size: 'icon',
+                    color: 'ghost',
+                    className: 'group [&_svg]:size-5.5',
+                })), enableHover: nav.enableHoverToOpen, children: jsx(globalLucideIcons.ChevronDown, { className: "transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [primaryMenuItems.map((item, i) => (jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), shouldRenderMobileUtilities ? (jsx("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: mobileMenuActionsOrder.map((action) => {
+                            const node = renderMobileMenuAction(action);
+                            if (!node)
+                                return null;
+                            return (jsx(Fragment$1, { children: node }, `mobile-menu-${action}`));
+                        }) })) : null] })] }));
+    const mobilePinnedNode = mobilePinnedItems.length > 0 ? (jsx(Fragment, { children: mobilePinnedItems.map((item, i) => (jsx(NavbarLinkItem, { item: item, className: "max-sm:-mr-1" }, `mobile-pinned-${i}`))) })) : null;
+    const mobileSearchNode = searchToggle.enabled !== false
+        ? (_f = (_e = searchToggle.components) === null || _e === void 0 ? void 0 : _e.sm) !== null && _f !== void 0 ? _f : (jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))
+        : null;
+    const mobileBarNodes = {
+        pinned: mobilePinnedNode,
+        search: mobileSearchNode,
+        menu: menuNode,
+    };
+    const getMobileBarNode = (action) => { var _a; return (_a = mobileBarNodes[action]) !== null && _a !== void 0 ? _a : null; };
+    return (jsxs(CustomNavbar, { bannerHeight: bannerHeight, headerHeight: headerHeight, maxContentWidth: maxContentWidth, className: navbarClassName, floating: floating, children: [jsx(Link, { href: (_g = nav.url) !== null && _g !== void 0 ? _g : '/', className: "inline-flex items-center gap-2.5 font-semibold", children: nav.title }), nav.children, jsx("ul", { className: "flex flex-row items-center gap-2 px-6 max-sm:hidden", children: navItems
                     .filter((item) => !isSecondary(item))
-                    .map((item, i) => (jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), jsxs("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: [searchToggle.enabled !== false &&
-                        ((_c = (_b = searchToggle.components) === null || _b === void 0 ? void 0 : _b.lg) !== null && _c !== void 0 ? _c : (jsx(LargeSearchToggle, { className: "w-full rounded-full ps-2.5 max-w-[240px]", hideIfDisabled: true }))), themeSwitch.enabled !== false &&
-                        ((_d = themeSwitch.component) !== null && _d !== void 0 ? _d : jsx(ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })), i18n && (jsx(CompactLanguageToggle, { children: jsx(globalLucideIcons.Languages, { className: "size-5" }) })), jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: navItems.filter(isSecondary).map((item, i) => (jsx(NavbarLinkItem, { item: item, className: cn(item.type === 'icon' && [
-                                '-mx-1',
-                                i === 0 && 'ms-0',
-                                i === navItems.length - 1 && 'me-0',
-                            ]) }, i))) })] }), jsxs("ul", { className: "flex flex-row items-center ms-auto -me-1.5 lg:hidden", children: [mobilePinnedItems.map((item, i) => (jsx(NavbarLinkItem, { item: item, className: "max-sm:-mr-1" }, `mobile-pinned-${i}`))), searchToggle.enabled !== false &&
-                        ((_f = (_e = searchToggle.components) === null || _e === void 0 ? void 0 : _e.sm) !== null && _f !== void 0 ? _f : (jsx(SearchToggle, { className: "p-2", hideIfDisabled: true }))), jsxs(Menu, { children: [jsx(MenuTrigger, { "aria-label": "Toggle Menu", className: cn(buttonVariants({
-                                    size: 'icon',
-                                    color: 'ghost',
-                                    className: 'group [&_svg]:size-5.5',
-                                })), enableHover: nav.enableHoverToOpen, children: jsx(globalLucideIcons.ChevronDown, { className: "transition-transform duration-300 group-data-[state=open]:rotate-180" }) }), jsxs(MenuContent, { className: "sm:flex-row sm:items-center sm:justify-end", children: [filteredMenuItems
-                                        .filter((item) => !isSecondary(item))
-                                        .map((item, i) => (jsx(MenuLinkItem, { item: item, className: "sm:hidden" }, i))), jsxs("div", { className: "-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2", children: [filteredMenuItems.filter(isSecondary).map((item, i) => (jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))), jsx("div", { role: "separator", className: "flex-1" }), i18n ? (jsxs(CompactLanguageToggle, { children: [jsx(globalLucideIcons.Languages, { className: "size-5" }), jsx(LanguageToggleText, {}), jsx(globalLucideIcons.ChevronDown, { className: "size-3 text-fd-muted-foreground" })] })) : null, themeSwitch.enabled !== false &&
-                                                ((_g = themeSwitch.component) !== null && _g !== void 0 ? _g : (jsx(ThemeToggle, { mode: themeSwitch === null || themeSwitch === void 0 ? void 0 : themeSwitch.mode })))] })] })] })] })] }));
+                    .map((item, i) => (jsx(NavbarLinkItem, { item: item, className: "text-sm" }, i))) }), jsx("div", { className: "flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden", children: desktopActionsOrder.map((action) => {
+                    const node = desktopActionNodes[action];
+                    if (!node)
+                        return null;
+                    return (jsx(Fragment$1, { children: node }, `desktop-${action}`));
+                }) }), jsx("ul", { className: "flex flex-row items-center ms-auto -me-1.5 lg:hidden", children: mobileBarActionsOrder.map((action) => {
+                    const node = getMobileBarNode(action);
+                    return node ? (jsx(Fragment$1, { children: node }, `mobile-bar-${action}`)) : null;
+                }) })] }));
 }
 function CustomNavbar(_a) {
     var { bannerHeight = 0, headerHeight = 2.5, maxContentWidth = 1400, className, style, floating = false } = _a, props = __rest(_a, ["bannerHeight", "headerHeight", "maxContentWidth", "className", "style", "floating"]);
@@ -96,10 +174,10 @@ function NavbarLinkItem(_a) {
         const children = item.items.map((child, j) => {
             var _a, _b;
             if (child.type === 'custom') {
-                return jsx(Fragment, { children: child.children }, j);
+                return jsx(Fragment$1, { children: child.children }, j);
             }
             const _c = (_a = child.menu) !== null && _a !== void 0 ? _a : {}, { banner = child.icon ? (jsx("div", { className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4", children: child.icon })) : null } = _c, rest = __rest(_c, ["banner"]);
-            return (jsx(NavigationMenuLink, { asChild: true, children: jsx(Link, Object.assign({ href: child.url, external: child.external }, rest, { className: cn('flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground', rest.className), children: (_b = rest.children) !== null && _b !== void 0 ? _b : (jsxs(Fragment$1, { children: [banner, jsx("p", { className: "text-[15px] font-medium", children: child.text }), jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden", children: child.description })] })) })) }, `${j}-${child.url}`));
+            return (jsx(NavigationMenuLink, { asChild: true, children: jsx(Link, Object.assign({ href: child.url, external: child.external }, rest, { className: cn('flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground', rest.className), children: (_b = rest.children) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [banner, jsx("p", { className: "text-[15px] font-medium", children: child.text }), jsx("p", { className: "text-sm text-fd-muted-foreground empty:hidden", children: child.description })] })) })) }, `${j}-${child.url}`));
         });
         return (jsxs(NavigationMenuItem, { children: [jsx(NavigationMenuTrigger, Object.assign({}, props, { className: cn(navItemVariants(), 'rounded-md', props.className), children: item.url ? (jsx(Link, { href: item.url, external: item.external, children: item.text })) : (item.text) })), jsx(NavigationMenuContent, { className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", children: children })] }));
     }
@@ -112,7 +190,7 @@ function MenuLinkItem(_a) {
     if (item.type === 'custom')
         return jsx("div", { className: cn('grid', props.className), children: item.children });
     if (item.type === 'menu') {
-        const header = (jsxs(Fragment$1, { children: [item.icon, item.text] }));
+        const header = (jsxs(Fragment, { children: [item.icon, item.text] }));
         return (jsxs("div", { className: cn('mb-4 flex flex-col', props.className), children: [jsx("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? (jsx(NavigationMenuLink, { asChild: true, children: jsx(Link, { href: item.url, external: item.external, children: header }) })) : (header) }), item.items.map((child, i) => (jsx(MenuLinkItem, { item: child }, i)))] }));
     }
     return (jsx(NavigationMenuLink, { asChild: true, children: jsxs(BaseLinkItem, { item: item, className: cn({
@@ -141,7 +219,7 @@ function CompactLanguageToggle(_a) {
         throw new Error('Missing `<I18nProvider />`');
     return (jsxs(Popover, { children: [jsx(PopoverTrigger, Object.assign({ "aria-label": context.text.chooseLanguage }, props, { className: cn(buttonVariants({
                     color: 'ghost',
-                    className: 'gap-1.5 py-1.5 pl-2 pr-0.5',
+                    className: 'gap-1.5 py-1.5 px-1',
                 }), props.className), children: props.children })), jsxs(PopoverContent, { className: cn('flex min-w-[150px] z-1001 flex-col overflow-x-hidden rounded-xl border bg-fd-popover/60 p-0 text-fd-popover-foreground backdrop-blur-lg', contentClassName), children: [jsx("p", { className: "mb-1 p-2 text-xs font-medium text-fd-muted-foreground", children: context.text.chooseLanguage }), context.locales.map((item) => (jsx("button", { type: "button", className: cn('p-2 text-start text-sm', item.locale === context.locale
                             ? 'bg-fd-primary/10 font-medium text-fd-primary'
                             : 'hover:bg-fd-accent hover:text-fd-accent-foreground'), onClick: () => {
@@ -149,6 +227,9 @@ function CompactLanguageToggle(_a) {
                             (_a = context.onChange) === null || _a === void 0 ? void 0 : _a.call(context, item.locale);
                         }, children: item.name }, item.locale)))] })] }));
 }
+function isGithubItem(item, githubUrl) {
+    return Boolean(githubUrl && item.type === 'icon' && item.url === githubUrl);
+}
 function isSecondary(item) {
     if ('secondary' in item && item.secondary != null)
         return item.secondary;

package/dist/fuma/base/custom-home-layout.d.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 import { type HomeLayoutProps } from 'fumadocs-ui/layouts/home';
+import { type DesktopAction, type MobileBarAction, type MobileMenuAction } from './custom-header';
 export interface CustomHomeLayoutProps {
     locale: string;
     options: HomeLayoutProps;
@@ -63,6 +64,15 @@ export interface CustomHomeLayoutProps {
      * Additional styles merged on top of the computed layout style.
      */
     style?: CSSProperties;
+    /**
+     * Customize the order of header action items.
+     */
+    actionOrders?: HeaderActionOrders;
     children?: ReactNode;
 }
-export declare function CustomHomeLayout({ locale, options, children, showBanner, bannerHeight, headerHeight, headerPaddingTop, navbarClassName, banner, footer, goToTop, showFooter, showGoToTop, style, floatingNav, }: CustomHomeLayoutProps): import("react/jsx-runtime").JSX.Element;
+export interface HeaderActionOrders {
+    desktop?: DesktopAction[];
+    mobileBar?: MobileBarAction[];
+    mobileMenu?: MobileMenuAction[];
+}
+export declare function CustomHomeLayout({ locale, options, children, showBanner, bannerHeight, headerHeight, headerPaddingTop, navbarClassName, banner, footer, goToTop, showFooter, showGoToTop, style, floatingNav, actionOrders, }: CustomHomeLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/fuma/base/custom-home-layout.js

@@ -8,7 +8,7 @@ var footer = require('../../main/footer.js');
 var goToTop = require('../../main/go-to-top.js');
 var customHeader = require('./custom-header.js');
 
-function CustomHomeLayout({ locale, options, children, showBanner = false, bannerHeight, headerHeight = 2.5, headerPaddingTop, navbarClassName, banner, footer: footer$1, goToTop: goToTop$1, showFooter = true, showGoToTop = true, style, floatingNav = false, }) {
+function CustomHomeLayout({ locale, options, children, showBanner = false, bannerHeight, headerHeight = 2.5, headerPaddingTop, navbarClassName, banner, footer: footer$1, goToTop: goToTop$1, showFooter = true, showGoToTop = true, style, floatingNav = false, actionOrders, }) {
     const resolvedBannerHeight = bannerHeight !== null && bannerHeight !== void 0 ? bannerHeight : (showBanner ? 3 : 0.5);
     const resolvedPaddingTop = headerPaddingTop !== null && headerPaddingTop !== void 0 ? headerPaddingTop : (showBanner ? 0 : 0.5);
     const layoutStyle = Object.assign({ '--fd-banner-height': `${resolvedBannerHeight}rem`, '--fd-nav-height': `${headerHeight}rem`, paddingTop: floatingNav
@@ -16,7 +16,7 @@ function CustomHomeLayout({ locale, options, children, showBanner = false, banne
             : `${resolvedPaddingTop}rem` }, style);
     const { nav } = options, homeLayoutProps = tslib_es6.__rest(options, ["nav"]);
     const navOptions = nav !== null && nav !== void 0 ? nav : {};
-    const header = (jsxRuntime.jsx(customHeader.CustomHomeHeader, Object.assign({}, homeLayoutProps, { nav: navOptions, bannerHeight: resolvedBannerHeight, headerHeight: headerHeight, navbarClassName: navbarClassName, floating: floatingNav })));
+    const header = (jsxRuntime.jsx(customHeader.CustomHomeHeader, Object.assign({}, homeLayoutProps, { nav: navOptions, bannerHeight: resolvedBannerHeight, headerHeight: headerHeight, navbarClassName: navbarClassName, floating: floatingNav, desktopActionsOrder: actionOrders === null || actionOrders === void 0 ? void 0 : actionOrders.desktop, mobileBarActionsOrder: actionOrders === null || actionOrders === void 0 ? void 0 : actionOrders.mobileBar, mobileMenuActionsOrder: actionOrders === null || actionOrders === void 0 ? void 0 : actionOrders.mobileMenu })));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [banner !== null && banner !== void 0 ? banner : (jsxRuntime.jsx(fumaBannerSuit.FumaBannerSuit, { locale: locale, showBanner: showBanner, floating: floatingNav })), jsxRuntime.jsxs(home.HomeLayout, Object.assign({}, homeLayoutProps, { nav: Object.assign(Object.assign({}, navOptions), { component: header }), className: 'bg-neutral-100 dark:bg-neutral-900', style: layoutStyle, children: [children, showFooter ? footer$1 !== null && footer$1 !== void 0 ? footer$1 : jsxRuntime.jsx(footer.Footer, { locale: locale }) : null, showGoToTop ? goToTop$1 !== null && goToTop$1 !== void 0 ? goToTop$1 : jsxRuntime.jsx(goToTop.GoToTop, {}) : null] }))] }));
 }
 

package/dist/fuma/base/custom-home-layout.mjs

@@ -6,7 +6,7 @@ import { Footer } from '../../main/footer.mjs';
 import { GoToTop } from '../../main/go-to-top.mjs';
 import { CustomHomeHeader } from './custom-header.mjs';
 
-function CustomHomeLayout({ locale, options, children, showBanner = false, bannerHeight, headerHeight = 2.5, headerPaddingTop, navbarClassName, banner, footer, goToTop, showFooter = true, showGoToTop = true, style, floatingNav = false, }) {
+function CustomHomeLayout({ locale, options, children, showBanner = false, bannerHeight, headerHeight = 2.5, headerPaddingTop, navbarClassName, banner, footer, goToTop, showFooter = true, showGoToTop = true, style, floatingNav = false, actionOrders, }) {
     const resolvedBannerHeight = bannerHeight !== null && bannerHeight !== void 0 ? bannerHeight : (showBanner ? 3 : 0.5);
     const resolvedPaddingTop = headerPaddingTop !== null && headerPaddingTop !== void 0 ? headerPaddingTop : (showBanner ? 0 : 0.5);
     const layoutStyle = Object.assign({ '--fd-banner-height': `${resolvedBannerHeight}rem`, '--fd-nav-height': `${headerHeight}rem`, paddingTop: floatingNav
@@ -14,7 +14,7 @@ function CustomHomeLayout({ locale, options, children, showBanner = false, banne
             : `${resolvedPaddingTop}rem` }, style);
     const { nav } = options, homeLayoutProps = __rest(options, ["nav"]);
     const navOptions = nav !== null && nav !== void 0 ? nav : {};
-    const header = (jsx(CustomHomeHeader, Object.assign({}, homeLayoutProps, { nav: navOptions, bannerHeight: resolvedBannerHeight, headerHeight: headerHeight, navbarClassName: navbarClassName, floating: floatingNav })));
+    const header = (jsx(CustomHomeHeader, Object.assign({}, homeLayoutProps, { nav: navOptions, bannerHeight: resolvedBannerHeight, headerHeight: headerHeight, navbarClassName: navbarClassName, floating: floatingNav, desktopActionsOrder: actionOrders === null || actionOrders === void 0 ? void 0 : actionOrders.desktop, mobileBarActionsOrder: actionOrders === null || actionOrders === void 0 ? void 0 : actionOrders.mobileBar, mobileMenuActionsOrder: actionOrders === null || actionOrders === void 0 ? void 0 : actionOrders.mobileMenu })));
     return (jsxs(Fragment, { children: [banner !== null && banner !== void 0 ? banner : (jsx(FumaBannerSuit, { locale: locale, showBanner: showBanner, floating: floatingNav })), jsxs(HomeLayout, Object.assign({}, homeLayoutProps, { nav: Object.assign(Object.assign({}, navOptions), { component: header }), className: 'bg-neutral-100 dark:bg-neutral-900', style: layoutStyle, children: [children, showFooter ? footer !== null && footer !== void 0 ? footer : jsx(Footer, { locale: locale }) : null, showGoToTop ? goToTop !== null && goToTop !== void 0 ? goToTop : jsx(GoToTop, {}) : null] }))] }));
 }
 

package/dist/main/credit/credit-nav-button.js

@@ -106,7 +106,7 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
         closePricingModal,
     }), [closeMenu, isMobile, openPricingModal, closePricingModal]);
     const isOnetimeModal = pricingModal.mode === 'onetime';
-    return (jsxRuntime.jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxRuntime.jsxs(ui.DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: utils.cn('group ml-1 mr-0 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:border-transparent hover:bg-linear-to-r hover:from-purple-500/90 hover:to-pink-500/90 hover:text-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:hover:from-purple-500 dark:hover:to-pink-500'), ref: triggerRef, children: [jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-br from-purple-400/20 to-pink-500/20 text-purple-600 transition-transform group-hover:scale-105 dark:text-purple-200", children: jsxRuntime.jsx(server.globalLucideIcons.Gem, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsxs("span", { className: "relative flex items-center", children: [jsxRuntime.jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsxRuntime.jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsxRuntime.jsx(ui.DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsxRuntime.jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsxRuntime.jsx(ui.AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", children: [jsxRuntime.jsxs(ui.AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsxRuntime.jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsxRuntime.jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsxRuntime.jsx(server.globalLucideIcons.X, { className: "h-6 w-6" }) })] }), jsxRuntime.jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsxRuntime.jsx("div", { className: "mx-auto w-full", children: jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
+    return (jsxRuntime.jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxRuntime.jsxs(ui.DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: utils.cn('group mx-2  sm:mx-1 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:border-transparent hover:bg-linear-to-r hover:from-purple-500/90 hover:to-pink-500/90 hover:text-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:hover:from-purple-500 dark:hover:to-pink-500'), ref: triggerRef, children: [jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-br from-purple-400/20 to-pink-500/20 text-purple-600 transition-transform group-hover:scale-105 dark:text-purple-200", children: jsxRuntime.jsx(server.globalLucideIcons.Gem, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsxs("span", { className: "relative flex items-center", children: [jsxRuntime.jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsxRuntime.jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsxRuntime.jsx(ui.DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsxRuntime.jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsxRuntime.jsx(ui.AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", children: [jsxRuntime.jsxs(ui.AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsxRuntime.jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsxRuntime.jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsxRuntime.jsx(server.globalLucideIcons.X, { className: "h-6 w-6" }) })] }), jsxRuntime.jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsxRuntime.jsx("div", { className: "mx-auto w-full", children: jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
 }
 const CreditNavPopoverContext = React.createContext(null);
 function useCreditNavPopover() {

package/dist/main/credit/credit-nav-button.mjs

@@ -104,7 +104,7 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
         closePricingModal,
     }), [closeMenu, isMobile, openPricingModal, closePricingModal]);
     const isOnetimeModal = pricingModal.mode === 'onetime';
-    return (jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxs(DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: cn('group ml-1 mr-0 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:border-transparent hover:bg-linear-to-r hover:from-purple-500/90 hover:to-pink-500/90 hover:text-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:hover:from-purple-500 dark:hover:to-pink-500'), ref: triggerRef, children: [jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-br from-purple-400/20 to-pink-500/20 text-purple-600 transition-transform group-hover:scale-105 dark:text-purple-200", children: jsx(globalLucideIcons.Gem, { className: "h-3.5 w-3.5" }) }), jsxs("span", { className: "relative flex items-center", children: [jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsx(DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsx(AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxs(AlertDialogContent, { className: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", children: [jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsx(globalLucideIcons.X, { className: "h-6 w-6" }) })] }), jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsx("div", { className: "mx-auto w-full", children: jsx(MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
+    return (jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxs(DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: cn('group mx-2  sm:mx-1 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:border-transparent hover:bg-linear-to-r hover:from-purple-500/90 hover:to-pink-500/90 hover:text-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:hover:from-purple-500 dark:hover:to-pink-500'), ref: triggerRef, children: [jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-br from-purple-400/20 to-pink-500/20 text-purple-600 transition-transform group-hover:scale-105 dark:text-purple-200", children: jsx(globalLucideIcons.Gem, { className: "h-3.5 w-3.5" }) }), jsxs("span", { className: "relative flex items-center", children: [jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsx(DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsx(AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxs(AlertDialogContent, { className: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", children: [jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsx(globalLucideIcons.X, { className: "h-6 w-6" }) })] }), jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsx("div", { className: "mx-auto w-full", children: jsx(MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
 }
 const CreditNavPopoverContext = createContext(null);
 function useCreditNavPopover() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "10.1.0",
+  "version": "10.1.2",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -81,8 +81,8 @@
     "react-medium-image-zoom": "^5.2.14",
     "swiper": "^12.0.3",
     "zod": "^4.1.12",
-    "@windrun-huaiin/lib": "^10.1.0",
-    "@windrun-huaiin/base-ui": "^10.1.0"
+    "@windrun-huaiin/base-ui": "^10.1.0",
+    "@windrun-huaiin/lib": "^10.1.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/clerk/clerk-user-client.tsx

@@ -16,7 +16,7 @@ interface ClerkUserData {
 
 export function ClerkUserClient({ data }: { data: ClerkUserData }) {
   return (
-    <div className="flex items-center gap-2 h-10 mx-3 md:ml-1 md:mr-2">
+    <div className="flex items-center gap-2 h-10 mr-3 sm:mr-2">
       <ClerkLoading>
           <div className="w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm"></div>
       </ClerkLoading>

package/src/fuma/base/custom-header.tsx

@@ -4,6 +4,7 @@ import {
   type ComponentProps,
   type CSSProperties,
   Fragment,
+  type ReactNode,
   useMemo,
   useState,
 } from 'react';
@@ -79,8 +80,52 @@ export interface CustomHomeHeaderProps extends HomeLayoutProps {
    * @defaultValue true
    */
   floating?: boolean;
+  /**
+   * Control order of action items on desktop.
+   */
+  desktopActionsOrder?: DesktopAction[];
+  /**
+   * Control order of quick actions on the mobile bar.
+   */
+  mobileBarActionsOrder?: MobileBarAction[];
+  /**
+   * Control order of utilities inside the mobile dropdown.
+   */
+  mobileMenuActionsOrder?: MobileMenuAction[];
 }
 
+export type DesktopAction =
+  | 'search'
+  | 'theme'
+  | 'i18n'
+  | 'secondary'
+  | 'github';
+export type MobileBarAction = 'pinned' | 'search' | 'menu';
+export type MobileMenuAction =
+  | 'secondary'
+  | 'github'
+  | 'separator'
+  | 'i18n'
+  | 'theme';
+
+const DEFAULT_DESKTOP_ACTIONS: DesktopAction[] = [
+  'search',
+  'theme',
+  'i18n',
+  'secondary',
+];
+const DEFAULT_MOBILE_BAR_ACTIONS: MobileBarAction[] = [
+  'pinned',
+  'search',
+  'menu',
+];
+const DEFAULT_MOBILE_MENU_ACTIONS: MobileMenuAction[] = [
+  'secondary',
+  'separator',
+  'i18n',
+  'theme',
+];
+
 export function CustomHomeHeader({
   nav = {},
   i18n = false,
@@ -93,6 +138,9 @@ export function CustomHomeHeader({
   maxContentWidth = 1400,
   navbarClassName,
   floating = false,
+  desktopActionsOrder = DEFAULT_DESKTOP_ACTIONS,
+  mobileBarActionsOrder = DEFAULT_MOBILE_BAR_ACTIONS,
+  mobileMenuActionsOrder = DEFAULT_MOBILE_MENU_ACTIONS,
 }: CustomHomeHeaderProps) {
   const finalLinks = useMemo(
     () => getLinks(links, githubUrl),
@@ -108,10 +156,167 @@ export function CustomHomeHeader({
   const mobilePinnedItems = navItems.filter(
     (item) => isSecondary(item) && isMobilePinned(item),
   );
-  const filteredMenuItems = menuItems.filter(
-    (item) => !isMobilePinned(item),
+  const filteredMenuItems = menuItems.filter((item) => !isMobilePinned(item));
+  const primaryMenuItems = filteredMenuItems.filter((item) => !isSecondary(item));
+  const secondaryMenuItems = filteredMenuItems.filter(isSecondary);
+  const desktopSecondaryItems = navItems.filter(isSecondary);
+  const desktopActionsIncludeGithub = desktopActionsOrder.includes('github');
+  const githubDesktopItem = desktopActionsIncludeGithub
+    ? desktopSecondaryItems.find((item) => isGithubItem(item, githubUrl))
+    : undefined;
+  const desktopSecondaryDisplayItems =
+    desktopActionsIncludeGithub && githubDesktopItem
+      ? desktopSecondaryItems.filter((item) => !isGithubItem(item, githubUrl))
+      : desktopSecondaryItems;
+
+  const desktopActionNodes: Record<DesktopAction, ReactNode> = {
+    search:
+      searchToggle.enabled !== false
+        ? searchToggle.components?.lg ?? (
+            <LargeSearchToggle
+              className="w-full rounded-full ps-2.5 max-w-[240px]"
+              hideIfDisabled
+            />
+          )
+        : null,
+    theme:
+      themeSwitch.enabled !== false
+        ? themeSwitch.component ?? <ThemeToggle mode={themeSwitch?.mode} />
+        : null,
+    i18n: i18n ? (
+      <CompactLanguageToggle>
+        <icons.Languages className="size-5" />
+      </CompactLanguageToggle>
+    ) : null,
+    secondary: desktopSecondaryDisplayItems.length ? (
+      <ul className="flex flex-row gap-2 items-center empty:hidden">
+        {desktopSecondaryDisplayItems.map((item, i) => (
+          <NavbarLinkItem
+            key={i}
+            item={item}
+            className={cn(
+              item.type === 'icon' && [
+                '-mx-1',
+                i === 0 && 'ms-0',
+                i === desktopSecondaryDisplayItems.length - 1 && 'me-0',
+              ],
+            )}
+          />
+        ))}
+      </ul>
+    ) : null,
+    github: githubDesktopItem ? (
+      <NavbarLinkItem
+        item={githubDesktopItem}
+        className={cn(githubDesktopItem.type === 'icon' && '-mx-1')}
+      />
+    ) : null,
+  };
+
+  const mobileMenuActionsIncludeGithub =
+    mobileMenuActionsOrder.includes('github');
+  const githubMobileMenuItem = mobileMenuActionsIncludeGithub
+    ? secondaryMenuItems.find((item) => isGithubItem(item, githubUrl))
+    : undefined;
+  const secondaryMenuDisplayItems =
+    mobileMenuActionsIncludeGithub && githubMobileMenuItem
+      ? secondaryMenuItems.filter((item) => !isGithubItem(item, githubUrl))
+      : secondaryMenuItems;
+
+  const mobileMenuActionNodes: Record<MobileMenuAction, ReactNode> = {
+    secondary: secondaryMenuDisplayItems.length ? (
+      <>
+        {secondaryMenuDisplayItems.map((item, i) => (
+          <MenuLinkItem key={i} item={item} className="-me-1.5" />
+        ))}
+      </>
+    ) : null,
+    github: githubMobileMenuItem ? (
+      <MenuLinkItem item={githubMobileMenuItem} className="-me-1.5" />
+    ) : null,
+    separator: <div role="separator" className="flex-1" />,
+    i18n: i18n ? (
+      <CompactLanguageToggle>
+        <icons.Languages className="size-5" />
+        <LanguageToggleText />
+        <icons.ChevronDown className="size-3 text-fd-muted-foreground" />
+      </CompactLanguageToggle>
+    ) : null,
+    theme:
+      themeSwitch.enabled !== false
+        ? themeSwitch.component ?? <ThemeToggle mode={themeSwitch?.mode} />
+        : null,
+  };
+  const shouldRenderMobileUtilities = mobileMenuActionsOrder.some(
+    (action) => action !== 'separator' && Boolean(mobileMenuActionNodes[action]),
+  );
+  const renderMobileMenuAction = (action: MobileMenuAction) => {
+    if (action === 'separator' && !shouldRenderMobileUtilities) return null;
+    return mobileMenuActionNodes[action];
+  };
+
+  const menuNode = (
+    <Menu>
+      <MenuTrigger
+        aria-label="Toggle Menu"
+        className={cn(
+          buttonVariants({
+            size: 'icon',
+            color: 'ghost',
+            className: 'group [&_svg]:size-5.5',
+          }),
+        )}
+        enableHover={nav.enableHoverToOpen}
+      >
+        <icons.ChevronDown className="transition-transform duration-300 group-data-[state=open]:rotate-180" />
+      </MenuTrigger>
+      <MenuContent className="sm:flex-row sm:items-center sm:justify-end">
+        {primaryMenuItems.map((item, i) => (
+          <MenuLinkItem key={i} item={item} className="sm:hidden" />
+        ))}
+        {shouldRenderMobileUtilities ? (
+          <div className="-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2">
+            {mobileMenuActionsOrder.map((action) => {
+              const node = renderMobileMenuAction(action);
+              if (!node) return null;
+              return (
+                <Fragment key={`mobile-menu-${action}`}>
+                  {node}
+                </Fragment>
+              );
+            })}
+          </div>
+        ) : null}
+      </MenuContent>
+    </Menu>
   );
 
+  const mobilePinnedNode =
+    mobilePinnedItems.length > 0 ? (
+      <>
+        {mobilePinnedItems.map((item, i) => (
+          <NavbarLinkItem
+            key={`mobile-pinned-${i}`}
+            item={item}
+            className="max-sm:-mr-1"
+          />
+        ))}
+      </>
+    ) : null;
+  const mobileSearchNode =
+    searchToggle.enabled !== false
+      ? searchToggle.components?.sm ?? (
+          <SearchToggle className="p-2" hideIfDisabled />
+        )
+      : null;
+  const mobileBarNodes: Record<MobileBarAction, ReactNode> = {
+    pinned: mobilePinnedNode,
+    search: mobileSearchNode,
+    menu: menuNode,
+  };
+  const getMobileBarNode = (action: MobileBarAction) =>
+    mobileBarNodes[action] ?? null;
+
   return (
     <CustomNavbar
       bannerHeight={bannerHeight}
@@ -135,87 +340,23 @@ export function CustomHomeHeader({
           ))}
       </ul>
       <div className="flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden">
-        {searchToggle.enabled !== false &&
-          (searchToggle.components?.lg ?? (
-            <LargeSearchToggle
-              className="w-full rounded-full ps-2.5 max-w-[240px]"
-              hideIfDisabled
-            />
-          ))}
-        {themeSwitch.enabled !== false &&
-          (themeSwitch.component ?? <ThemeToggle mode={themeSwitch?.mode} />)}
-        {i18n && (
-          <CompactLanguageToggle>
-            <icons.Languages className="size-5" />
-          </CompactLanguageToggle>
-        )}
-        <ul className="flex flex-row gap-2 items-center empty:hidden">
-          {navItems.filter(isSecondary).map((item, i) => (
-            <NavbarLinkItem
-              key={i}
-              item={item}
-              className={cn(
-                item.type === 'icon' && [
-                  '-mx-1',
-                  i === 0 && 'ms-0',
-                  i === navItems.length - 1 && 'me-0',
-                ],
-              )}
-            />
-          ))}
-        </ul>
+        {desktopActionsOrder.map((action) => {
+          const node = desktopActionNodes[action];
+          if (!node) return null;
+          return (
+            <Fragment key={`desktop-${action}`}>
+              {node}
+            </Fragment>
+          );
+        })}
       </div>
       <ul className="flex flex-row items-center ms-auto -me-1.5 lg:hidden">
-        {mobilePinnedItems.map((item, i) => (
-          <NavbarLinkItem
-            key={`mobile-pinned-${i}`}
-            item={item}
-            className="max-sm:-mr-1"
-          />
-        ))}
-        {searchToggle.enabled !== false &&
-          (searchToggle.components?.sm ?? (
-            <SearchToggle className="p-2" hideIfDisabled />
-          ))}
-        <Menu>
-          <MenuTrigger
-            aria-label="Toggle Menu"
-            className={cn(
-              buttonVariants({
-                size: 'icon',
-                color: 'ghost',
-                className: 'group [&_svg]:size-5.5',
-              }),
-            )}
-            enableHover={nav.enableHoverToOpen}
-          >
-            <icons.ChevronDown className="transition-transform duration-300 group-data-[state=open]:rotate-180" />
-          </MenuTrigger>
-          <MenuContent className="sm:flex-row sm:items-center sm:justify-end">
-            {filteredMenuItems
-              .filter((item) => !isSecondary(item))
-              .map((item, i) => (
-                <MenuLinkItem key={i} item={item} className="sm:hidden" />
-              ))}
-            <div className="-ms-1.5 flex flex-row items-center gap-1.5 max-sm:mt-2">
-              {filteredMenuItems.filter(isSecondary).map((item, i) => (
-                <MenuLinkItem key={i} item={item} className="-me-1.5" />
-              ))}
-              <div role="separator" className="flex-1" />
-              {i18n ? (
-                <CompactLanguageToggle>
-                  <icons.Languages className="size-5" />
-                  <LanguageToggleText />
-                  <icons.ChevronDown className="size-3 text-fd-muted-foreground" />
-                </CompactLanguageToggle>
-              ) : null}
-              {themeSwitch.enabled !== false &&
-                (themeSwitch.component ?? (
-                  <ThemeToggle mode={themeSwitch?.mode} />
-                ))}
-            </div>
-          </MenuContent>
-        </Menu>
+        {mobileBarActionsOrder.map((action) => {
+          const node = getMobileBarNode(action);
+          return node ? (
+            <Fragment key={`mobile-bar-${action}`}>{node}</Fragment>
+          ) : null;
+        })}
       </ul>
     </CustomNavbar>
   );
@@ -525,7 +666,7 @@ function CompactLanguageToggle({
         className={cn(
           buttonVariants({
             color: 'ghost',
-            className: 'gap-1.5 py-1.5 pl-2 pr-0.5',
+            className: 'gap-1.5 py-1.5 px-1',
           }),
           props.className,
         )}
@@ -563,6 +704,12 @@ function CompactLanguageToggle({
   );
 }
 
+function isGithubItem(item: LinkItemType, githubUrl?: string): boolean {
+  return Boolean(
+    githubUrl && item.type === 'icon' && item.url === githubUrl,
+  );
+}
+
 function isSecondary(item: LinkItemType): boolean {
   if ('secondary' in item && item.secondary != null) return item.secondary;
 

package/src/fuma/base/custom-home-layout.tsx

@@ -3,7 +3,13 @@ import { HomeLayout, type HomeLayoutProps } from 'fumadocs-ui/layouts/home';
 import { FumaBannerSuit } from '@third-ui/fuma/fuma-banner-suit';
 import { Footer } from '@third-ui/main/footer';
 import { GoToTop } from '@third-ui/main/go-to-top';
-import { NavbarCSSVars, CustomHomeHeader } from './custom-header';
+import {
+  NavbarCSSVars,
+  CustomHomeHeader,
+  type DesktopAction,
+  type MobileBarAction,
+  type MobileMenuAction,
+} from './custom-header';
 
 // - bannerHeight/headerHeight 换成你项目期望的 rem 值即可（如果没有 Banner 就把 bannerHeight 设成 0）。
 // - layoutStyle 同时把变量传给 HomeLayout 的 main 元素，这样内容整体会往下错开，不需要 has-banner/no-banner class。
@@ -73,9 +79,19 @@ export interface CustomHomeLayoutProps {
    * Additional styles merged on top of the computed layout style.
    */
   style?: CSSProperties;
+  /**
+   * Customize the order of header action items.
+   */
+  actionOrders?: HeaderActionOrders;
   children?: ReactNode;
 }
 
+export interface HeaderActionOrders {
+  desktop?: DesktopAction[];
+  mobileBar?: MobileBarAction[];
+  mobileMenu?: MobileMenuAction[];
+}
+
 export function CustomHomeLayout({
   locale,
   options,
@@ -92,6 +108,7 @@ export function CustomHomeLayout({
   showGoToTop = true,
   style,
   floatingNav = false,
+  actionOrders,
 }: CustomHomeLayoutProps) {
   const resolvedBannerHeight = bannerHeight ?? (showBanner ? 3 : 0.5);
   const resolvedPaddingTop =
@@ -116,6 +133,9 @@ export function CustomHomeLayout({
       headerHeight={headerHeight}
       navbarClassName={navbarClassName}
       floating={floatingNav}
+      desktopActionsOrder={actionOrders?.desktop}
+      mobileBarActionsOrder={actionOrders?.mobileBar}
+      mobileMenuActionsOrder={actionOrders?.mobileMenu}
     />
   );
 

package/src/main/credit/credit-nav-button.tsx

@@ -181,7 +181,7 @@ export function CreditNavButton({
             type="button"
             aria-label={`${formattedBalance} ${totalLabel}`}
             className={cn(
-              'group ml-1 mr-0 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100',
+              'group mx-2  sm:mx-1 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100',
               'hover:border-transparent hover:bg-linear-to-r hover:from-purple-500/90 hover:to-pink-500/90 hover:text-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:hover:from-purple-500 dark:hover:to-pink-500',
             )}
             ref={triggerRef}