@windrun-huaiin/third-ui 14.3.1 → 14.4.0

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

@@ -6,6 +6,7 @@ var page = require('fumadocs-ui/page');
 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');
 
 function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
     const Page = function Page(_a) {
@@ -24,12 +25,10 @@ function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSour
             const MDX = page$1.data.body;
             return (jsxRuntime.jsxs(page.DocsPage, { breadcrumb: { enabled: showBreadcrumb }, tableOfContent: {
                     enabled: showTableOfContent,
-                    style: 'clerk',
                     single: false,
-                    footer: tocFooterElement,
+                    component: (jsxRuntime.jsx(tocClerkPortable.PortableClerkTOC, { toc: page$1.data.toc, footer: tocFooterElement })),
                 }, tableOfContentPopover: {
-                    enabled: showTableOfContentPopover,
-                    footer: tocFooterElement,
+                    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() }) })] }));
         });
     };

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

@@ -4,6 +4,7 @@ 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';
 
 function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
     const Page = function Page(_a) {
@@ -22,12 +23,10 @@ function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSour
             const MDX = page.data.body;
             return (jsxs(DocsPage, { breadcrumb: { enabled: showBreadcrumb }, tableOfContent: {
                     enabled: showTableOfContent,
-                    style: 'clerk',
                     single: false,
-                    footer: tocFooterElement,
+                    component: (jsx(PortableClerkTOC, { toc: page.data.toc, footer: tocFooterElement })),
                 }, tableOfContentPopover: {
-                    enabled: showTableOfContentPopover,
-                    footer: tocFooterElement,
+                    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() }) })] }));
         });
     };

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

@@ -8,5 +8,6 @@ export * from './toc-base';
 export * from './fuma-github-info';
 export * from './zia-file';
 export * from './toc-footer-wrapper';
+export * from './toc-clerk-portable';
 export * from './banner';
 export * from './suno-embed';

package/dist/fuma/mdx/index.js

@@ -11,6 +11,7 @@ var tocBase = require('./toc-base.js');
 var fumaGithubInfo = require('./fuma-github-info.js');
 var ziaFile = require('./zia-file.js');
 var tocFooterWrapper = require('./toc-footer-wrapper.js');
+var tocClerkPortable = require('./toc-clerk-portable.js');
 var banner = require('./banner.js');
 var sunoEmbed = require('./suno-embed.js');
 
@@ -29,5 +30,9 @@ exports.FumaGithubInfo = fumaGithubInfo.FumaGithubInfo;
 exports.ZiaFile = ziaFile.ZiaFile;
 exports.ZiaFolder = ziaFile.ZiaFolder;
 exports.TocFooterWrapper = tocFooterWrapper.TocFooterWrapper;
+exports.PortableClerkTOC = tocClerkPortable.PortableClerkTOC;
+exports.PortableClerkTOCItems = tocClerkPortable.PortableClerkTOCItems;
+exports.PortableClerkTOCPopover = tocClerkPortable.PortableClerkTOCPopover;
+exports.PortableClerkTOCScrollArea = tocClerkPortable.PortableClerkTOCScrollArea;
 exports.Banner = banner.Banner;
 exports.SunoEmbed = sunoEmbed.SunoEmbed;

package/dist/fuma/mdx/index.mjs

@@ -9,5 +9,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 { Banner } from './banner.mjs';
 export { SunoEmbed } from './suno-embed.mjs';

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

@@ -0,0 +1,19 @@
+import * as Primitive from 'fumadocs-core/toc';
+import { type ComponentProps, type ReactNode } from 'react';
+type TOCItemType = Primitive.TOCItemType;
+type PortableClerkTOCProps = {
+    toc: TOCItemType[];
+    header?: ReactNode;
+    footer?: ReactNode;
+    title?: ReactNode;
+    emptyLabel?: ReactNode;
+    className?: string;
+};
+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 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[];
+    emptyLabel?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,328 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../../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.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Primitive = require('fumadocs-core/toc');
+var page = require('fumadocs-ui/layouts/docs/page');
+var React = require('react');
+var lib = require('@windrun-huaiin/base-ui/lib');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var Primitive__namespace = /*#__PURE__*/_interopNamespaceDefault(Primitive);
+
+// Base stroke width for both the inactive rail and the active highlight path.
+const CLERK_PATH_STROKE_WIDTH = 1;
+// Radius of the moving endpoint dot that marks the latest active heading.
+const CLERK_ACTIVE_DOT_RADIUS = 2;
+// Max vertical space reserved for a turn inside the gap between two headings.
+const CLERK_TURN_CURVE_HEIGHT = 12;
+// Multiplier for bezier control points; higher values make the turn rounder.
+const CLERK_TURN_CONTROL_FACTOR = 0.68;
+// Safety margin that keeps turns away from the heading rows themselves.
+const CLERK_TURN_GAP_MARGIN = 7;
+function PortableClerkTOC({ toc, header, footer, title, emptyLabel = 'No headings', className, }) {
+    return (jsxRuntime.jsxs(page.PageTOC, { className: className, children: [header, title !== null && title !== void 0 ? title : jsxRuntime.jsx(page.PageTOCTitle, {}), jsxRuntime.jsx(PortableClerkTOCScrollArea, { children: jsxRuntime.jsx(PortableClerkTOCItems, { toc: toc, emptyLabel: emptyLabel }) }), footer] }));
+}
+function PortableClerkTOCPopover({ toc, header, footer, emptyLabel = 'No headings', }) {
+    return (jsxRuntime.jsxs(page.PageTOCPopover, { children: [jsxRuntime.jsx(page.PageTOCPopoverTrigger, {}), jsxRuntime.jsxs(page.PageTOCPopoverContent, { children: [header, jsxRuntime.jsx(PortableClerkTOCScrollArea, { children: jsxRuntime.jsx(PortableClerkTOCItems, { toc: toc, emptyLabel: emptyLabel }) }), footer] })] }));
+}
+function PortableClerkTOCScrollArea(_a) {
+    var { ref, className } = _a, props = tslib_es6.__rest(_a, ["ref", "className"]);
+    const viewRef = React.useRef(null);
+    return (jsxRuntime.jsx("div", Object.assign({ ref: mergeRefs(viewRef, ref), className: cn('relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3', className) }, props, { children: jsxRuntime.jsx(Primitive__namespace.ScrollProvider, { containerRef: viewRef, children: props.children }) })));
+}
+function PortableClerkTOCItems(_a) {
+    var { toc, emptyLabel = 'No headings', ref, className } = _a, props = tslib_es6.__rest(_a, ["toc", "emptyLabel", "ref", "className"]);
+    const containerRef = React.useRef(null);
+    const activeAnchors = Primitive__namespace.useActiveAnchors();
+    const itemRefs = React.useRef([]);
+    const contentRefs = React.useRef([]);
+    const [layout, setLayout] = React.useState({
+        height: 0,
+        items: [],
+    });
+    const metas = React.useMemo(() => toc.map(resolveClerkItem), [toc]);
+    const outlinePath = React.useMemo(() => buildOutlinePath(layout.items), [layout.items]);
+    const activeItems = React.useMemo(() => getActiveItems(layout.items, activeAnchors), [activeAnchors, layout.items]);
+    const activePath = React.useMemo(() => buildOutlinePath(activeItems), [activeItems]);
+    const activeEndpoint = React.useMemo(() => getActiveEndpoint(activeItems), [activeItems]);
+    React.useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        let frame = 0;
+        const updateLayout = () => {
+            frame = 0;
+            const nextItems = metas.flatMap((meta, index) => {
+                const element = itemRefs.current[index];
+                const content = contentRefs.current[index];
+                if (!element || !content)
+                    return [];
+                const y = measureItemLineY(element, content);
+                return [
+                    {
+                        url: meta.item.url,
+                        y,
+                        x: meta.lineOffset,
+                        stepNumber: meta.stepNumber,
+                    },
+                ];
+            });
+            setLayout((prev) => {
+                const next = {
+                    height: container.clientHeight,
+                    items: nextItems,
+                };
+                if (isSameLayout(prev, next))
+                    return prev;
+                return next;
+            });
+        };
+        const queueUpdate = () => {
+            if (frame !== 0)
+                cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(updateLayout);
+        };
+        queueUpdate();
+        const observer = new ResizeObserver(queueUpdate);
+        observer.observe(container);
+        for (const element of itemRefs.current) {
+            if (element)
+                observer.observe(element);
+        }
+        return () => {
+            if (frame !== 0)
+                cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    }, [metas]);
+    if (toc.length === 0) {
+        return (jsxRuntime.jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: emptyLabel }));
+    }
+    return (jsxRuntime.jsxs("div", Object.assign({ ref: mergeRefs(containerRef, ref), className: cn('relative flex flex-col', className) }, props, { children: [jsxRuntime.jsx(ClerkOutline, { path: outlinePath, items: layout.items, activePath: activePath, activeAnchors: activeAnchors, activeEndpoint: activeEndpoint }), metas.map((meta, i) => (jsxRuntime.jsx(PortableClerkTOCItem, { item: meta.item, isActive: activeAnchors.includes(meta.item.url.slice(1)), resolvedContent: meta.resolvedContent, itemPadding: meta.itemPadding, contentRef: (node) => {
+                    contentRefs.current[i] = node;
+                }, ref: (node) => {
+                    itemRefs.current[i] = node;
+                } }, meta.item.url)))] })));
+}
+function PortableClerkTOCItem({ item, isActive, resolvedContent, itemPadding, contentRef, ref, }) {
+    return (jsxRuntime.jsx(Primitive__namespace.TOCItem, { ref: ref, href: item.url, "data-clerk-item": "", style: {
+            paddingInlineStart: itemPadding,
+        }, className: cn('prose group relative py-1.5 text-sm transition-colors wrap-anywhere first:pt-0 last:pb-0 hover:text-fd-accent-foreground', isActive ? lib.themeIconColor : 'text-fd-muted-foreground'), children: jsxRuntime.jsx("span", { ref: contentRef, className: "relative z-10", children: resolvedContent }) }));
+}
+function ClerkOutline({ path, items, activePath, activeAnchors, activeEndpoint, }) {
+    if (!path)
+        return null;
+    const activeSet = new Set(activeAnchors);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-0 overflow-visible", width: "100%", height: "100%", children: jsxRuntime.jsx("path", { d: path, className: "stroke-fd-foreground/15", fill: "none", strokeWidth: CLERK_PATH_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round" }) }), jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-0 overflow-visible", width: "100%", height: "100%", children: activePath ? (jsxRuntime.jsx("path", { d: activePath, fill: "none", strokeWidth: CLERK_PATH_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", stroke: lib.themeSvgIconColor })) : null }), jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-0 overflow-visible", width: "100%", height: "100%", children: activeEndpoint ? (jsxRuntime.jsx("circle", { cx: activeEndpoint.x, cy: activeEndpoint.y, r: CLERK_ACTIVE_DOT_RADIUS, fill: lib.themeSvgIconColor })) : null }), jsxRuntime.jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-1 overflow-visible", width: "100%", height: "100%", children: items.map((item) => {
+                    if (!item.stepNumber)
+                        return null;
+                    const isActive = activeSet.has(item.url.slice(1));
+                    return (jsxRuntime.jsxs("g", { transform: `translate(${item.x}, ${item.y})`, children: [jsxRuntime.jsx("circle", { r: "7", fill: isActive ? lib.themeSvgIconColor : undefined, className: cn(!isActive && 'fill-black dark:fill-white') }), jsxRuntime.jsx("text", { y: "0.5", textAnchor: "middle", dominantBaseline: "middle", className: "fill-white text-[9px] font-medium dark:fill-black", children: item.stepNumber })] }, item.url));
+                }) })] }));
+}
+function getItemOffset(depth) {
+    if (depth <= 2)
+        return 14;
+    if (depth === 3)
+        return 26;
+    return 36;
+}
+function getLineOffset(depth) {
+    return depth >= 3 ? 18 : 6;
+}
+function getVisualLinePosition(depth) {
+    return getLineOffset(depth);
+}
+function resolveClerkItem(item) {
+    const isH3 = item.depth === 3;
+    const rawTitle = typeof item.title === 'string' ? item.title : '';
+    const { isStep, displayStep, content } = getStepInfoFromTitle(rawTitle);
+    let stepNumber = isH3 && isStep ? String(displayStep) : null;
+    let resolvedContent = item.title;
+    if (isH3 && isStep) {
+        resolvedContent = content !== null && content !== void 0 ? content : item.title;
+    }
+    if (isH3 && !stepNumber) {
+        const urlNum = getDigitsFromUrl(item.url);
+        if (urlNum != null) {
+            const clamped = Math.max(0, Math.min(19, urlNum));
+            stepNumber = String(clamped);
+            if (typeof rawTitle === 'string') {
+                const match = rawTitle.match(/^(\d+(?:\.\d+)*\.?)\s+(.+)$/);
+                if (match === null || match === void 0 ? void 0 : match[2]) {
+                    resolvedContent = match[2];
+                }
+            }
+        }
+    }
+    return {
+        item,
+        resolvedContent,
+        stepNumber,
+        itemPadding: getItemOffset(item.depth),
+        lineOffset: getVisualLinePosition(item.depth),
+    };
+}
+function buildOutlinePath(items) {
+    if (items.length === 0)
+        return '';
+    const [first] = items;
+    const last = items.at(-1);
+    if (!last)
+        return '';
+    let path = `M ${round(first.x)} ${round(first.y)}`;
+    for (let i = 1; i < items.length; i++) {
+        path += ` ${buildTurnSegment(items[i - 1], items[i])}`;
+    }
+    return path;
+}
+function buildTurnSegment(previous, current) {
+    if (Math.abs(previous.x - current.x) <= 0.5) {
+        return `L ${round(current.x)} ${round(current.y)}`;
+    }
+    const distanceY = current.y - previous.y;
+    if (distanceY <= 0) {
+        return `L ${round(current.x)} ${round(current.y)}`;
+    }
+    const gapMidY = previous.y + distanceY / 2;
+    const maxCurveHeight = Math.max(distanceY - CLERK_TURN_GAP_MARGIN * 2, 0);
+    const curveHeight = Math.min(CLERK_TURN_CURVE_HEIGHT, Math.max(maxCurveHeight, 0));
+    if (curveHeight <= 0.5) {
+        return `L ${round(current.x)} ${round(current.y)}`;
+    }
+    const turnStartY = gapMidY - curveHeight / 2;
+    const turnEndY = gapMidY + curveHeight / 2;
+    const controlDelta = curveHeight * CLERK_TURN_CONTROL_FACTOR;
+    return [
+        `L ${round(previous.x)} ${round(turnStartY)}`,
+        `C ${round(previous.x)} ${round(turnStartY + controlDelta)} ${round(current.x)} ${round(turnEndY - controlDelta)} ${round(current.x)} ${round(turnEndY)}`,
+        `L ${round(current.x)} ${round(current.y)}`,
+    ].join(' ');
+}
+function getActiveItems(items, activeAnchors) {
+    if (items.length === 0 || activeAnchors.length === 0)
+        return [];
+    return items.filter((item) => activeAnchors.includes(item.url.slice(1)));
+}
+function getActiveEndpoint(items) {
+    if (items.length === 0)
+        return null;
+    const last = items.at(-1);
+    if (!last)
+        return null;
+    return {
+        x: last.x,
+        y: last.y,
+    };
+}
+function isSameLayout(previous, next) {
+    if (Math.abs(previous.height - next.height) > 0.5)
+        return false;
+    if (previous.items.length !== next.items.length)
+        return false;
+    for (let i = 0; i < previous.items.length; i++) {
+        const prev = previous.items[i];
+        const curr = next.items[i];
+        if (!prev || !curr)
+            return false;
+        if (prev.url !== curr.url || prev.stepNumber !== curr.stepNumber) {
+            return false;
+        }
+        if (Math.abs(prev.y - curr.y) > 0.5)
+            return false;
+        if (Math.abs(prev.x - curr.x) > 0.5)
+            return false;
+    }
+    return true;
+}
+function measureItemLineY(element, content) {
+    const anchorRect = element.getBoundingClientRect();
+    const lineRects = Array.from(content.getClientRects()).filter((rect) => rect.height > 0);
+    if (lineRects.length > 0) {
+        const lastRect = lineRects.at(-1);
+        if (lastRect) {
+            return (element.offsetTop +
+                (lastRect.top - anchorRect.top) +
+                lastRect.height / 2);
+        }
+    }
+    const styles = getComputedStyle(element);
+    const top = element.offsetTop + parseFloat(styles.paddingTop);
+    const bottom = element.offsetTop +
+        element.clientHeight -
+        parseFloat(styles.paddingBottom);
+    return (top + bottom) / 2;
+}
+function round(value) {
+    return Number(value.toFixed(2));
+}
+function getDigitsFromUrl(url) {
+    const match = /^#(\d+)-/.exec(url);
+    if (!match)
+        return null;
+    const value = Number.parseInt(match[1], 10);
+    return Number.isNaN(value) ? null : value;
+}
+function getStepInfoFromTitle(title) {
+    var _a;
+    const trimmed = title.trim();
+    const match = trimmed.match(/^(\d+(?:\.\d+)*\.?)\s+(.+)$/);
+    if (!match)
+        return { isStep: false, displayStep: null, content: null };
+    const content = ((_a = match[2]) !== null && _a !== void 0 ? _a : '').trim();
+    if (content.length === 0) {
+        return { isStep: false, displayStep: null, content: null };
+    }
+    const numericPart = match[1].replace(/\.$/, '');
+    const parts = numericPart.split('.').map((part) => Number.parseInt(part, 10));
+    const lastPart = parts.at(-1);
+    if (lastPart == null || Number.isNaN(lastPart)) {
+        return { isStep: false, displayStep: null, content: null };
+    }
+    const clamped = Math.max(0, Math.min(19, lastPart));
+    return { isStep: true, displayStep: clamped, content };
+}
+function cn(...inputs) {
+    return inputs.filter(Boolean).join(' ');
+}
+function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (!ref)
+                continue;
+            if (typeof ref === 'function') {
+                ref(node);
+                continue;
+            }
+            try {
+                ref.current = node;
+            }
+            catch (_a) {
+                // ignore readonly refs
+            }
+        }
+    };
+}
+
+exports.PortableClerkTOC = PortableClerkTOC;
+exports.PortableClerkTOCItems = PortableClerkTOCItems;
+exports.PortableClerkTOCPopover = PortableClerkTOCPopover;
+exports.PortableClerkTOCScrollArea = PortableClerkTOCScrollArea;