npm - @windrun-huaiin/third-ui - Versions diffs - 10.1.0 → 10.1.1 - Mend

@windrun-huaiin/third-ui 10.1.0 → 10.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/fuma/base/custom-header.d.ts +16 -1
package/dist/fuma/base/custom-header.js +79 -17
package/dist/fuma/base/custom-header.mjs +85 -23
package/dist/fuma/base/custom-home-layout.d.ts +11 -1
package/dist/fuma/base/custom-home-layout.js +2 -2
package/dist/fuma/base/custom-home-layout.mjs +2 -2
package/package.json +3 -3
package/src/clerk/clerk-user-client.tsx +1 -1
package/src/fuma/base/custom-header.tsx +229 -82
package/src/fuma/base/custom-home-layout.tsx +21 -1
package/src/main/credit/credit-nav-button.tsx +1 -1

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

@@ -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';
+export type MobileBarAction = 'pinned' | 'search' | 'menu';
+export type MobileMenuAction = 'secondary' | '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 CHANGED Viewed

@@ -18,30 +18,92 @@ 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 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: desktopSecondaryItems.length ? (jsxRuntime.jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: desktopSecondaryItems.map((item, i) => (jsxRuntime.jsx(NavbarLinkItem, { item: item, className: cn.cn(item.type === 'icon' && [
+                    '-mx-1',
+                    i === 0 && 'ms-0',
+                    i === desktopSecondaryItems.length - 1 && 'me-0',
+                ]) }, i))) })) : null,
+    };
+    const mobileMenuActionNodes = {
+        secondary: secondaryMenuItems.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: secondaryMenuItems.map((item, i) => (jsxRuntime.jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))) })) : 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"]);

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

@@ -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,98 @@ 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 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: desktopSecondaryItems.length ? (jsx("ul", { className: "flex flex-row gap-2 items-center empty:hidden", children: desktopSecondaryItems.map((item, i) => (jsx(NavbarLinkItem, { item: item, className: cn(item.type === 'icon' && [
+                    '-mx-1',
+                    i === 0 && 'ms-0',
+                    i === desktopSecondaryItems.length - 1 && 'me-0',
+                ]) }, i))) })) : null,
+    };
+    const mobileMenuActionNodes = {
+        secondary: secondaryMenuItems.length ? (jsx(Fragment, { children: secondaryMenuItems.map((item, i) => (jsx(MenuLinkItem, { item: item, className: "-me-1.5" }, i))) })) : 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 +158,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 +174,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({

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "10.1.0",
+  "version": "10.1.1",
   "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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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}