@windrun-huaiin/third-ui 20.1.0 → 22.0.0

package/dist/fuma/base/header-theme-switch.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { SunIcon, MoonIcon, AirplayIcon } from '@windrun-huaiin/base-ui/icons';
+import { useTheme } from 'next-themes';
+import { useState, useEffect } from 'react';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+const itemVariants = cva('inline-flex size-6.5 items-center justify-center rounded-full p-1.5', {
+    variants: {
+        active: {
+            true: 'bg-fd-accent',
+            false: '',
+        },
+    },
+});
+const full = [['light', SunIcon], ['dark', MoonIcon], ['system', AirplayIcon]];
+function HeaderThemeSwitch(_a) {
+    var { className, mode = 'light-dark' } = _a, props = __rest(_a, ["className", "mode"]);
+    const { setTheme, theme, resolvedTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = cn('inline-flex items-center rounded-full border p-1 overflow-hidden *:rounded-full', className);
+    const iconClassName = 'size-3.5 text-neutral-600 dark:text-neutral-300';
+    if (mode === 'light-dark') {
+        const value = mounted ? resolvedTheme : null;
+        return (jsx("button", { type: "button", className: container, "aria-label": "Toggle Theme", onClick: () => setTheme(value === 'light' ? 'dark' : 'light'), "data-theme-toggle": "", children: full.map(([key, Icon]) => {
+                if (key === 'system')
+                    return null;
+                return (jsx(Icon, { fill: "currentColor", className: cn(itemVariants({ active: value === key }), iconClassName) }, key));
+            }) }));
+    }
+    const value = mounted ? theme : null;
+    return (jsx("div", Object.assign({ className: container, "data-theme-toggle": "" }, props, { children: full.map(([key, Icon]) => (jsx("button", { type: "button", "aria-label": key, className: cn(itemVariants({ active: value === key })), onClick: () => setTheme(key), children: jsx(Icon, { className: iconClassName, fill: "currentColor" }) }, key))) })));
+}
+
+export { HeaderThemeSwitch };

package/dist/fuma/base/index.d.ts

@@ -1,2 +1,3 @@
 export * from './custom-header';
 export * from './custom-home-layout';
+export * from './site-layout';

package/dist/fuma/base/index.js

@@ -2,9 +2,16 @@
 
 var customHeader = require('./custom-header.js');
 var customHomeLayout = require('./custom-home-layout.js');
+var siteLayout = require('./site-layout.js');
 
 
 
 exports.CustomHomeHeader = customHeader.CustomHomeHeader;
 exports.CustomHomeLayout = customHomeLayout.CustomHomeLayout;
 exports.HomeTitle = customHomeLayout.HomeTitle;
+exports.DocsRootProvider = siteLayout.DocsRootProvider;
+exports.SiteDocsLayout = siteLayout.SiteDocsLayout;
+exports.SiteHomeLayout = siteLayout.SiteHomeLayout;
+exports.createSiteBaseLayoutConfig = siteLayout.createSiteBaseLayoutConfig;
+exports.createSiteNavGroup = siteLayout.createSiteNavGroup;
+exports.createSiteNavLink = siteLayout.createSiteNavLink;

package/dist/fuma/base/index.mjs

@@ -1,2 +1,3 @@
 export { CustomHomeHeader } from './custom-header.mjs';
 export { CustomHomeLayout, HomeTitle } from './custom-home-layout.mjs';
+export { DocsRootProvider, SiteDocsLayout, SiteHomeLayout, createSiteBaseLayoutConfig, createSiteNavGroup, createSiteNavLink } from './site-layout.mjs';

package/dist/fuma/base/site-layout.d.ts

@@ -0,0 +1,116 @@
+import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
+import { RootProvider } from 'fumadocs-ui/provider/next';
+import { type DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
+import { type HomeLayoutProps } from 'fumadocs-ui/layouts/home';
+import { type HeaderActionOrders } from './custom-home-layout';
+type RootProviderI18n = NonNullable<ComponentProps<typeof RootProvider>['i18n']>;
+export interface DocsRootProviderProps {
+    i18n: RootProviderI18n;
+    children: ReactNode;
+}
+type SiteMenuConfig = HTMLAttributes<HTMLElement> & {
+    banner?: ReactNode;
+};
+interface SiteNavSharedFields {
+    secondary?: boolean;
+    mobilePinned?: boolean;
+}
+export interface SiteNavLinkItemConfig extends SiteNavSharedFields {
+    type?: 'main' | 'icon' | 'button';
+    text: ReactNode;
+    url: string;
+    external?: boolean;
+    icon?: ReactNode;
+    description?: ReactNode;
+    menu?: SiteMenuConfig;
+    on?: 'nav' | 'menu' | 'all';
+    label?: string;
+}
+export interface SiteNavMenuItemConfig extends SiteNavSharedFields {
+    type: 'menu';
+    text: ReactNode;
+    url?: string;
+    external?: boolean;
+    icon?: ReactNode;
+    description?: ReactNode;
+    items: SiteNavItemConfig[];
+    menu?: SiteMenuConfig;
+    on?: 'nav' | 'menu' | 'all';
+}
+export interface SiteNavCustomItemConfig extends SiteNavSharedFields {
+    type: 'custom';
+    children: ReactNode;
+}
+export type SiteNavItemConfig = SiteNavLinkItemConfig | SiteNavMenuItemConfig | SiteNavCustomItemConfig;
+export interface SiteBaseLayoutConfig {
+    nav?: HomeLayoutProps['nav'];
+    i18n?: HomeLayoutProps['i18n'];
+    githubUrl?: string;
+    links?: SiteNavItemConfig[];
+    searchToggle?: HomeLayoutProps['searchToggle'];
+    themeSwitch?: HomeLayoutProps['themeSwitch'];
+}
+export interface SiteHomeLayoutConfig extends SiteBaseLayoutConfig {
+    showBanner?: boolean;
+    bannerHeight?: number;
+    headerHeight?: number;
+    headerPaddingTop?: number;
+    navbarClassName?: string;
+    floatingNav?: boolean;
+    banner?: ReactNode;
+    footer?: ReactNode;
+    goToTop?: ReactNode;
+    showFooter?: boolean;
+    showGoToTop?: boolean;
+    actionOrders?: HeaderActionOrders;
+    localePrefixAsNeeded?: boolean;
+    defaultLocale?: string;
+}
+export interface SiteDocsLayoutConfig extends SiteBaseLayoutConfig {
+    tree: DocsLayoutProps['tree'];
+    sidebar?: DocsLayoutProps['sidebar'];
+}
+export interface SiteMenuLeafConfig {
+    text: ReactNode;
+    path: string;
+    description?: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    external?: boolean;
+}
+export interface SiteMenuGroupConfig {
+    text: ReactNode;
+    path?: string;
+    landing?: SiteMenuLeafConfig;
+    items: SiteMenuLeafConfig[];
+}
+export interface CreateSiteNavItemContext {
+    resolveUrl: (path: string) => string;
+}
+export interface CreateSiteNavGroupOptions {
+    featuredClassName?: string;
+    featuredBanner?: ReactNode;
+}
+export interface CreateSiteBaseLayoutOptions {
+    homeUrl: string;
+    title: ReactNode;
+    i18n?: HomeLayoutProps['i18n'];
+    githubUrl?: string;
+    transparentMode?: HomeLayoutProps['nav'] extends infer T ? T extends {
+        transparentMode?: infer U;
+    } ? U : never : never;
+}
+export declare function createSiteNavLink(item: SiteMenuLeafConfig, context: CreateSiteNavItemContext): SiteNavLinkItemConfig;
+export declare function createSiteNavGroup(item: SiteMenuGroupConfig, context: CreateSiteNavItemContext, options?: CreateSiteNavGroupOptions): SiteNavMenuItemConfig;
+export declare function createSiteBaseLayoutConfig(options: CreateSiteBaseLayoutOptions): SiteBaseLayoutConfig;
+export declare function DocsRootProvider({ i18n, children }: DocsRootProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SiteHomeLayout({ locale, config, children, }: {
+    locale: string;
+    config: SiteHomeLayoutConfig;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SiteDocsLayout({ config, children, }: {
+    config: SiteDocsLayoutConfig;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/fuma/base/site-layout.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var next = require('fumadocs-ui/provider/next');
+var docs = require('fumadocs-ui/layouts/docs');
+var customHomeLayout = require('./custom-home-layout.js');
+
+function normalizeNavItems(items) {
+    if (!items)
+        return undefined;
+    return items.map((item) => {
+        var _a;
+        if (item.type === 'menu') {
+            return Object.assign(Object.assign({}, item), { items: (_a = normalizeNavItems(item.items)) !== null && _a !== void 0 ? _a : [] });
+        }
+        return item;
+    });
+}
+function createSiteNavLink(item, context) {
+    return Object.assign(Object.assign(Object.assign(Object.assign({ type: 'main', text: item.text }, (item.description ? { description: item.description } : {})), { url: context.resolveUrl(item.path) }), (item.external ? { external: item.external } : {})), (item.icon || item.className
+        ? {
+            menu: Object.assign(Object.assign({}, (item.icon ? { banner: item.icon } : {})), (item.className ? { className: item.className } : {})),
+        }
+        : {}));
+}
+function createSiteNavGroup(item, context, options) {
+    var _a;
+    return Object.assign(Object.assign({ type: 'menu', text: item.text }, (item.path ? { url: context.resolveUrl(item.path) } : {})), { items: [
+            ...(item.landing
+                ? [
+                    Object.assign(Object.assign({}, createSiteNavLink(item.landing, context)), { menu: Object.assign(Object.assign({}, ((options === null || options === void 0 ? void 0 : options.featuredBanner) ? { banner: options.featuredBanner } : {})), { className: (_a = options === null || options === void 0 ? void 0 : options.featuredClassName) !== null && _a !== void 0 ? _a : 'md:row-span-2' }) }),
+                ]
+                : []),
+            ...item.items.map((child) => createSiteNavLink(child, context)),
+        ] });
+}
+function createSiteBaseLayoutConfig(options) {
+    var _a;
+    return Object.assign(Object.assign({ nav: {
+            url: options.homeUrl,
+            title: options.title,
+            transparentMode: (_a = options.transparentMode) !== null && _a !== void 0 ? _a : 'none',
+        } }, (options.i18n ? { i18n: options.i18n } : {})), (options.githubUrl ? { githubUrl: options.githubUrl } : {}));
+}
+function toHomeLayoutOptions(config) {
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {})), (config.themeSwitch ? { themeSwitch: config.themeSwitch } : {}));
+}
+function toDocsLayoutOptions(config) {
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {})), (config.themeSwitch ? { themeSwitch: config.themeSwitch } : {})), (config.sidebar ? { sidebar: config.sidebar } : {})), { tree: config.tree });
+}
+function DocsRootProvider({ i18n, children }) {
+    return jsxRuntime.jsx(next.RootProvider, { i18n: i18n, children: children });
+}
+function SiteHomeLayout({ locale, config, children, }) {
+    const { actionOrders, banner, bannerHeight, defaultLocale, floatingNav, footer, goToTop, headerHeight, headerPaddingTop, localePrefixAsNeeded, navbarClassName, showBanner, showFooter, showGoToTop } = config, baseConfig = tslib.__rest(config, ["actionOrders", "banner", "bannerHeight", "defaultLocale", "floatingNav", "footer", "goToTop", "headerHeight", "headerPaddingTop", "localePrefixAsNeeded", "navbarClassName", "showBanner", "showFooter", "showGoToTop"]);
+    const options = toHomeLayoutOptions(baseConfig);
+    const layoutProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ locale,
+        options }, (actionOrders ? { actionOrders } : {})), (banner ? { banner } : {})), (bannerHeight != null ? { bannerHeight } : {})), (defaultLocale ? { defaultLocale } : {})), (floatingNav != null ? { floatingNav } : {})), (footer ? { footer } : {})), (goToTop ? { goToTop } : {})), (headerHeight != null ? { headerHeight } : {})), (headerPaddingTop != null ? { headerPaddingTop } : {})), (localePrefixAsNeeded != null ? { localePrefixAsNeeded } : {})), (navbarClassName ? { navbarClassName } : {})), (showBanner != null ? { showBanner } : {})), (showFooter != null ? { showFooter } : {})), (showGoToTop != null ? { showGoToTop } : {}));
+    return jsxRuntime.jsx(customHomeLayout.CustomHomeLayout, Object.assign({}, layoutProps, { children: children }));
+}
+function SiteDocsLayout({ config, children, }) {
+    const options = toDocsLayoutOptions(config);
+    return jsxRuntime.jsx(docs.DocsLayout, Object.assign({}, options, { children: children }));
+}
+
+exports.DocsRootProvider = DocsRootProvider;
+exports.SiteDocsLayout = SiteDocsLayout;
+exports.SiteHomeLayout = SiteHomeLayout;
+exports.createSiteBaseLayoutConfig = createSiteBaseLayoutConfig;
+exports.createSiteNavGroup = createSiteNavGroup;
+exports.createSiteNavLink = createSiteNavLink;

package/dist/fuma/base/site-layout.mjs

@@ -0,0 +1,65 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { RootProvider } from 'fumadocs-ui/provider/next';
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import { CustomHomeLayout } from './custom-home-layout.mjs';
+
+function normalizeNavItems(items) {
+    if (!items)
+        return undefined;
+    return items.map((item) => {
+        var _a;
+        if (item.type === 'menu') {
+            return Object.assign(Object.assign({}, item), { items: (_a = normalizeNavItems(item.items)) !== null && _a !== void 0 ? _a : [] });
+        }
+        return item;
+    });
+}
+function createSiteNavLink(item, context) {
+    return Object.assign(Object.assign(Object.assign(Object.assign({ type: 'main', text: item.text }, (item.description ? { description: item.description } : {})), { url: context.resolveUrl(item.path) }), (item.external ? { external: item.external } : {})), (item.icon || item.className
+        ? {
+            menu: Object.assign(Object.assign({}, (item.icon ? { banner: item.icon } : {})), (item.className ? { className: item.className } : {})),
+        }
+        : {}));
+}
+function createSiteNavGroup(item, context, options) {
+    var _a;
+    return Object.assign(Object.assign({ type: 'menu', text: item.text }, (item.path ? { url: context.resolveUrl(item.path) } : {})), { items: [
+            ...(item.landing
+                ? [
+                    Object.assign(Object.assign({}, createSiteNavLink(item.landing, context)), { menu: Object.assign(Object.assign({}, ((options === null || options === void 0 ? void 0 : options.featuredBanner) ? { banner: options.featuredBanner } : {})), { className: (_a = options === null || options === void 0 ? void 0 : options.featuredClassName) !== null && _a !== void 0 ? _a : 'md:row-span-2' }) }),
+                ]
+                : []),
+            ...item.items.map((child) => createSiteNavLink(child, context)),
+        ] });
+}
+function createSiteBaseLayoutConfig(options) {
+    var _a;
+    return Object.assign(Object.assign({ nav: {
+            url: options.homeUrl,
+            title: options.title,
+            transparentMode: (_a = options.transparentMode) !== null && _a !== void 0 ? _a : 'none',
+        } }, (options.i18n ? { i18n: options.i18n } : {})), (options.githubUrl ? { githubUrl: options.githubUrl } : {}));
+}
+function toHomeLayoutOptions(config) {
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {})), (config.themeSwitch ? { themeSwitch: config.themeSwitch } : {}));
+}
+function toDocsLayoutOptions(config) {
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (config.nav ? { nav: config.nav } : {})), (config.i18n ? { i18n: config.i18n } : {})), (config.githubUrl ? { githubUrl: config.githubUrl } : {})), (config.links ? { links: normalizeNavItems(config.links) } : {})), (config.searchToggle ? { searchToggle: config.searchToggle } : {})), (config.themeSwitch ? { themeSwitch: config.themeSwitch } : {})), (config.sidebar ? { sidebar: config.sidebar } : {})), { tree: config.tree });
+}
+function DocsRootProvider({ i18n, children }) {
+    return jsx(RootProvider, { i18n: i18n, children: children });
+}
+function SiteHomeLayout({ locale, config, children, }) {
+    const { actionOrders, banner, bannerHeight, defaultLocale, floatingNav, footer, goToTop, headerHeight, headerPaddingTop, localePrefixAsNeeded, navbarClassName, showBanner, showFooter, showGoToTop } = config, baseConfig = __rest(config, ["actionOrders", "banner", "bannerHeight", "defaultLocale", "floatingNav", "footer", "goToTop", "headerHeight", "headerPaddingTop", "localePrefixAsNeeded", "navbarClassName", "showBanner", "showFooter", "showGoToTop"]);
+    const options = toHomeLayoutOptions(baseConfig);
+    const layoutProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ locale,
+        options }, (actionOrders ? { actionOrders } : {})), (banner ? { banner } : {})), (bannerHeight != null ? { bannerHeight } : {})), (defaultLocale ? { defaultLocale } : {})), (floatingNav != null ? { floatingNav } : {})), (footer ? { footer } : {})), (goToTop ? { goToTop } : {})), (headerHeight != null ? { headerHeight } : {})), (headerPaddingTop != null ? { headerPaddingTop } : {})), (localePrefixAsNeeded != null ? { localePrefixAsNeeded } : {})), (navbarClassName ? { navbarClassName } : {})), (showBanner != null ? { showBanner } : {})), (showFooter != null ? { showFooter } : {})), (showGoToTop != null ? { showGoToTop } : {}));
+    return jsx(CustomHomeLayout, Object.assign({}, layoutProps, { children: children }));
+}
+function SiteDocsLayout({ config, children, }) {
+    const options = toDocsLayoutOptions(config);
+    return jsx(DocsLayout, Object.assign({}, options, { children: children }));
+}
+
+export { DocsRootProvider, SiteDocsLayout, SiteHomeLayout, createSiteBaseLayoutConfig, createSiteNavGroup, createSiteNavLink };

package/dist/fuma/fuma-banner-suit.js

@@ -7,20 +7,23 @@ var banner = require('./mdx/banner.js');
 
 function FumaBannerSuit(_a) {
     return tslib.__awaiter(this, arguments, void 0, function* ({ locale, showBanner, floating = true, }) {
-        const t = yield server.getTranslations({ locale, namespace: 'home' });
-        const heightValue = showBanner ? 3 : 0.5;
+        const heightValue = 3;
         const height = `${heightValue}rem`;
-        const bannerText = t('banner');
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showBanner ? (jsxRuntime.jsx(banner.Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsxRuntime.jsx("p", { className: "text-sm sm:text-xl md:text-xl", children: bannerText }) })) : (jsxRuntime.jsx("div", { className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
+        if (!showBanner) {
+            return (jsxRuntime.jsx("div", { "aria-hidden": "true", className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
                     position: floating ? 'fixed' : 'relative',
                     top: floating ? 0 : undefined,
                     left: floating ? 0 : undefined,
                     width: floating ? '100vw' : '100%',
                     zIndex: floating ? 1001 : undefined,
-                    height: height,
+                    height,
                     minHeight: height,
                     maxHeight: height,
-                } })) }));
+                } }));
+        }
+        const t = yield server.getTranslations({ locale, namespace: 'home' });
+        const bannerText = t('banner');
+        return (jsxRuntime.jsx(banner.Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsxRuntime.jsx("p", { className: "text-sm sm:text-xl md:text-xl", children: bannerText }) }));
     });
 }
 

package/dist/fuma/fuma-banner-suit.mjs

@@ -1,24 +1,27 @@
 import { __awaiter } from 'tslib';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { getTranslations } from 'next-intl/server';
 import { Banner } from './mdx/banner.mjs';
 
 function FumaBannerSuit(_a) {
     return __awaiter(this, arguments, void 0, function* ({ locale, showBanner, floating = true, }) {
-        const t = yield getTranslations({ locale, namespace: 'home' });
-        const heightValue = showBanner ? 3 : 0.5;
+        const heightValue = 3;
         const height = `${heightValue}rem`;
-        const bannerText = t('banner');
-        return (jsx(Fragment, { children: showBanner ? (jsx(Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsx("p", { className: "text-sm sm:text-xl md:text-xl", children: bannerText }) })) : (jsx("div", { className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
+        if (!showBanner) {
+            return (jsx("div", { "aria-hidden": "true", className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
                     position: floating ? 'fixed' : 'relative',
                     top: floating ? 0 : undefined,
                     left: floating ? 0 : undefined,
                     width: floating ? '100vw' : '100%',
                     zIndex: floating ? 1001 : undefined,
-                    height: height,
+                    height,
                     minHeight: height,
                     maxHeight: height,
-                } })) }));
+                } }));
+        }
+        const t = yield getTranslations({ locale, namespace: 'home' });
+        const bannerText = t('banner');
+        return (jsx(Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsx("p", { className: "text-sm sm:text-xl md:text-xl", children: bannerText }) }));
     });
 }
 

package/dist/fuma/fuma-page-genarator.d.ts

@@ -2,7 +2,7 @@ import { ReactNode, ReactElement } from 'react';
 import type { LLMCopyButtonProps, LLMCopyButton } from '@third-ui/fuma/mdx/toc-base';
 interface FumaPageParams {
     sourceKey: string;
-    mdxContentSource: any;
+    mdxContentSource: any | (() => Promise<any>);
     getMDXComponents: () => any;
     mdxSourceDir: string;
     githubBaseUrl?: string;
@@ -25,7 +25,7 @@ export declare function createFumaPage({ sourceKey, mdxContentSource, getMDXComp
             slug?: string[];
         }>;
     }) => Promise<import("react/jsx-runtime").JSX.Element>;
-    generateStaticParams: () => any;
+    generateStaticParams: () => Promise<any>;
     generateMetadata: (props: {
         params: Promise<{
             slug?: string[];

package/dist/fuma/fuma-page-genarator.js

@@ -9,36 +9,49 @@ var lib = require('@windrun-huaiin/lib');
 var tocClerkPortable = require('./mdx/toc-clerk-portable.js');
 
 function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
+    const getSource = () => tslib.__awaiter(this, void 0, void 0, function* () {
+        if (typeof mdxContentSource === 'function') {
+            return yield mdxContentSource();
+        }
+        return mdxContentSource;
+    });
     const Page = function Page(_a) {
         return tslib.__awaiter(this, arguments, void 0, function* ({ params }) {
-            var _b, _c, _d;
+            var _b, _c, _d, _e;
             const { slug, locale } = yield params;
-            const page$1 = mdxContentSource.getPage(slug, locale);
+            const source = yield getSource();
+            const page$1 = source.getPage(slug, locale);
             if (!page$1) {
-                console.log('[FumaPage] missing page', { slug, locale, available: (_d = (_c = (_b = mdxContentSource.pageTree) === null || _b === void 0 ? void 0 : _b[locale]) === null || _c === void 0 ? void 0 : _c.children) === null || _d === void 0 ? void 0 : _d.map((c) => c.url) });
+                console.log('[FumaPage] missing page', { slug, locale, available: (_d = (_c = (_b = source.pageTree) === null || _b === void 0 ? void 0 : _b[locale]) === null || _c === void 0 ? void 0 : _c.children) === null || _d === void 0 ? void 0 : _d.map((c) => c.url) });
                 return jsxRuntime.jsx(FallbackPage, { siteIcon: siteIcon });
             }
             const path = githubBaseUrl ? `${mdxSourceDir}/${page$1.path}` : undefined;
             const tocFooterElement = (jsxRuntime.jsx(tocFooterWrapper.TocFooterWrapper, { lastModified: page$1.data.date, copyButtonComponent: copyButtonComponent
                     ? React.cloneElement(copyButtonComponent, { sourceKey })
                     : undefined, editPath: path, githubBaseUrl: githubBaseUrl }));
-            const MDX = page$1.data.body;
+            const content = typeof page$1.data.load === 'function'
+                ? yield page$1.data.load(getMDXComponents())
+                : {
+                    body: yield page$1.data.body({ components: getMDXComponents() }),
+                    toc: (_e = page$1.data.toc) !== null && _e !== void 0 ? _e : [],
+                };
             return (jsxRuntime.jsxs(page.DocsPage, { breadcrumb: { enabled: showBreadcrumb }, tableOfContent: {
                     enabled: showTableOfContent,
                     single: false,
-                    component: (jsxRuntime.jsx(tocClerkPortable.PortableClerkTOC, { toc: page$1.data.toc, footer: tocFooterElement })),
+                    component: (jsxRuntime.jsx(tocClerkPortable.PortableClerkTOC, { toc: content.toc, footer: tocFooterElement })),
                 }, tableOfContentPopover: {
                     enabled: false,
-                }, toc: page$1.data.toc, article: { className: 'max-sm:pb-16' }, children: [jsxRuntime.jsx(page.DocsTitle, { children: page$1.data.title }), jsxRuntime.jsx(page.DocsDescription, { className: "mb-2", children: page$1.data.description }), jsxRuntime.jsx(page.DocsBody, { className: "text-fd-foreground/80", children: jsxRuntime.jsx(MDX, { components: getMDXComponents() }) })] }));
+                }, toc: content.toc, className: "max-sm:pb-16", children: [jsxRuntime.jsx(page.DocsTitle, { children: page$1.data.title }), jsxRuntime.jsx(page.DocsDescription, { className: "mb-2", children: page$1.data.description }), jsxRuntime.jsx(page.DocsBody, { className: "text-fd-foreground/80", children: content.body })] }));
         });
     };
     function generateStaticParams() {
-        return mdxContentSource.generateParams('slug', 'locale');
+        return getSource().then((source) => source.generateParams('slug', 'locale'));
     }
     function generateMetadata(props) {
         return tslib.__awaiter(this, void 0, void 0, function* () {
             const { slug, locale } = yield props.params;
-            const page = mdxContentSource.getPage(slug, locale);
+            const source = yield getSource();
+            const page = source.getPage(slug, locale);
             if (!page) {
                 return {
                     title: '404 - Page Not Found',

package/dist/fuma/fuma-page-genarator.mjs

@@ -7,36 +7,49 @@ import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib';
 import { PortableClerkTOC } from './mdx/toc-clerk-portable.mjs';
 
 function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
+    const getSource = () => __awaiter(this, void 0, void 0, function* () {
+        if (typeof mdxContentSource === 'function') {
+            return yield mdxContentSource();
+        }
+        return mdxContentSource;
+    });
     const Page = function Page(_a) {
         return __awaiter(this, arguments, void 0, function* ({ params }) {
-            var _b, _c, _d;
+            var _b, _c, _d, _e;
             const { slug, locale } = yield params;
-            const page = mdxContentSource.getPage(slug, locale);
+            const source = yield getSource();
+            const page = source.getPage(slug, locale);
             if (!page) {
-                console.log('[FumaPage] missing page', { slug, locale, available: (_d = (_c = (_b = mdxContentSource.pageTree) === null || _b === void 0 ? void 0 : _b[locale]) === null || _c === void 0 ? void 0 : _c.children) === null || _d === void 0 ? void 0 : _d.map((c) => c.url) });
+                console.log('[FumaPage] missing page', { slug, locale, available: (_d = (_c = (_b = source.pageTree) === null || _b === void 0 ? void 0 : _b[locale]) === null || _c === void 0 ? void 0 : _c.children) === null || _d === void 0 ? void 0 : _d.map((c) => c.url) });
                 return jsx(FallbackPage, { siteIcon: siteIcon });
             }
             const path = githubBaseUrl ? `${mdxSourceDir}/${page.path}` : undefined;
             const tocFooterElement = (jsx(TocFooterWrapper, { lastModified: page.data.date, copyButtonComponent: copyButtonComponent
                     ? cloneElement(copyButtonComponent, { sourceKey })
                     : undefined, editPath: path, githubBaseUrl: githubBaseUrl }));
-            const MDX = page.data.body;
+            const content = typeof page.data.load === 'function'
+                ? yield page.data.load(getMDXComponents())
+                : {
+                    body: yield page.data.body({ components: getMDXComponents() }),
+                    toc: (_e = page.data.toc) !== null && _e !== void 0 ? _e : [],
+                };
             return (jsxs(DocsPage, { breadcrumb: { enabled: showBreadcrumb }, tableOfContent: {
                     enabled: showTableOfContent,
                     single: false,
-                    component: (jsx(PortableClerkTOC, { toc: page.data.toc, footer: tocFooterElement })),
+                    component: (jsx(PortableClerkTOC, { toc: content.toc, footer: tocFooterElement })),
                 }, tableOfContentPopover: {
                     enabled: false,
-                }, toc: page.data.toc, article: { className: 'max-sm:pb-16' }, children: [jsx(DocsTitle, { children: page.data.title }), jsx(DocsDescription, { className: "mb-2", children: page.data.description }), jsx(DocsBody, { className: "text-fd-foreground/80", children: jsx(MDX, { components: getMDXComponents() }) })] }));
+                }, toc: content.toc, className: "max-sm:pb-16", children: [jsx(DocsTitle, { children: page.data.title }), jsx(DocsDescription, { className: "mb-2", children: page.data.description }), jsx(DocsBody, { className: "text-fd-foreground/80", children: content.body })] }));
         });
     };
     function generateStaticParams() {
-        return mdxContentSource.generateParams('slug', 'locale');
+        return getSource().then((source) => source.generateParams('slug', 'locale'));
     }
     function generateMetadata(props) {
         return __awaiter(this, void 0, void 0, function* () {
             const { slug, locale } = yield props.params;
-            const page = mdxContentSource.getPage(slug, locale);
+            const source = yield getSource();
+            const page = source.getPage(slug, locale);
             if (!page) {
                 return {
                     title: '404 - Page Not Found',

package/dist/fuma/heavy/image-grid.d.ts

@@ -0,0 +1,6 @@
+export declare function ImageGrid({ type, images, altPrefix, cdnBaseUrl, }: {
+    type: "url" | "local";
+    images: string[];
+    altPrefix?: string;
+    cdnBaseUrl?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/fuma/heavy/image-grid.js

@@ -0,0 +1,17 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var imageZoom = require('./image-zoom.js');
+
+function ImageGrid({ type = "url", images, altPrefix = '', cdnBaseUrl, }) {
+    return (jsxRuntime.jsx("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            gap: '16px',
+            justifyItems: 'center',
+            alignItems: 'center',
+        }, children: images.map((img, idx) => (jsxRuntime.jsx(imageZoom.ImageZoom, { src: img.startsWith('http://') || img.startsWith('https://') ? img : (type === "url" ? `${cdnBaseUrl === null || cdnBaseUrl === void 0 ? void 0 : cdnBaseUrl.replace(/\/+$/, '')}/${img.replace(/^\/+/, '')}` : img), alt: `${altPrefix}-${idx + 1}` }, img))) }));
+}
+
+exports.ImageGrid = ImageGrid;

package/dist/fuma/heavy/image-grid.mjs

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ImageZoom } from './image-zoom.mjs';
+
+function ImageGrid({ type = "url", images, altPrefix = '', cdnBaseUrl, }) {
+    return (jsx("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            gap: '16px',
+            justifyItems: 'center',
+            alignItems: 'center',
+        }, children: images.map((img, idx) => (jsx(ImageZoom, { src: img.startsWith('http://') || img.startsWith('https://') ? img : (type === "url" ? `${cdnBaseUrl === null || cdnBaseUrl === void 0 ? void 0 : cdnBaseUrl.replace(/\/+$/, '')}/${img.replace(/^\/+/, '')}` : img), alt: `${altPrefix}-${idx + 1}` }, img))) }));
+}
+
+export { ImageGrid };

package/dist/fuma/heavy/image-zoom.d.ts

@@ -0,0 +1,22 @@
+import { type ImageProps } from 'fumadocs-core/framework';
+import { type ImgHTMLAttributes } from 'react';
+import { type UncontrolledProps } from 'react-medium-image-zoom';
+export type ImageZoomProps = ImageProps & {
+    /**
+     * Image props when zoom in
+     */
+    zoomInProps?: ImgHTMLAttributes<HTMLImageElement>;
+    /**
+     * Props for `react-medium-image-zoom`
+     */
+    rmiz?: UncontrolledProps;
+    /**
+     * placeholder image path
+     */
+    fallbackSrc?: string;
+};
+/**
+ * @example
+ * <ImageZoom src="URL" fallbackSrc="/my-placeholder.png" />
+ */
+export declare function ImageZoom({ zoomInProps, children, rmiz, fallbackSrc, ...props }: ImageZoomProps): import("react/jsx-runtime").JSX.Element;

package/dist/fuma/heavy/image-zoom.js

@@ -0,0 +1,39 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var framework = require('fumadocs-core/framework');
+var React = require('react');
+var Zoom = require('react-medium-image-zoom');
+
+function getImageSrc(src) {
+    if (typeof src === 'string')
+        return src;
+    if (typeof src === 'object') {
+        // Next.js
+        if ('default' in src)
+            return src.default.src;
+        return src.src;
+    }
+    return '';
+}
+/**
+ * @example
+ * <ImageZoom src="URL" fallbackSrc="/my-placeholder.png" />
+ */
+function ImageZoom(_a) {
+    var _b;
+    var { zoomInProps, children, rmiz, fallbackSrc = 'https://r2.d8ger.com/default.webp' } = _a, props = tslib.__rest(_a, ["zoomInProps", "children", "rmiz", "fallbackSrc"]);
+    const [imgSrc, setImgSrc] = React.useState(getImageSrc(props.src));
+    // fallback logic
+    const handleError = () => {
+        console.warn('ImageZoom check error:', imgSrc, fallbackSrc);
+        if (imgSrc !== fallbackSrc) {
+            setImgSrc(fallbackSrc);
+        }
+    };
+    return (jsxRuntime.jsx(Zoom, Object.assign({ zoomMargin: 20, wrapElement: "span" }, rmiz, { zoomImg: Object.assign(Object.assign({ src: imgSrc, sizes: undefined }, zoomInProps), { onError: handleError }), children: children !== null && children !== void 0 ? children : (jsxRuntime.jsx(framework.Image, Object.assign({}, props, { src: imgSrc, onError: handleError, sizes: "(max-width: 400px) 100vw, 300px", style: { width: '100%', height: 'auto', maxWidth: 300 }, alt: (_b = props.alt) !== null && _b !== void 0 ? _b : '', width: 300, height: 225 }))) })));
+}
+
+exports.ImageZoom = ImageZoom;