fumadocs-ui 15.4.1 → 15.5.0

package/css/preset.css

@@ -5,6 +5,7 @@
 
 @theme {
   --spacing-fd-container: 1400px;
+  --fd-page-width: 1200px;
   --fd-sidebar-width: 0px;
   --fd-toc-width: 0px;
   --fd-layout-width: 100vw;
@@ -242,6 +243,17 @@
   [data-rmiz-modal-overlay='visible'] {
     background-color: var(--color-fd-background);
   }
+
+  :root,
+  #nd-docs-layout {
+    --fd-layout-offset: max(calc(50vw - var(--fd-layout-width) / 2), 0px);
+  }
+}
+
+@variant max-xl {
+  #nd-docs-layout:has([data-toc-popover]) {
+    --fd-tocnav-height: calc(var(--spacing) * 10);
+  }
 }
 
 @utility fd-scroll-container {

package/dist/components/accordion.d.ts

@@ -1,7 +1,9 @@
 import type { AccordionMultipleProps, AccordionSingleProps } from '@radix-ui/react-accordion';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { type ReactNode } from 'react';
 export declare const Accordions: import("react").ForwardRefExoticComponent<(Omit<AccordionSingleProps, "value" | "onValueChange"> | Omit<AccordionMultipleProps, "value" | "onValueChange">) & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Accordion: import("react").ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "value"> & {
-    title: string;
+export declare const Accordion: import("react").ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "title" | "value"> & {
+    title: string | ReactNode;
+    value?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAYhE,eAAO,MAAM,UAAU,8MA+BrB,CAAC;AAIH,eAAO,MAAM,SAAS;WAGX,MAAM;kDA0Bf,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAGL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAMf,eAAO,MAAM,UAAU,8MAuCrB,CAAC;AAIH,eAAO,MAAM,SAAS;WAMX,MAAM,GAAG,SAAS;YACjB,MAAM;kDAiCjB,CAAC"}

package/dist/components/accordion.js

@@ -2,32 +2,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { Check, ChevronRight, Link as LinkIcon } from '../icons.js';
-import { forwardRef, useEffect, useState, } from 'react';
+import { forwardRef, useEffect, useRef, useState, } from 'react';
 import { cn } from '../utils/cn.js';
 import { useCopyButton } from '../utils/use-copy-button.js';
 import { buttonVariants } from '../components/ui/button.js';
+import { mergeRefs } from '../utils/merge-refs.js';
 export const Accordions = forwardRef(({ type = 'single', className, defaultValue, ...props }, ref) => {
-    const [value, setValue] = useState(type === 'single' ? (defaultValue ?? '') : (defaultValue ?? []));
+    const rootRef = useRef(null);
+    const composedRef = mergeRefs(ref, rootRef);
+    const [value, setValue] = useState(() => type === 'single' ? (defaultValue ?? '') : (defaultValue ?? []));
     useEffect(() => {
         const id = window.location.hash.substring(1);
-        if (id.length > 0)
-            setValue((prev) => (typeof prev === 'string' ? id : [id, ...prev]));
+        const element = rootRef.current;
+        if (!element || id.length === 0)
+            return;
+        const selected = document.getElementById(id);
+        if (!selected || !element.contains(selected))
+            return;
+        const value = selected.getAttribute('data-accordion-value');
+        if (value)
+            setValue((prev) => (typeof prev === 'string' ? value : [value, ...prev]));
     }, []);
     return (
     // @ts-expect-error -- Multiple types
-    _jsx(AccordionPrimitive.Root, { type: type, ref: ref, value: value, onValueChange: setValue, collapsible: type === 'single' ? true : undefined, className: cn('divide-y divide-fd-border overflow-hidden rounded-lg border bg-fd-card', className), ...props }));
+    _jsx(AccordionPrimitive.Root, { type: type, ref: composedRef, value: value, onValueChange: setValue, collapsible: type === 'single' ? true : undefined, className: cn('divide-y divide-fd-border overflow-hidden rounded-lg border bg-fd-card', className), ...props }));
 });
 Accordions.displayName = 'Accordions';
-export const Accordion = forwardRef(({ title, className, id, children, ...props }, ref) => {
-    return (_jsxs(AccordionPrimitive.Item, { ref: ref, 
-        // Use `id` instead if presents
-        value: id ?? title, className: cn('group/accordion relative scroll-m-20', className), ...props, children: [_jsxs(AccordionPrimitive.Header, { id: id, className: "not-prose flex flex-row items-center text-fd-card-foreground font-medium has-focus-visible:bg-fd-accent", children: [_jsxs(AccordionPrimitive.Trigger, { className: "flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none", children: [_jsx(ChevronRight, { className: "size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]/accordion:rotate-90" }), title] }), id ? _jsx(CopyButton, { id: id }) : null] }), _jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down", children: _jsx("div", { className: "px-4 pb-2 text-[15px] prose-no-margin", children: children }) })] }));
+export const Accordion = forwardRef(({ title, className, id, value = String(title), children, ...props }, ref) => {
+    return (_jsxs(AccordionPrimitive.Item, { ref: ref, value: value, className: cn('scroll-m-24', className), ...props, children: [_jsxs(AccordionPrimitive.Header, { id: id, "data-accordion-value": value, className: "not-prose flex flex-row items-center text-fd-card-foreground font-medium has-focus-visible:bg-fd-accent", children: [_jsxs(AccordionPrimitive.Trigger, { className: "group flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none", children: [_jsx(ChevronRight, { className: "size-4 shrink-0 text-fd-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-90" }), title] }), id ? _jsx(CopyButton, { id: id }) : null] }), _jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=closed]:animate-fd-accordion-up data-[state=open]:animate-fd-accordion-down", children: _jsx("div", { className: "px-4 pb-2 text-[15px] prose-no-margin", children: children }) })] }));
 });
 function CopyButton({ id }) {
     const [checked, onClick] = useCopyButton(() => {
         const url = new URL(window.location.href);
         url.hash = id;
-        void navigator.clipboard.writeText(url.toString());
+        return navigator.clipboard.writeText(url.toString());
     });
     return (_jsx("button", { type: "button", "aria-label": "Copy Link", className: cn(buttonVariants({
             color: 'ghost',

package/dist/components/layout/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAEP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMrD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,OAAO,CAAC;IAC3D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2BD,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,YAAY,2CAgHd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAcrD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAkB1D;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAqBzB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAsCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrE;AAgBD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAuDA"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/layout/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EAEP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAU1D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGnE,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMrD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,OAAO,CAAC;IAC3D;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2BD,wBAAgB,OAAO,CAAC,EACtB,gBAAoB,EACpB,QAAe,EACf,WAAkB,EAClB,GAAG,KAAK,EACT,EAAE,YAAY,2CAiHd;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CASzD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,eAAe,2CAcrD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,2CAkB1D;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,SAAS,GAAG;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,2CAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgBA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAqBzB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,2CAsCjD;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,uBAAuB,2CAqBlE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAgBrE;AAgBD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAA;KAAE,CAAC,CAAC;IAClC,MAAM,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,2CAuDA"}

package/dist/components/layout/sidebar.js

@@ -47,20 +47,22 @@ export function Sidebar({ defaultOpenLevel = 0, prefetch = true, collapsible = t
         const state = open ? 'open' : 'closed';
         return (_jsxs(Context.Provider, { value: context, children: [_jsx(Presence, { present: open, children: _jsx("div", { "data-state": state, className: "fixed z-40 inset-0 bg-black/30 backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", onClick: () => setOpen(false) }) }), _jsx(Presence, { present: open, children: ({ present }) => (_jsx(RemoveScroll, { as: "aside", enabled: present, id: "nd-sidebar-mobile", ...props, "data-state": state, className: cn('fixed text-[15px] flex flex-col py-2 rounded-e-2xl border-e start-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out', !present && 'invisible', props.className), children: props.children })) })] }));
     }
-    return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('sticky shrink-0 flex flex-col items-end top-(--fd-sidebar-top) z-20 bg-fd-card text-sm h-(--fd-sidebar-height) w-(--fd-sidebar-width) *:w-(--fd-sidebar-width) border-e max-md:hidden', collapsed && [
+    return (_jsx("aside", { id: "nd-sidebar", ...props, "data-collapsed": collapsed, className: cn('fixed start-0 flex flex-col items-end top-(--fd-sidebar-top) bottom-(--fd-sidebar-margin) z-20 bg-fd-card text-sm border-e max-md:hidden *:w-(--fd-sidebar-width)', collapsed && [
             'rounded-xl border',
             hover
                 ? 'z-50 translate-x-2 shadow-lg'
                 : 'opacity-0 -translate-x-(--fd-sidebar-offset) rtl:translate-x-(--fd-sidebar-offset)',
         ], props.className), style: {
-            transition: ['top', 'opacity', 'margin', 'translate', 'width']
-                .map((v) => `${v} ease 200ms`)
+            transition: ['top', 'opacity', 'translate', 'width']
+                .map((v) => `${v} ease 250ms`)
                 .join(', '),
+            ...props.style,
             '--fd-sidebar-offset': 'calc(100% - 16px)',
             '--fd-sidebar-margin': collapsed ? '0.5rem' : '0px',
+            width: collapsed
+                ? 'var(--fd-sidebar-width)'
+                : 'calc(var(--fd-sidebar-width) + var(--fd-layout-offset))',
             '--fd-sidebar-top': `calc(var(--fd-banner-height) + var(--fd-nav-height) + var(--fd-sidebar-margin))`,
-            '--fd-sidebar-height': 'calc(100dvh - var(--fd-sidebar-top) - var(--fd-sidebar-margin))',
-            ...props.style,
         }, onPointerEnter: (e) => {
             if (!collapsible ||
                 !collapsed ||

package/dist/components/layout/toc-clerk.d.ts

@@ -1,5 +1,3 @@
-import type { TOCItemType } from 'fumadocs-core/server';
-export default function ClerkTOCItems({ items }: {
-    items: TOCItemType[];
-}): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from 'react';
+export default function ClerkTOCItems({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=toc-clerk.d.ts.map

package/dist/components/layout/toc-clerk.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toc-clerk.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc-clerk.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOxD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CA2FxE"}
+{"version":3,"file":"toc-clerk.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc-clerk.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AAOzE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAsGvB"}

package/dist/components/layout/toc-clerk.js

@@ -4,9 +4,13 @@ import * as Primitive from 'fumadocs-core/toc';
 import { useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 import { TocThumb } from '../../components/layout/toc-thumb.js';
-import { TocItemsEmpty } from '../../components/layout/toc.js';
-export default function ClerkTOCItems({ items }) {
+import { useTOCItems } from '../../components/layout/toc.js';
+import { mergeRefs } from '../../utils/merge-refs.js';
+import { useI18n } from '../../contexts/i18n.js';
+export default function ClerkTOCItems({ ref, className, ...props }) {
     const containerRef = useRef(null);
+    const items = useTOCItems();
+    const { text } = useI18n();
     const [svg, setSvg] = useState();
     useEffect(() => {
         if (!containerRef.current)
@@ -44,14 +48,14 @@ export default function ClerkTOCItems({ items }) {
         };
     }, [items]);
     if (items.length === 0)
-        return _jsx(TocItemsEmpty, {});
+        return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
     return (_jsxs(_Fragment, { children: [svg ? (_jsx("div", { className: "absolute start-0 top-0 rtl:-scale-x-100", style: {
                     width: svg.width,
                     height: svg.height,
                     maskImage: `url("data:image/svg+xml,${
                     // Inline SVG
                     encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`)}")`,
-                }, children: _jsx(TocThumb, { containerRef: containerRef, className: "mt-(--fd-top) h-(--fd-height) bg-fd-primary transition-all" }) })) : null, _jsx("div", { className: "flex flex-col", ref: containerRef, children: items.map((item, i) => (_jsx(TOCItem, { item: item, upper: items[i - 1]?.depth, lower: items[i + 1]?.depth }, item.url))) })] }));
+                }, children: _jsx(TocThumb, { containerRef: containerRef, className: "mt-(--fd-top) h-(--fd-height) bg-fd-primary transition-all" }) })) : null, _jsx("div", { ref: mergeRefs(containerRef, ref), className: cn('flex flex-col', className), ...props, children: items.map((item, i) => (_jsx(TOCItem, { item: item, upper: items[i - 1]?.depth, lower: items[i + 1]?.depth }, item.url))) })] }));
 }
 function getItemOffset(depth) {
     if (depth <= 2)

package/dist/components/layout/toc.d.ts

@@ -1,20 +1,8 @@
 import type { TOCItemType } from 'fumadocs-core/server';
-import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
-export interface TOCProps {
-    /**
-     * Custom content in TOC container, before the main TOC
-     */
-    header?: ReactNode;
-    /**
-     * Custom content in TOC container, after the main TOC
-     */
-    footer?: ReactNode;
-    children: ReactNode;
-}
-export declare function Toc(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare function TocItemsEmpty(): import("react/jsx-runtime").JSX.Element;
-export declare function TOCScrollArea(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export declare function TOCItems({ items }: {
-    items: TOCItemType[];
-}): import("react/jsx-runtime").JSX.Element;
+import * as Primitive from 'fumadocs-core/toc';
+import { type ComponentProps } from 'react';
+export declare function useTOCItems(): TOCItemType[];
+export declare function TOCProvider({ toc, children, ...props }: ComponentProps<typeof Primitive.AnchorProvider>): import("react/jsx-runtime").JSX.Element;
+export declare function TOCScrollArea({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function TOCItems({ ref, className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=toc.d.ts.map

package/dist/components/layout/toc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAyBxD;AAED,wBAAgB,aAAa,4CAQ5B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAiBzD;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,2CAqB3D"}
+{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../src/components/layout/toc.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,SAAS,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,KAAK,cAAc,EAAqC,MAAM,OAAO,CAAC;AAQ/E,wBAAgB,WAAW,IAAI,WAAW,EAAE,CAE3C;AAED,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,cAAc,CAAC,2CAQjD;AAED,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAiBvB;AAED,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAgC3E"}

package/dist/components/layout/toc.js

@@ -1,31 +1,29 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Primitive from 'fumadocs-core/toc';
-import { useRef, } from 'react';
+import { createContext, useContext, useRef } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useI18n } from '../../contexts/i18n.js';
 import { TocThumb } from '../../components/layout/toc-thumb.js';
-import { usePageStyles } from '../../contexts/layout.js';
-export function Toc(props) {
-    const { toc } = usePageStyles();
-    return (_jsx("div", { id: "nd-toc", ...props, className: cn('sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] h-(--fd-toc-height) pb-2 pt-12', toc, props.className), style: {
-            ...props.style,
-            '--fd-toc-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
-        }, children: _jsx("div", { className: "flex h-full w-(--fd-toc-width) max-w-full flex-col pe-4", children: props.children }) }));
+import { mergeRefs } from '../../utils/merge-refs.js';
+const TOCContext = createContext([]);
+export function useTOCItems() {
+    return useContext(TOCContext);
 }
-export function TocItemsEmpty() {
-    const { text } = useI18n();
-    return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
+export function TOCProvider({ toc, children, ...props }) {
+    return (_jsx(TOCContext, { value: toc, children: _jsx(Primitive.AnchorProvider, { toc: toc, ...props, children: children }) }));
 }
-export function TOCScrollArea(props) {
+export function TOCScrollArea({ ref, className, ...props }) {
     const viewRef = useRef(null);
-    return (_jsx("div", { ...props, ref: viewRef, className: cn('relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3', props.className), children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }));
+    return (_jsx("div", { ref: mergeRefs(viewRef, ref), className: cn('relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3', className), ...props, children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }));
 }
-export function TOCItems({ items }) {
+export function TOCItems({ ref, className, ...props }) {
     const containerRef = useRef(null);
+    const items = useTOCItems();
+    const { text } = useI18n();
     if (items.length === 0)
-        return _jsx(TocItemsEmpty, {});
-    return (_jsxs(_Fragment, { children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute top-(--fd-top) h-(--fd-height) w-px bg-fd-primary transition-all" }), _jsx("div", { ref: containerRef, className: "flex flex-col border-s border-fd-foreground/10", children: items.map((item) => (_jsx(TOCItem, { item: item }, item.url))) })] }));
+        return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
+    return (_jsxs(_Fragment, { children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute top-(--fd-top) h-(--fd-height) w-px bg-fd-primary transition-all" }), _jsx("div", { ref: mergeRefs(ref, containerRef), className: cn('flex flex-col border-s border-fd-foreground/10', className), ...props, children: items.map((item) => (_jsx(TOCItem, { item: item }, item.url))) })] }));
 }
 function TOCItem({ item }) {
     return (_jsx(Primitive.TOCItem, { href: item.url, className: cn('prose py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary', item.depth <= 2 && 'ps-3', item.depth === 3 && 'ps-6', item.depth >= 4 && 'ps-8'), children: item.title }));

package/dist/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: ({
     color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
-    size?: "sm" | "icon" | "icon-sm" | null | undefined;
+    size?: "sm" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonProps = VariantProps<typeof buttonVariants>;
 //# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,cAAc;;;8EAoB1B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/ui/button.js

@@ -1,5 +1,5 @@
 import { cva } from 'class-variance-authority';
-export const buttonVariants = cva('inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50', {
+export const buttonVariants = cva('inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none', {
     variants: {
         color: {
             primary: 'bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80',
@@ -11,6 +11,7 @@ export const buttonVariants = cva('inline-flex items-center justify-center round
             sm: 'gap-1 px-2 py-1.5 text-xs',
             icon: 'p-1.5 [&_svg]:size-5',
             'icon-sm': 'p-1.5 [&_svg]:size-4.5',
+            'icon-xs': 'p-1 [&_svg]:size-4',
         },
     },
 });

package/dist/layouts/docs/page-client.d.ts

@@ -0,0 +1,30 @@
+import { type ComponentProps } from 'react';
+import type { PageTree } from 'fumadocs-core/server';
+import { type BreadcrumbOptions } from 'fumadocs-core/breadcrumb';
+import { type AnchorProviderProps } from 'fumadocs-core/toc';
+export declare function PageTOCPopoverTrigger(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopoverContent(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopover(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export interface RootProps extends ComponentProps<'div'> {
+    toc: Omit<AnchorProviderProps, 'children'>;
+}
+export declare function PageRoot({ toc, children, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageLastUpdate({ date: value, ...props }: Omit<ComponentProps<'p'>, 'children'> & {
+    date: Date | string;
+}): import("react/jsx-runtime").JSX.Element;
+type Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;
+export interface FooterProps extends ComponentProps<'div'> {
+    /**
+     * Items including information for the next and previous page
+     */
+    items?: {
+        previous?: Item;
+        next?: Item;
+    };
+}
+export declare function PageFooter({ items, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
+export declare function PageBreadcrumb({ includeRoot, includeSeparator, includePage, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PageTOC(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=page-client.d.ts.map

package/dist/layouts/docs/page-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-client.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/page-client.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EACL,KAAK,iBAAiB,EAEvB,MAAM,0BAA0B,CAAC;AAWlC,OAAO,EAAE,KAAK,mBAAmB,EAAmB,MAAM,mBAAmB,CAAC;AAO9E,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAiDpE;AA4DD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAUjE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAuD1D;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;CAC5C;AAED,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAqB9D;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EAAE,KAAK,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAAA;CAAE,2CAiBjE;AAED,KAAK,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,KAAK,CAAC,CAAC;AAChE,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxD;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,IAAI,CAAC;QAChB,IAAI,CAAC,EAAE,IAAI,CAAC;KACb,CAAC;CACH;AAyBD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAiC1D;AA8BD,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAExE,wBAAgB,cAAc,CAAC,EAC7B,WAAmB,EACnB,gBAAgB,EAChB,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,eAAe,kDA6CjB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAiBnD"}

package/dist/{page-client.js → layouts/docs/page-client.js}

@@ -1,27 +1,30 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useMemo, useRef, useState, } from 'react';
-import { ChevronDown, ChevronLeft, ChevronRight } from './icons.js';
+import { ChevronDown, ChevronLeft, ChevronRight } from '../../icons.js';
 import Link from 'fumadocs-core/link';
-import { cn } from './utils/cn.js';
-import { useI18n } from './contexts/i18n.js';
-import { useTreeContext, useTreePath } from './contexts/tree.js';
+import { cn } from '../../utils/cn.js';
+import { useI18n } from '../../contexts/i18n.js';
+import { useTreeContext, useTreePath } from '../../contexts/tree.js';
 import { createContext, usePathname } from 'fumadocs-core/framework';
 import { getBreadcrumbItemsFromPath, } from 'fumadocs-core/breadcrumb';
-import { useNav, usePageStyles } from './contexts/layout.js';
-import { isActive } from './utils/is-active.js';
+import { useNav } from '../../contexts/layout.js';
+import { isActive } from '../../utils/is-active.js';
 import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from './components/ui/collapsible.js';
-import * as Primitive from 'fumadocs-core/toc';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible.js';
+import { useSidebar } from '../../contexts/sidebar.js';
+import { TOCProvider, useTOCItems } from '../../components/layout/toc.js';
+import { useActiveAnchor } from 'fumadocs-core/toc';
 const TocPopoverContext = createContext('TocPopoverContext');
-export function TocPopoverTrigger({ items, ...props }) {
+export function PageTOCPopoverTrigger(props) {
     const { text } = useI18n();
     const { open } = TocPopoverContext.use();
-    const active = Primitive.useActiveAnchor();
+    const items = useTOCItems();
+    const active = useActiveAnchor();
     const selected = useMemo(() => items.findIndex((item) => active === item.url.slice(1)), [items, active]);
     const path = useTreePath().at(-1);
     const showItem = selected !== -1 && !open;
-    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex flex-row items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / items.length, max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('transition-transform mx-0.5', open && 'rotate-180') })] }));
+    return (_jsxs(CollapsibleTrigger, { ...props, className: cn('flex w-full h-(--fd-tocnav-height) items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:shrink-0 [&_svg]:size-4 md:px-6', props.className), children: [_jsx(ProgressCircle, { value: (selected + 1) / Math.max(1, items.length), max: 1, className: cn(open && 'text-fd-primary') }), _jsxs("span", { className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1", children: [_jsx("span", { className: cn('truncate transition-all', open && 'text-fd-foreground', showItem && 'opacity-0 -translate-y-full pointer-events-none'), children: path?.name ?? text.toc }), _jsx("span", { className: cn('truncate transition-all', !showItem && 'opacity-0 translate-y-full pointer-events-none'), children: items[selected]?.title })] }), _jsx(ChevronDown, { className: cn('transition-transform mx-0.5', open && 'rotate-180') })] }));
 }
 function clamp(input, min, max) {
     if (input < min)
@@ -44,13 +47,13 @@ function ProgressCircle({ value, strokeWidth = 2, size = 24, min = 0, max = 100,
     };
     return (_jsxs("svg", { role: "progressbar", viewBox: `0 0 ${size} ${size}`, "aria-valuenow": normalizedValue, "aria-valuemin": min, "aria-valuemax": max, ...restSvgProps, children: [_jsx("circle", { ...circleProps, className: "stroke-current/25" }), _jsx("circle", { ...circleProps, stroke: "currentColor", strokeDasharray: circumference, strokeDashoffset: circumference - progress, strokeLinecap: "round", transform: `rotate(-90 ${size / 2} ${size / 2})`, className: "transition-all" })] }));
 }
-export function TocPopoverContent(props) {
-    return (_jsx(CollapsibleContent, { "data-toc-popover": "", ...props, className: cn('flex flex-col max-h-[50vh]', props.className), children: props.children }));
+export function PageTOCPopoverContent(props) {
+    return (_jsx(CollapsibleContent, { "data-toc-popover": "", ...props, className: cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className), children: props.children }));
 }
-export function TocPopover(props) {
+export function PageTOCPopover(props) {
     const ref = useRef(null);
     const [open, setOpen] = useState(false);
-    const { tocNav } = usePageStyles();
+    const { collapsed } = useSidebar();
     const { isTransparent } = useNav();
     const onClick = useEffectEvent((e) => {
         if (!open)
@@ -64,30 +67,35 @@ export function TocPopover(props) {
             window.removeEventListener('click', onClick);
         };
     }, [onClick]);
-    return (_jsx("div", { ...props, className: cn('sticky overflow-visible z-10', tocNav, props.className), style: {
-            ...props.style,
-            top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
-        }, children: _jsx(TocPopoverContext.Provider, { value: useMemo(() => ({
-                open,
-                setOpen,
-            }), [setOpen, open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, asChild: true, children: _jsx("header", { ref: ref, id: "nd-tocnav", ...props, className: cn('border-b backdrop-blur-sm transition-colors', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg'), children: props.children }) }) }) }));
-}
-export function PageBody(props) {
-    const { page } = usePageStyles();
-    return (_jsx("div", { id: "nd-page", ...props, className: cn('flex w-full min-w-0 flex-col', page, props.className), children: props.children }));
+    return (_jsx(TocPopoverContext.Provider, { value: useMemo(() => ({
+            open,
+            setOpen,
+        }), [setOpen, open]), children: _jsx(Collapsible, { open: open, onOpenChange: setOpen, asChild: true, children: _jsx("header", { ref: ref, id: "nd-tocnav", ...props, className: cn('fixed inset-x-0 z-10 border-b backdrop-blur-sm transition-colors xl:hidden', (!isTransparent || open) && 'bg-fd-background/80', open && 'shadow-lg', props.className), style: {
+                    ...props.style,
+                    top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
+                    insetInlineStart: collapsed
+                        ? '0px'
+                        : 'calc(var(--fd-sidebar-width) + var(--fd-layout-offset))',
+                }, children: props.children }) }) }));
 }
-export function PageArticle(props) {
-    const { article } = usePageStyles();
-    return (_jsx("article", { ...props, className: cn('flex w-full flex-1 flex-col gap-6 px-4 md:px-6 pt-8 md:pt-12 xl:px-12 xl:mx-auto', article, props.className), children: props.children }));
+export function PageRoot({ toc, children, ...props }) {
+    const { collapsed } = useSidebar();
+    return (_jsx(TOCProvider, { ...toc, children: _jsx("div", { id: "nd-page", ...props, className: cn('flex flex-1 mx-auto w-full', props.className), style: {
+                paddingTop: 'calc(var(--fd-nav-height) + var(--fd-tocnav-height))',
+                maxWidth: collapsed
+                    ? 'var(--fd-page-width)'
+                    : 'min(var(--fd-page-width),calc(var(--fd-layout-width) - var(--fd-sidebar-width)))',
+                ...props.style,
+            }, children: children }) }));
 }
-export function LastUpdate(props) {
+export function PageLastUpdate({ date: value, ...props }) {
     const { text } = useI18n();
     const [date, setDate] = useState('');
     useEffect(() => {
         // to the timezone of client
-        setDate(props.date.toLocaleDateString());
-    }, [props.date]);
-    return (_jsxs("p", { className: "text-sm text-fd-muted-foreground", children: [text.lastUpdate, " ", date] }));
+        setDate(new Date(value).toLocaleDateString());
+    }, [value]);
+    return (_jsxs("p", { ...props, className: cn('text-sm text-fd-muted-foreground', props.className), children: [text.lastUpdate, " ", date] }));
 }
 function scanNavigationList(tree) {
     const list = [];
@@ -106,7 +114,7 @@ function scanNavigationList(tree) {
     return list;
 }
 const listCache = new WeakMap();
-export function Footer({ items }) {
+export function PageFooter({ items, ...props }) {
     const { root } = useTreeContext();
     const pathname = usePathname();
     const { previous, next } = useMemo(() => {
@@ -123,26 +131,34 @@ export function Footer({ items }) {
             next: list[idx + 1],
         };
     }, [items, pathname, root]);
-    return (_jsxs("div", { className: cn('@container grid gap-4 pb-6', previous && next ? 'grid-cols-2' : 'grid-cols-1'), children: [previous ? _jsx(FooterItem, { item: previous, index: 0 }) : null, next ? _jsx(FooterItem, { item: next, index: 1 }) : null] }));
+    return (_jsxs("div", { ...props, className: cn('@container grid gap-4 pb-6', previous && next ? 'grid-cols-2' : 'grid-cols-1', props.className), children: [previous ? _jsx(FooterItem, { item: previous, index: 0 }) : null, next ? _jsx(FooterItem, { item: next, index: 1 }) : null] }));
 }
 function FooterItem({ item, index }) {
     const { text } = useI18n();
     const Icon = index === 0 ? ChevronLeft : ChevronRight;
     return (_jsxs(Link, { href: item.url, className: cn('flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full', index === 1 && 'text-end'), children: [_jsxs("div", { className: cn('inline-flex items-center gap-1.5 font-medium', index === 1 && 'flex-row-reverse'), children: [_jsx(Icon, { className: "-mx-1 size-4 shrink-0 rtl:rotate-180" }), _jsx("p", { children: item.name })] }), _jsx("p", { className: "text-fd-muted-foreground truncate", children: item.description ?? (index === 0 ? text.previousPage : text.nextPage) })] }));
 }
-export function Breadcrumb(options) {
+export function PageBreadcrumb({ includeRoot = false, includeSeparator, includePage = false, ...props }) {
     const path = useTreePath();
     const { root } = useTreeContext();
     const items = useMemo(() => {
         return getBreadcrumbItemsFromPath(root, path, {
-            includePage: options.includePage ?? false,
-            ...options,
+            includePage,
+            includeSeparator,
+            includeRoot,
         });
-    }, [options, path, root]);
+    }, [includePage, includeRoot, includeSeparator, path, root]);
     if (items.length === 0)
         return null;
-    return (_jsx("div", { className: "flex flex-row items-center gap-1.5 text-[15px] text-fd-muted-foreground", children: items.map((item, i) => {
+    return (_jsx("div", { ...props, className: cn('flex items-center gap-1.5 text-[15px] text-fd-muted-foreground', props.className), children: items.map((item, i) => {
             const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');
             return (_jsxs(Fragment, { children: [i !== 0 && _jsx("span", { className: "text-fd-foreground/30", children: "/" }), item.url ? (_jsx(Link, { href: item.url, className: cn(className, 'transition-opacity hover:opacity-80'), children: item.name })) : (_jsx("span", { className: className, children: item.name }))] }, i));
         }) }));
 }
+export function PageTOC(props) {
+    return (_jsx("div", { id: "nd-toc", ...props, className: cn('sticky pb-2 pt-12 max-xl:hidden', props.className), style: {
+            ...props.style,
+            top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
+            height: 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
+        }, children: _jsx("div", { className: "flex h-full w-(--fd-toc-width) max-w-full flex-col pe-4", children: props.children }) }));
+}

package/dist/layouts/docs/page.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentProps } from 'react';
+import { type BreadcrumbProps, type FooterProps, PageBreadcrumb, PageFooter, PageLastUpdate, PageRoot, PageTOC, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger, type RootProps } from './page-client.js';
+/**
+ * Apply `prose` on div
+ */
+export declare function PageProse(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCTitle(props: ComponentProps<'h2'>): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCItems({ variant, ...props }: ComponentProps<'div'> & {
+    variant?: 'clerk' | 'normal';
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PageTOCPopoverItems({ variant, ...props }: ComponentProps<'div'> & {
+    variant?: 'clerk' | 'normal';
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PageArticle(props: ComponentProps<'article'>): import("react/jsx-runtime").JSX.Element;
+export { PageRoot, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOC, PageTOCPopover, PageTOCPopoverTrigger, PageTOCPopoverContent, type FooterProps, type BreadcrumbProps, type RootProps, };
+//# sourceMappingURL=page.d.ts.map

package/dist/layouts/docs/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,cAAc,EACd,UAAU,EACV,cAAc,EACd,QAAQ,EACR,OAAO,EACP,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AAMvB;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAMrD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,2CAavD;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAE,2CAM1D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAE,2CAM1D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,2CAY3D;AAED,OAAO,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,cAAc,EACd,OAAO,EACP,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,SAAS,GACf,CAAC"}

package/dist/layouts/docs/page.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { PageBreadcrumb, PageFooter, PageLastUpdate, PageRoot, PageTOC, PageTOCPopover, PageTOCPopoverContent, PageTOCPopoverTrigger, } from './page-client.js';
+import { TOCItems, TOCScrollArea } from '../../components/layout/toc.js';
+import { Text } from '../../icons.js';
+import { I18nLabel } from '../../contexts/i18n.js';
+import ClerkTOCItems from '../../components/layout/toc-clerk.js';
+/**
+ * Apply `prose` on div
+ */
+export function PageProse(props) {
+    return (_jsx("div", { ...props, className: cn('prose', props.className), children: props.children }));
+}
+export function PageTOCTitle(props) {
+    return (_jsxs("h3", { ...props, className: cn('inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className), children: [_jsx(Text, { className: "size-4" }), _jsx(I18nLabel, { label: "toc" })] }));
+}
+export function PageTOCItems({ variant = 'normal', ...props }) {
+    return (_jsx(TOCScrollArea, { ...props, children: variant === 'clerk' ? _jsx(ClerkTOCItems, {}) : _jsx(TOCItems, {}) }));
+}
+export function PageTOCPopoverItems({ variant = 'normal', ...props }) {
+    return (_jsx(TOCScrollArea, { ...props, children: variant === 'clerk' ? _jsx(ClerkTOCItems, {}) : _jsx(TOCItems, {}) }));
+}
+export function PageArticle(props) {
+    return (_jsx("article", { ...props, className: cn('flex min-w-0 w-full flex-col gap-6 px-4 pt-8 md:px-6 md:mx-auto xl:pt-12 xl:px-12', props.className), children: props.children }));
+}
+export { PageRoot, PageBreadcrumb, PageFooter, PageLastUpdate, PageTOC, PageTOCPopover, PageTOCPopoverTrigger, PageTOCPopoverContent, };

package/dist/layouts/docs/shared.d.ts

@@ -4,9 +4,6 @@ import type { PageTree } from 'fumadocs-core/server';
 import type { ReactNode } from 'react';
 import type { Option } from '../../components/layout/root-toggle.js';
 import { type GetSidebarTabsOptions } from '../../utils/get-sidebar-tabs.js';
-export declare const layoutVariables: {
-    '--fd-layout-offset': string;
-};
 export interface SidebarOptions extends SidebarProps {
     components?: Partial<SidebarComponents>;
     /**

package/dist/layouts/docs/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EACL,KAAK,iBAAiB,EAMtB,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,eAAO,MAAM,eAAe;;CAE3B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAEhD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAmCA;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,wBASpB"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/layouts/docs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EACL,KAAK,iBAAiB,EAMtB,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,cAAe,SAAQ,YAAY;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAExC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAEhD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,GAAG,KAAK,EACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAmCA;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,cAAc,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAE,QAAQ,CAAC,IAAI,wBASpB"}

package/dist/layouts/docs/shared.js

@@ -1,9 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, } from '../../components/layout/sidebar.js';
 import { getSidebarTabs, } from '../../utils/get-sidebar-tabs.js';
-export const layoutVariables = {
-    '--fd-layout-offset': 'max(calc(50vw - var(--fd-layout-width) / 2), 0px)',
-};
 export function SidebarLinkItem({ item, ...props }) {
     if (item.type === 'menu')
         return (_jsxs(SidebarFolder, { ...props, children: [item.url ? (_jsxs(SidebarFolderLink, { href: item.url, children: [item.icon, item.text] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] })), _jsx(SidebarFolderContent, { children: item.items.map((child, i) => (_jsx(SidebarLinkItem, { item: child }, i))) })] }));