@windrun-huaiin/third-ui 23.1.0 → 24.0.0

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

@@ -1,5 +1,6 @@
 import { ReactNode, ReactElement } from 'react';
 import type { LLMCopyButtonProps, LLMCopyButton } from '@third-ui/fuma/mdx/toc-base';
+export type FumaPageTocRenderMode = 'portable-clerk' | 'fumadocs-clerk' | 'fumadocs-normal';
 interface FumaPageParams {
     sourceKey: string;
     mdxContentSource: any | (() => Promise<any>);
@@ -14,11 +15,12 @@ interface FumaPageParams {
     supportedLocales?: string[];
     showBreadcrumb?: boolean;
     showTableOfContent?: boolean;
+    tocRenderMode?: FumaPageTocRenderMode;
     showTableOfContentPopover?: boolean;
     localePrefixAsNeeded?: boolean;
     defaultLocale?: string;
 }
-export declare function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales, showBreadcrumb, showTableOfContent, showTableOfContentPopover, localePrefixAsNeeded, defaultLocale, }: FumaPageParams): {
+export declare function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales, showBreadcrumb, showTableOfContent, tocRenderMode, showTableOfContentPopover, localePrefixAsNeeded, defaultLocale, }: FumaPageParams): {
     Page: ({ params }: {
         params: Promise<{
             locale: string;

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

@@ -7,8 +7,9 @@ var React = require('react');
 var tocFooterWrapper = require('./mdx/toc-footer-wrapper.js');
 var lib = require('@windrun-huaiin/lib');
 var tocClerkPortable = require('./mdx/toc-clerk-portable.js');
+var lib$1 = require('@windrun-huaiin/base-ui/lib');
 
-function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
+function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, tocRenderMode = 'portable-clerk', showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
     const getSource = () => tslib.__awaiter(this, void 0, void 0, function* () {
         if (typeof mdxContentSource === 'function') {
             return yield mdxContentSource();
@@ -35,12 +36,14 @@ function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSour
                     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: {
+            return (jsxRuntime.jsxs(page.DocsPage, { breadcrumb: { enabled: showBreadcrumb }, tableOfContent: resolveTableOfContentOptions({
                     enabled: showTableOfContent,
-                    single: false,
-                    component: (jsxRuntime.jsx(tocClerkPortable.PortableClerkTOC, { toc: content.toc, footer: tocFooterElement })),
-                }, tableOfContentPopover: {
-                    enabled: false,
+                    tocRenderMode,
+                    toc: content.toc,
+                    footer: tocFooterElement,
+                }), tableOfContentPopover: {
+                    enabled: showTableOfContentPopover && tocRenderMode !== 'portable-clerk',
+                    style: tocRenderMode === 'fumadocs-clerk' ? 'clerk' : 'normal',
                 }, 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 })] }));
         });
     };
@@ -87,5 +90,29 @@ function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSour
         generateMetadata,
     };
 }
+function resolveTableOfContentOptions({ enabled, tocRenderMode, toc, footer, }) {
+    if (tocRenderMode === 'portable-clerk') {
+        return {
+            enabled,
+            single: false,
+            component: (jsxRuntime.jsx(tocClerkPortable.PortableClerkTOC, { toc: toc, footer: footer })),
+        };
+    }
+    const themedTocProps = {
+        container: {
+            className: '[--color-fd-primary:var(--third-ui-toc-primary)] [--color-fd-primary-foreground:var(--third-ui-toc-primary-foreground)] [&_#toc-title]:hidden',
+            style: {
+                '--third-ui-toc-primary': lib$1.themeSvgIconColor,
+                '--third-ui-toc-primary-foreground': '#ffffff',
+            },
+        },
+        header: jsxRuntime.jsx(tocClerkPortable.PortableClerkTOCTitle, {}),
+        footer,
+    };
+    if (tocRenderMode === 'fumadocs-clerk') {
+        return Object.assign({ enabled, single: false, style: 'clerk' }, themedTocProps);
+    }
+    return Object.assign({ enabled, single: false, style: 'normal' }, themedTocProps);
+}
 
 exports.createFumaPage = createFumaPage;

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

@@ -4,9 +4,10 @@ import { DocsPage, DocsTitle, DocsDescription, DocsBody } from 'fumadocs-ui/page
 import { cloneElement } from 'react';
 import { TocFooterWrapper } from './mdx/toc-footer-wrapper.mjs';
 import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib';
-import { PortableClerkTOC } from './mdx/toc-clerk-portable.mjs';
+import { PortableClerkTOC, PortableClerkTOCTitle } from './mdx/toc-clerk-portable.mjs';
+import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
 
-function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
+function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, tocRenderMode = 'portable-clerk', showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
     const getSource = () => __awaiter(this, void 0, void 0, function* () {
         if (typeof mdxContentSource === 'function') {
             return yield mdxContentSource();
@@ -33,12 +34,14 @@ function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSour
                     body: yield page.data.body({ components: getMDXComponents() }),
                     toc: (_e = page.data.toc) !== null && _e !== void 0 ? _e : [],
                 };
-            return (jsxs(DocsPage, { breadcrumb: { enabled: showBreadcrumb }, tableOfContent: {
+            return (jsxs(DocsPage, { breadcrumb: { enabled: showBreadcrumb }, tableOfContent: resolveTableOfContentOptions({
                     enabled: showTableOfContent,
-                    single: false,
-                    component: (jsx(PortableClerkTOC, { toc: content.toc, footer: tocFooterElement })),
-                }, tableOfContentPopover: {
-                    enabled: false,
+                    tocRenderMode,
+                    toc: content.toc,
+                    footer: tocFooterElement,
+                }), tableOfContentPopover: {
+                    enabled: showTableOfContentPopover && tocRenderMode !== 'portable-clerk',
+                    style: tocRenderMode === 'fumadocs-clerk' ? 'clerk' : 'normal',
                 }, 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 })] }));
         });
     };
@@ -85,5 +88,29 @@ function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSour
         generateMetadata,
     };
 }
+function resolveTableOfContentOptions({ enabled, tocRenderMode, toc, footer, }) {
+    if (tocRenderMode === 'portable-clerk') {
+        return {
+            enabled,
+            single: false,
+            component: (jsx(PortableClerkTOC, { toc: toc, footer: footer })),
+        };
+    }
+    const themedTocProps = {
+        container: {
+            className: '[--color-fd-primary:var(--third-ui-toc-primary)] [--color-fd-primary-foreground:var(--third-ui-toc-primary-foreground)] [&_#toc-title]:hidden',
+            style: {
+                '--third-ui-toc-primary': themeSvgIconColor,
+                '--third-ui-toc-primary-foreground': '#ffffff',
+            },
+        },
+        header: jsx(PortableClerkTOCTitle, {}),
+        footer,
+    };
+    if (tocRenderMode === 'fumadocs-clerk') {
+        return Object.assign({ enabled, single: false, style: 'clerk' }, themedTocProps);
+    }
+    return Object.assign({ enabled, single: false, style: 'normal' }, themedTocProps);
+}
 
 export { createFumaPage };

package/dist/fuma/mdx/index.js

@@ -28,5 +28,6 @@ exports.PortableClerkTOC = tocClerkPortable.PortableClerkTOC;
 exports.PortableClerkTOCItems = tocClerkPortable.PortableClerkTOCItems;
 exports.PortableClerkTOCPopover = tocClerkPortable.PortableClerkTOCPopover;
 exports.PortableClerkTOCScrollArea = tocClerkPortable.PortableClerkTOCScrollArea;
+exports.PortableClerkTOCTitle = tocClerkPortable.PortableClerkTOCTitle;
 exports.Banner = banner.Banner;
 exports.SunoEmbed = sunoEmbed.SunoEmbed;

package/dist/fuma/mdx/index.mjs

@@ -6,6 +6,6 @@ export { EditOnGitHub, LLMCopyButton, LastUpdatedDate } from './toc-base.mjs';
 export { FumaGithubInfo } from './fuma-github-info.mjs';
 export { ZiaFile, ZiaFolder } from './zia-file.mjs';
 export { TocFooterWrapper } from './toc-footer-wrapper.mjs';
-export { PortableClerkTOC, PortableClerkTOCItems, PortableClerkTOCPopover, PortableClerkTOCScrollArea } from './toc-clerk-portable.mjs';
+export { PortableClerkTOC, PortableClerkTOCItems, PortableClerkTOCPopover, PortableClerkTOCScrollArea, PortableClerkTOCTitle } from './toc-clerk-portable.mjs';
 export { Banner } from './banner.mjs';
 export { SunoEmbed } from './suno-embed.mjs';

package/dist/fuma/mdx/toc-clerk-portable.d.ts

@@ -15,6 +15,7 @@ type PortableClerkTOCProps = {
 };
 export declare function PortableClerkTOC({ toc, header, footer, title, emptyLabel, className, }: PortableClerkTOCProps): import("react/jsx-runtime").JSX.Element;
 export declare function PortableClerkTOCPopover({ toc, header, footer, emptyLabel, }: Omit<PortableClerkTOCProps, 'title' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function PortableClerkTOCTitle({ className, ...props }: ComponentProps<'h3'>): import("react/jsx-runtime").JSX.Element;
 export declare function PortableClerkTOCScrollArea({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function PortableClerkTOCItems({ toc, emptyLabel, ref, className, ...props }: ComponentProps<'div'> & {
     toc: TOCItemType[];

package/dist/fuma/mdx/toc-clerk-portable.js

@@ -4,9 +4,11 @@
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var Primitive = require('fumadocs-core/toc');
-var toc = require('fumadocs-ui/layouts/docs/page/slots/toc');
+var i18n = require('fumadocs-ui/contexts/i18n');
+var collapsible = require('fumadocs-ui/components/ui/collapsible');
 var React = require('react');
 var lib = require('@windrun-huaiin/base-ui/lib');
+var icons = require('@windrun-huaiin/base-ui/icons');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -49,15 +51,15 @@ const CLERK_STEP_BADGE_RADIUS = 7;
 const CLERK_DEPTH_GROUP_LINE_OFFSETS = [6, 18, 30, 42];
 // Max number of characters rendered for a TOC label before trimming with ellipsis.
 const CLERK_MAX_LABEL_LENGTH = 44;
-function PortableClerkTOC({ toc: toc$1, header, footer, title, emptyLabel = 'No headings', className, }) {
-    return (jsxRuntime.jsx(toc.TOC, { style: "clerk", container: { className }, header: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header, title !== null && title !== void 0 ? title : null] }), footer: footer, list: {
-            children: jsxRuntime.jsx(PortableClerkTOCItems, { toc: toc$1, emptyLabel: emptyLabel }),
-        } }));
+function PortableClerkTOC({ toc, header, footer, title, emptyLabel = 'No headings', className, }) {
+    return (jsxRuntime.jsxs("div", { id: "nd-toc", className: cn('sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden', className), children: [header, title !== null && title !== void 0 ? title : jsxRuntime.jsx(PortableClerkTOCTitle, {}), jsxRuntime.jsx(PortableClerkTOCScrollArea, { children: jsxRuntime.jsx(PortableClerkTOCItems, { toc: toc, emptyLabel: emptyLabel }) }), footer] }));
 }
-function PortableClerkTOCPopover({ toc: toc$1, header, footer, emptyLabel = 'No headings', }) {
-    return (jsxRuntime.jsx(toc.TOCPopover, { style: "clerk", header: header, footer: footer, list: {
-            children: jsxRuntime.jsx(PortableClerkTOCItems, { toc: toc$1, emptyLabel: emptyLabel }),
-        } }));
+function PortableClerkTOCPopover({ toc, header, footer, emptyLabel = 'No headings', }) {
+    return (jsxRuntime.jsx(collapsible.Collapsible, { "data-toc-popover": "", className: "sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", children: jsxRuntime.jsxs("header", { className: "border-b bg-fd-background/80 backdrop-blur-sm transition-colors", children: [jsxRuntime.jsxs(collapsible.CollapsibleTrigger, { "data-toc-popover-trigger": "", className: "flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", children: [jsxRuntime.jsx(icons.NotepadTextIcon, { className: "shrink-0" }), jsxRuntime.jsx("span", { className: "flex-1 truncate", children: jsxRuntime.jsx(i18n.I18nLabel, { label: "toc" }) }), jsxRuntime.jsx(icons.ChevronDownIcon, { className: "shrink-0 transition-transform mx-0.5" })] }), jsxRuntime.jsx(collapsible.CollapsibleContent, { "data-toc-popover-content": "", children: jsxRuntime.jsxs("div", { className: "flex max-h-[50vh] flex-col px-4 md:px-6", children: [header, jsxRuntime.jsx(PortableClerkTOCScrollArea, { children: jsxRuntime.jsx(PortableClerkTOCItems, { toc: toc, emptyLabel: emptyLabel }) }), footer] }) })] }) }));
+}
+function PortableClerkTOCTitle(_a) {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsxs("h3", Object.assign({ id: "toc-title", className: cn('inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground', className) }, props, { children: [jsxRuntime.jsx(icons.NotepadTextIcon, { className: cn('size-4', lib.themeIconColor) }), jsxRuntime.jsx(i18n.I18nLabel, { label: "toc" })] })));
 }
 function PortableClerkTOCScrollArea(_a) {
     var { ref, className } = _a, props = tslib.__rest(_a, ["ref", "className"]);
@@ -390,3 +392,4 @@ exports.PortableClerkTOC = PortableClerkTOC;
 exports.PortableClerkTOCItems = PortableClerkTOCItems;
 exports.PortableClerkTOCPopover = PortableClerkTOCPopover;
 exports.PortableClerkTOCScrollArea = PortableClerkTOCScrollArea;
+exports.PortableClerkTOCTitle = PortableClerkTOCTitle;

package/dist/fuma/mdx/toc-clerk-portable.mjs

@@ -1,10 +1,12 @@
 "use client";
 import { __rest } from 'tslib';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as Primitive from 'fumadocs-core/toc';
-import { TOC, TOCPopover } from 'fumadocs-ui/layouts/docs/page/slots/toc';
+import { I18nLabel } from 'fumadocs-ui/contexts/i18n';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
 import { useRef, useState, useMemo, useLayoutEffect, useEffect } from 'react';
 import { themeSvgIconColor, themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { NotepadTextIcon, ChevronDownIcon } from '@windrun-huaiin/base-ui/icons';
 
 // Base stroke width for both the inactive rail and the active highlight path.
 const CLERK_PATH_STROKE_WIDTH = 1;
@@ -29,14 +31,14 @@ const CLERK_DEPTH_GROUP_LINE_OFFSETS = [6, 18, 30, 42];
 // Max number of characters rendered for a TOC label before trimming with ellipsis.
 const CLERK_MAX_LABEL_LENGTH = 44;
 function PortableClerkTOC({ toc, header, footer, title, emptyLabel = 'No headings', className, }) {
-    return (jsx(TOC, { style: "clerk", container: { className }, header: jsxs(Fragment, { children: [header, title !== null && title !== void 0 ? title : null] }), footer: footer, list: {
-            children: jsx(PortableClerkTOCItems, { toc: toc, emptyLabel: emptyLabel }),
-        } }));
+    return (jsxs("div", { id: "nd-toc", className: cn('sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden', className), children: [header, title !== null && title !== void 0 ? title : jsx(PortableClerkTOCTitle, {}), jsx(PortableClerkTOCScrollArea, { children: jsx(PortableClerkTOCItems, { toc: toc, emptyLabel: emptyLabel }) }), footer] }));
 }
 function PortableClerkTOCPopover({ toc, header, footer, emptyLabel = 'No headings', }) {
-    return (jsx(TOCPopover, { style: "clerk", header: header, footer: footer, list: {
-            children: jsx(PortableClerkTOCItems, { toc: toc, emptyLabel: emptyLabel }),
-        } }));
+    return (jsx(Collapsible, { "data-toc-popover": "", className: "sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]", children: jsxs("header", { className: "border-b bg-fd-background/80 backdrop-blur-sm transition-colors", children: [jsxs(CollapsibleTrigger, { "data-toc-popover-trigger": "", className: "flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6", children: [jsx(NotepadTextIcon, { className: "shrink-0" }), jsx("span", { className: "flex-1 truncate", children: jsx(I18nLabel, { label: "toc" }) }), jsx(ChevronDownIcon, { className: "shrink-0 transition-transform mx-0.5" })] }), jsx(CollapsibleContent, { "data-toc-popover-content": "", children: jsxs("div", { className: "flex max-h-[50vh] flex-col px-4 md:px-6", children: [header, jsx(PortableClerkTOCScrollArea, { children: jsx(PortableClerkTOCItems, { toc: toc, emptyLabel: emptyLabel }) }), footer] }) })] }) }));
+}
+function PortableClerkTOCTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxs("h3", Object.assign({ id: "toc-title", className: cn('inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground', className) }, props, { children: [jsx(NotepadTextIcon, { className: cn('size-4', themeIconColor) }), jsx(I18nLabel, { label: "toc" })] })));
 }
 function PortableClerkTOCScrollArea(_a) {
     var { ref, className } = _a, props = __rest(_a, ["ref", "className"]);
@@ -365,4 +367,4 @@ function mergeRefs(...refs) {
     };
 }
 
-export { PortableClerkTOC, PortableClerkTOCItems, PortableClerkTOCPopover, PortableClerkTOCScrollArea };
+export { PortableClerkTOC, PortableClerkTOCItems, PortableClerkTOCPopover, PortableClerkTOCScrollArea, PortableClerkTOCTitle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "23.1.0",
+  "version": "24.0.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -137,9 +137,9 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/base-ui": "^23.1.0",
-    "@windrun-huaiin/contracts": "^23.1.0",
-    "@windrun-huaiin/lib": "^23.1.0"
+    "@windrun-huaiin/contracts": "^24.0.0",
+    "@windrun-huaiin/base-ui": "^24.0.0",
+    "@windrun-huaiin/lib": "^24.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/fuma/fuma-page-genarator.tsx

@@ -1,9 +1,15 @@
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page';
-import { ReactNode, ReactElement, cloneElement } from 'react';
+import { ReactNode, ReactElement, cloneElement, type CSSProperties } from 'react';
 import { TocFooterWrapper } from '@third-ui/fuma/mdx/toc-footer-wrapper';
 import type { LLMCopyButtonProps, LLMCopyButton } from '@third-ui/fuma/mdx/toc-base';
 import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib';
-import { PortableClerkTOC } from '@third-ui/fuma/mdx/toc-clerk-portable';
+import { PortableClerkTOC, PortableClerkTOCTitle } from '@third-ui/fuma/mdx/toc-clerk-portable';
+import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
+
+export type FumaPageTocRenderMode =
+  | 'portable-clerk'
+  | 'fumadocs-clerk'
+  | 'fumadocs-normal';
 
 interface FumaPageParams {
   /* 
@@ -49,6 +55,17 @@ interface FumaPageParams {
   // default true
   showTableOfContent?: boolean;
 
+  /*
+   * Controls which TOC renderer is used.
+   *
+   * - portable-clerk: use @third-ui's custom Clerk-like TOC renderer.
+   * - fumadocs-clerk: use fumadocs-ui's built-in clerk slot renderer.
+   * - fumadocs-normal: use fumadocs-ui's built-in normal slot renderer.
+   *
+   * @defaultValue 'portable-clerk'
+   */
+  tocRenderMode?: FumaPageTocRenderMode;
+
   /*
    * @deprecated Mobile TOC popover is no longer used.
    */
@@ -77,6 +94,7 @@ export function createFumaPage({
   supportedLocales = ['en'],
   showBreadcrumb = true,
   showTableOfContent = true,
+  tocRenderMode = 'portable-clerk',
   showTableOfContentPopover = false,
   localePrefixAsNeeded = true,
   defaultLocale = 'en',
@@ -123,18 +141,15 @@ export function createFumaPage({
     return (
       <DocsPage
         breadcrumb={{enabled: showBreadcrumb}}
-        tableOfContent={{
+        tableOfContent={resolveTableOfContentOptions({
           enabled: showTableOfContent,
-          single: false,
-          component: (
-            <PortableClerkTOC
-              toc={content.toc}
-              footer={tocFooterElement}
-            />
-          ),
-        }}
+          tocRenderMode,
+          toc: content.toc,
+          footer: tocFooterElement,
+        })}
         tableOfContentPopover={{
-          enabled: false,
+          enabled: showTableOfContentPopover && tocRenderMode !== 'portable-clerk',
+          style: tocRenderMode === 'fumadocs-clerk' ? 'clerk' : 'normal',
         }}
         toc={content.toc}
         className="max-sm:pb-16"
@@ -194,3 +209,56 @@ export function createFumaPage({
     generateMetadata,
   };
 } 
+
+function resolveTableOfContentOptions({
+  enabled,
+  tocRenderMode,
+  toc,
+  footer,
+}: {
+  enabled: boolean;
+  tocRenderMode: FumaPageTocRenderMode;
+  toc: any[];
+  footer: ReactNode;
+}) {
+  if (tocRenderMode === 'portable-clerk') {
+    return {
+      enabled,
+      single: false,
+      component: (
+        <PortableClerkTOC
+          toc={toc}
+          footer={footer}
+        />
+      ),
+    };
+  }
+
+  const themedTocProps = {
+    container: {
+      className: '[--color-fd-primary:var(--third-ui-toc-primary)] [--color-fd-primary-foreground:var(--third-ui-toc-primary-foreground)] [&_#toc-title]:hidden',
+      style: {
+        '--third-ui-toc-primary': themeSvgIconColor,
+        '--third-ui-toc-primary-foreground': '#ffffff',
+      } as CSSProperties,
+    },
+    header: <PortableClerkTOCTitle />,
+    footer,
+  };
+
+  if (tocRenderMode === 'fumadocs-clerk') {
+    return {
+      enabled,
+      single: false,
+      style: 'clerk',
+      ...themedTocProps,
+    } as const;
+  }
+
+  return {
+    enabled,
+    single: false,
+    style: 'normal',
+    ...themedTocProps,
+  } as const;
+}

package/src/fuma/mdx/toc-clerk-portable.tsx

@@ -5,12 +5,12 @@
  * https://github.com/fuma-nama/fumadocs/blob/dev/packages/radix-ui/src/components/toc/clerk.tsx
  */
 import * as Primitive from 'fumadocs-core/toc';
+import { I18nLabel } from 'fumadocs-ui/contexts/i18n';
 import {
-  TOC as PageTOC,
-  TOCPopover as PageTOCPopover,
-  type TOCProps as PageTOCProps,
-  type TOCPopoverProps as PageTOCPopoverProps,
-} from 'fumadocs-ui/layouts/docs/page/slots/toc';
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from 'fumadocs-ui/components/ui/collapsible';
 import {
   type ComponentProps,
   type ReactNode,
@@ -24,6 +24,7 @@ import {
   themeIconColor,
   themeSvgIconColor,
 } from '@windrun-huaiin/base-ui/lib';
+import { ChevronDownIcon, NotepadTextIcon } from '@windrun-huaiin/base-ui/icons';
 
 type TOCItemType = Primitive.TOCItemType;
 
@@ -84,20 +85,20 @@ export function PortableClerkTOC({
   className,
 }: PortableClerkTOCProps) {
   return (
-    <PageTOC
-      style="clerk"
-      container={{ className }}
-      header={
-        <>
-          {header}
-          {title ?? null}
-        </>
-      }
-      footer={footer}
-      list={{
-        children: <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />,
-      } as PageTOCProps['list']}
-    />
+    <div
+      id="nd-toc"
+      className={cn(
+        'sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden',
+        className,
+      )}
+    >
+      {header}
+      {title ?? <PortableClerkTOCTitle />}
+      <PortableClerkTOCScrollArea>
+        <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />
+      </PortableClerkTOCScrollArea>
+      {footer}
+    </div>
   );
 }
 
@@ -108,14 +109,51 @@ export function PortableClerkTOCPopover({
   emptyLabel = 'No headings',
 }: Omit<PortableClerkTOCProps, 'title' | 'className'>) {
   return (
-    <PageTOCPopover
-      style="clerk"
-      header={header}
-      footer={footer}
-      list={{
-        children: <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />,
-      } as PageTOCPopoverProps['list']}
-    />
+    <Collapsible
+      data-toc-popover=""
+      className="sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]"
+    >
+      <header className="border-b bg-fd-background/80 backdrop-blur-sm transition-colors">
+        <CollapsibleTrigger
+          data-toc-popover-trigger=""
+          className="flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6"
+        >
+          <NotepadTextIcon className="shrink-0" />
+          <span className="flex-1 truncate">
+            <I18nLabel label="toc" />
+          </span>
+          <ChevronDownIcon className="shrink-0 transition-transform mx-0.5" />
+        </CollapsibleTrigger>
+        <CollapsibleContent data-toc-popover-content="">
+          <div className="flex max-h-[50vh] flex-col px-4 md:px-6">
+            {header}
+            <PortableClerkTOCScrollArea>
+              <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />
+            </PortableClerkTOCScrollArea>
+            {footer}
+          </div>
+        </CollapsibleContent>
+      </header>
+    </Collapsible>
+  );
+}
+
+export function PortableClerkTOCTitle({
+  className,
+  ...props
+}: ComponentProps<'h3'>) {
+  return (
+    <h3
+      id="toc-title"
+      className={cn(
+        'inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground',
+        className,
+      )}
+      {...props}
+    >
+      <NotepadTextIcon className={cn('size-4', themeIconColor)} />
+      <I18nLabel label="toc" />
+    </h3>
   );
 }