@fumadocs/base-ui 16.6.1 → 16.6.2

package/css/generated/notebook.css

@@ -398,7 +398,6 @@
 @source inline("start-0");
 @source inline("sticky");
 @source inline("still");
-@source inline("string");
 @source inline("stroke");
 @source inline("stroke-current/25");
 @source inline("strokeDasharray");

package/css/generated/shared.css

@@ -61,7 +61,6 @@
 @source inline("absolute");
 @source inline("action");
 @source inline("active");
-@source inline("activeType");
 @source inline("add");
 @source inline("addEventListener");
 @source inline("advanced");
@@ -88,6 +87,7 @@
 @source inline("aria-selected");
 @source inline("as");
 @source inline("aside");
+@source inline("assume");
 @source inline("assumes");
 @source inline("async");
 @source inline("at");
@@ -612,6 +612,7 @@
 @source inline("nextIdRef");
 @source inline("nextPage");
 @source inline("node");
+@source inline("nodes");
 @source inline("none");
 @source inline("noopener");
 @source inline("noreferrer");
@@ -983,6 +984,7 @@
 @source inline("twMerge");
 @source inline("type");
 @source inline("typeof");
+@source inline("unchanged");
 @source inline("undefined");
 @source inline("under");
 @source inline("underline");

package/dist/components/sidebar/base.d.ts

@@ -75,9 +75,11 @@ declare function SidebarViewport({
 declare function SidebarSeparator(props: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element;
 declare function SidebarItem({
   icon,
+  active,
   children,
   ...props
 }: LinkProps & {
+  active?: boolean;
   icon?: ReactNode;
 }): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolder({
@@ -97,8 +99,11 @@ declare function SidebarFolderTrigger({
 }: CollapsibleTriggerProps): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderLink({
   children,
+  active,
   ...props
-}: LinkProps): react_jsx_runtime0.JSX.Element;
+}: LinkProps & {
+  active?: boolean;
+}): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderContent(props: CollapsibleContentProps): react_jsx_runtime0.JSX.Element;
 declare function SidebarTrigger({
   children,

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

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","names":[],"sources":["../../../src/components/sidebar/base.tsx"],"mappings":";;;;;;;;;;;UA+BU,cAAA;EACR,IAAA;EACA,OAAA,EAAS,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;EAC9B,SAAA;EACA,YAAA,EAAc,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;;;;EAKnC,eAAA,EAAiB,SAAA;EACjB,gBAAA;EACA,QAAA;EACA,IAAA,EAAM,IAAA;AAAA;AAAA,UAGS,oBAAA;;;;;;;EAOf,gBAAA;;;;EAKA,QAAA;EAEA,QAAA,GAAW,SAAA;AAAA;AAAA,KAGR,IAAA;AAAA,cAEC,cAAA,EAAc,KAAA,CAAA,OAAA,CAAA,cAAA;AAAA,iBASJ,eAAA,CAAA;EACd,gBAAA;EACA,QAAA;EACA;AAAA,GACC,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAmCP,UAAA,CAAA,GAAc,cAAA;AAAA,iBAUd,SAAA,CAAA;;WAtDL,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;;;;iBA0DhB,cAAA,CAAA;AAAA,iBAIA,cAAA,CAAA;EACd;AAAA;EAEA,QAAA,GAAW,KAAA;IACT,GAAA,EAAK,SAAA,CAAU,WAAA;IACf,SAAA;IACA,OAAA;IACA,cAAA,GAAiB,KAAA,EAAO,YAAA;IACxB,cAAA,GAAiB,KAAA,EAAO,YAAA;EAAA,MACpB,SAAA;AAAA,IACP,SAAA;AAAA,iBAyCe,oBAAA,CAAqB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBjD,oBAAA,CAAA;EAAuB,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,YAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqB/E,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAuBxD,gBAAA,CAAiB,KAAA,EAAO,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgB3C,WAAA,CAAA;EACd,IAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,SAAA;EACD,IAAA,GAAO,SAAA;AAAA,IACR,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgBe,aAAA,CAAA;EACd,WAAA,EAAa,eAAA;EACb,WAAA;EACA,MAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,MAAA;EACA,WAAA;EACA,WAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAsBe,oBAAA,CAAA;EAAuB,QAAA;EAAA,GAAa;AAAA,GAAS,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBpE,iBAAA,CAAA;EAAoB,QAAA;EAAA,GAAa;AAAA,GAAS,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqCnD,oBAAA,CAAqB,KAAA,EAAO,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAInD,cAAA,CAAA;EAAiB,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/D,sBAAA,CAAuB,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;AAlUrE;iBAuVe,aAAA,CAAc,MAAA,WAAiB,GAAA,EAAK,SAAA,CAAU,WAAA"}
+{"version":3,"file":"base.d.ts","names":[],"sources":["../../../src/components/sidebar/base.tsx"],"mappings":";;;;;;;;;;;UA8BU,cAAA;EACR,IAAA;EACA,OAAA,EAAS,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;EAC9B,SAAA;EACA,YAAA,EAAc,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;;;;EAKnC,eAAA,EAAiB,SAAA;EACjB,gBAAA;EACA,QAAA;EACA,IAAA,EAAM,IAAA;AAAA;AAAA,UAGS,oBAAA;;;;;;;EAOf,gBAAA;;;;EAKA,QAAA;EAEA,QAAA,GAAW,SAAA;AAAA;AAAA,KAGR,IAAA;AAAA,cAEC,cAAA,EAAc,KAAA,CAAA,OAAA,CAAA,cAAA;AAAA,iBASJ,eAAA,CAAA;EACd,gBAAA;EACA,QAAA;EACA;AAAA,GACC,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAmCP,UAAA,CAAA,GAAc,cAAA;AAAA,iBAUd,SAAA,CAAA;;WAtDL,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;;;;iBA0DhB,cAAA,CAAA;AAAA,iBAIA,cAAA,CAAA;EACd;AAAA;EAEA,QAAA,GAAW,KAAA;IACT,GAAA,EAAK,SAAA,CAAU,WAAA;IACf,SAAA;IACA,OAAA;IACA,cAAA,GAAiB,KAAA,EAAO,YAAA;IACxB,cAAA,GAAiB,KAAA,EAAO,YAAA;EAAA,MACpB,SAAA;AAAA,IACP,SAAA;AAAA,iBAyCe,oBAAA,CAAqB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBjD,oBAAA,CAAA;EAAuB,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,YAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqB/E,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAuBxD,gBAAA,CAAiB,KAAA,EAAO,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgB3C,WAAA,CAAA;EACd,IAAA;EACA,MAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,SAAA;EACD,MAAA;EACA,IAAA,GAAO,SAAA;AAAA,IACR,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAce,aAAA,CAAA;EACd,WAAA,EAAa,eAAA;EACb,WAAA;EACA,MAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,MAAA;EACA,WAAA;EACA,WAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAsBe,oBAAA,CAAA;EAAuB,QAAA;EAAA,GAAa;AAAA,GAAS,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBpE,iBAAA,CAAA;EACd,QAAA;EACA,MAAA;EAAA,GACG;AAAA,GACF,SAAA;EACD,MAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAmCe,oBAAA,CAAqB,KAAA,EAAO,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAInD,cAAA,CAAA;EAAiB,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/D,sBAAA,CAAuB,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAqBtD,aAAA,CAAc,MAAA,WAAiB,GAAA,EAAK,SAAA,CAAU,WAAA"}

package/dist/components/sidebar/base.js

@@ -2,7 +2,6 @@
 
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { cn } from "../../utils/cn.js";
-import { isActive } from "../../utils/urls.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { ScrollArea, ScrollViewport } from "../ui/scroll-area.js";
 import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
@@ -157,11 +156,9 @@ function SidebarSeparator(props) {
 		children: props.children
 	});
 }
-function SidebarItem({ icon, children, ...props }) {
-	const pathname = usePathname();
+function SidebarItem({ icon, active = false, children, ...props }) {
 	const ref = useRef(null);
 	const { prefetch } = useSidebar();
-	const active = props.href !== void 0 && isActive(props.href, pathname, false);
 	useAutoScroll(active, ref);
 	return /* @__PURE__ */ jsxs(Link, {
 		ref,
@@ -213,12 +210,10 @@ function SidebarFolderTrigger({ children, ...props }) {
 		children
 	});
 }
-function SidebarFolderLink({ children, ...props }) {
+function SidebarFolderLink({ children, active = false, ...props }) {
 	const ref = useRef(null);
 	const { open, setOpen, collapsible } = use(FolderContext);
 	const { prefetch } = useSidebar();
-	const pathname = usePathname();
-	const active = props.href !== void 0 && isActive(props.href, pathname, false);
 	useAutoScroll(active, ref);
 	return /* @__PURE__ */ jsxs(Link, {
 		ref,

package/dist/components/sidebar/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","names":[],"sources":["../../../src/components/sidebar/base.tsx"],"sourcesContent":["'use client';\nimport { ChevronDown, ExternalLink } from 'lucide-react';\nimport {\n  type ComponentProps,\n  createContext,\n  type PointerEvent,\n  type ReactNode,\n  type RefObject,\n  use,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Link, { type LinkProps } from 'fumadocs-core/link';\nimport { useOnChange } from 'fumadocs-core/utils/use-on-change';\nimport { cn } from '@/utils/cn';\nimport { ScrollArea, type ScrollAreaProps, ScrollViewport } from '@/components/ui/scroll-area';\nimport { isActive } from '@/utils/urls';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  type CollapsibleContentProps,\n  CollapsibleTrigger,\n  type CollapsibleTriggerProps,\n} from '@/components/ui/collapsible';\nimport { useMediaQuery } from 'fumadocs-core/utils/use-media-query';\nimport scrollIntoView from 'scroll-into-view-if-needed';\nimport { usePathname } from 'fumadocs-core/framework';\nimport ReactDOM from 'react-dom';\n\ninterface SidebarContext {\n  open: boolean;\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  collapsed: boolean;\n  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;\n\n  /**\n   * When set to false, don't close the sidebar when navigate to another page\n   */\n  closeOnRedirect: RefObject<boolean>;\n  defaultOpenLevel: number;\n  prefetch?: boolean;\n  mode: Mode;\n}\n\nexport interface SidebarProviderProps {\n  /**\n   * Open folders by default if their level is lower or equal to a specific level\n   * (Starting from 1)\n   *\n   * @defaultValue 0\n   */\n  defaultOpenLevel?: number;\n\n  /**\n   * Prefetch links, default behaviour depends on your React.js framework.\n   */\n  prefetch?: boolean;\n\n  children?: ReactNode;\n}\n\ntype Mode = 'drawer' | 'full';\n\nconst SidebarContext = createContext<SidebarContext | null>(null);\n\nconst FolderContext = createContext<{\n  open: boolean;\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  depth: number;\n  collapsible: boolean;\n} | null>(null);\n\nexport function SidebarProvider({\n  defaultOpenLevel = 0,\n  prefetch,\n  children,\n}: SidebarProviderProps) {\n  const closeOnRedirect = useRef(true);\n  const [open, setOpen] = useState(false);\n  const [collapsed, setCollapsed] = useState(false);\n  const pathname = usePathname();\n  const mode: Mode = useMediaQuery('(width < 768px)') ? 'drawer' : 'full';\n\n  useOnChange(pathname, () => {\n    if (closeOnRedirect.current) {\n      setOpen(false);\n    }\n    closeOnRedirect.current = true;\n  });\n\n  return (\n    <SidebarContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n          collapsed,\n          setCollapsed,\n          closeOnRedirect,\n          defaultOpenLevel,\n          prefetch,\n          mode,\n        }),\n        [open, collapsed, defaultOpenLevel, prefetch, mode],\n      )}\n    >\n      {children}\n    </SidebarContext>\n  );\n}\n\nexport function useSidebar(): SidebarContext {\n  const ctx = use(SidebarContext);\n  if (!ctx)\n    throw new Error(\n      'Missing SidebarContext, make sure you have wrapped the component in <DocsLayout /> and the context is available.',\n    );\n\n  return ctx;\n}\n\nexport function useFolder() {\n  return use(FolderContext);\n}\n\nexport function useFolderDepth() {\n  return use(FolderContext)?.depth ?? 0;\n}\n\nexport function SidebarContent({\n  children,\n}: {\n  children: (state: {\n    ref: RefObject<HTMLElement | null>;\n    collapsed: boolean;\n    hovered: boolean;\n    onPointerEnter: (event: PointerEvent) => void;\n    onPointerLeave: (event: PointerEvent) => void;\n  }) => ReactNode;\n}) {\n  const { collapsed, mode } = useSidebar();\n  const [hover, setHover] = useState(false);\n  const ref = useRef<HTMLElement>(null);\n  const timerRef = useRef(0);\n\n  useOnChange(collapsed, () => {\n    if (collapsed) setHover(false);\n  });\n\n  if (mode !== 'full') return;\n\n  function shouldIgnoreHover(e: PointerEvent): boolean {\n    const element = ref.current;\n    if (!element) return true;\n\n    return !collapsed || e.pointerType === 'touch' || element.getAnimations().length > 0;\n  }\n\n  return children({\n    ref,\n    collapsed,\n    hovered: hover,\n    onPointerEnter(e) {\n      if (shouldIgnoreHover(e)) return;\n      window.clearTimeout(timerRef.current);\n      setHover(true);\n    },\n    onPointerLeave(e) {\n      if (shouldIgnoreHover(e)) return;\n      window.clearTimeout(timerRef.current);\n\n      timerRef.current = window.setTimeout(\n        () => setHover(false),\n        // if mouse is leaving the viewport, add a close delay\n        Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500,\n      );\n    },\n  });\n}\n\nexport function SidebarDrawerOverlay(props: ComponentProps<'div'>) {\n  const { open, setOpen, mode } = useSidebar();\n  const [hidden, setHidden] = useState(!open);\n\n  if (open && hidden) setHidden(false);\n  if (mode !== 'drawer' || hidden) return;\n  return (\n    <div\n      data-state={open ? 'open' : 'closed'}\n      onClick={() => setOpen(false)}\n      onAnimationEnd={() => {\n        if (!open) ReactDOM.flushSync(() => setHidden(true));\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarDrawerContent({ className, children, ...props }: ComponentProps<'aside'>) {\n  const { open, mode } = useSidebar();\n  const [hidden, setHidden] = useState(!open);\n\n  if (open && hidden) setHidden(false);\n  if (mode !== 'drawer') return;\n  return (\n    <aside\n      id=\"nd-sidebar-mobile\"\n      data-state={open ? 'open' : 'closed'}\n      className={cn(hidden && 'invisible', className)}\n      onAnimationEnd={() => {\n        if (!open) ReactDOM.flushSync(() => setHidden(true));\n      }}\n      {...props}\n    >\n      {children}\n    </aside>\n  );\n}\n\nexport function SidebarViewport({ className, ...props }: ScrollAreaProps) {\n  return (\n    <ScrollArea\n      className={(s) =>\n        cn('min-h-0 flex-1', typeof className === 'function' ? className(s) : className)\n      }\n      {...props}\n    >\n      <ScrollViewport\n        className=\"p-4 overscroll-contain\"\n        style={\n          {\n            maskImage:\n              'linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)',\n          } as object\n        }\n      >\n        {props.children}\n      </ScrollViewport>\n    </ScrollArea>\n  );\n}\n\nexport function SidebarSeparator(props: ComponentProps<'p'>) {\n  const depth = useFolderDepth();\n  return (\n    <p\n      {...props}\n      className={cn(\n        'inline-flex items-center gap-2 mb-1.5 px-2 mt-6 empty:mb-0',\n        depth === 0 && 'first:mt-0',\n        props.className,\n      )}\n    >\n      {props.children}\n    </p>\n  );\n}\n\nexport function SidebarItem({\n  icon,\n  children,\n  ...props\n}: LinkProps & {\n  icon?: ReactNode;\n}) {\n  const pathname = usePathname();\n  const ref = useRef<HTMLAnchorElement>(null);\n  const { prefetch } = useSidebar();\n  const active = props.href !== undefined && isActive(props.href, pathname, false);\n\n  useAutoScroll(active, ref);\n\n  return (\n    <Link ref={ref} data-active={active} prefetch={prefetch} {...props}>\n      {icon ?? (props.external ? <ExternalLink /> : null)}\n      {children}\n    </Link>\n  );\n}\n\nexport function SidebarFolder({\n  defaultOpen: defaultOpenProp,\n  collapsible = true,\n  active = false,\n  children,\n  ...props\n}: ComponentProps<'div'> & {\n  active?: boolean;\n  defaultOpen?: boolean;\n  collapsible?: boolean;\n}) {\n  const { defaultOpenLevel } = useSidebar();\n  const depth = useFolderDepth() + 1;\n  const defaultOpen =\n    collapsible === false || active || (defaultOpenProp ?? defaultOpenLevel >= depth);\n  const [open, setOpen] = useState(defaultOpen);\n\n  useOnChange(defaultOpen, (v) => {\n    if (v) setOpen(v);\n  });\n\n  return (\n    <Collapsible open={open} onOpenChange={setOpen} disabled={!collapsible} {...props}>\n      <FolderContext\n        value={useMemo(() => ({ open, setOpen, depth, collapsible }), [collapsible, depth, open])}\n      >\n        {children}\n      </FolderContext>\n    </Collapsible>\n  );\n}\n\nexport function SidebarFolderTrigger({ children, ...props }: CollapsibleTriggerProps) {\n  const { open, collapsible } = use(FolderContext)!;\n\n  if (collapsible) {\n    return (\n      <CollapsibleTrigger {...props}>\n        {children}\n        <ChevronDown\n          data-icon\n          className={cn('ms-auto transition-transform', !open && '-rotate-90')}\n        />\n      </CollapsibleTrigger>\n    );\n  }\n\n  return <div {...(props as ComponentProps<'div'>)}>{children}</div>;\n}\n\nexport function SidebarFolderLink({ children, ...props }: LinkProps) {\n  const ref = useRef<HTMLAnchorElement>(null);\n  const { open, setOpen, collapsible } = use(FolderContext)!;\n  const { prefetch } = useSidebar();\n  const pathname = usePathname();\n  const active = props.href !== undefined && isActive(props.href, pathname, false);\n\n  useAutoScroll(active, ref);\n\n  return (\n    <Link\n      ref={ref}\n      data-active={active}\n      onClick={(e) => {\n        if (!collapsible) return;\n\n        if (e.target instanceof Element && e.target.matches('[data-icon], [data-icon] *')) {\n          setOpen(!open);\n          e.preventDefault();\n        } else {\n          setOpen(active ? !open : true);\n        }\n      }}\n      prefetch={prefetch}\n      {...props}\n    >\n      {children}\n      {collapsible && (\n        <ChevronDown\n          data-icon\n          className={cn('ms-auto transition-transform', !open && '-rotate-90')}\n        />\n      )}\n    </Link>\n  );\n}\n\nexport function SidebarFolderContent(props: CollapsibleContentProps) {\n  return <CollapsibleContent {...props}>{props.children}</CollapsibleContent>;\n}\n\nexport function SidebarTrigger({ children, ...props }: ComponentProps<'button'>) {\n  const { setOpen } = useSidebar();\n\n  return (\n    <button aria-label=\"Open Sidebar\" onClick={() => setOpen((prev) => !prev)} {...props}>\n      {children}\n    </button>\n  );\n}\n\nexport function SidebarCollapseTrigger(props: ComponentProps<'button'>) {\n  const { collapsed, setCollapsed } = useSidebar();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Collapse Sidebar\"\n      data-collapsed={collapsed}\n      onClick={() => {\n        setCollapsed((prev) => !prev);\n      }}\n      {...props}\n    >\n      {props.children}\n    </button>\n  );\n}\n\n/**\n * scroll to the element if `active` is true\n */\nexport function useAutoScroll(active: boolean, ref: RefObject<HTMLElement | null>) {\n  const { mode } = useSidebar();\n\n  useEffect(() => {\n    if (active && ref.current) {\n      scrollIntoView(ref.current, {\n        boundary: document.getElementById(mode === 'drawer' ? 'nd-sidebar-mobile' : 'nd-sidebar'),\n        scrollMode: 'if-needed',\n      });\n    }\n  }, [active, mode, ref]);\n}\n"],"mappings":"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"}
+{"version":3,"file":"base.js","names":[],"sources":["../../../src/components/sidebar/base.tsx"],"sourcesContent":["'use client';\nimport { ChevronDown, ExternalLink } from 'lucide-react';\nimport {\n  type ComponentProps,\n  createContext,\n  type PointerEvent,\n  type ReactNode,\n  type RefObject,\n  use,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Link, { type LinkProps } from 'fumadocs-core/link';\nimport { useOnChange } from 'fumadocs-core/utils/use-on-change';\nimport { cn } from '@/utils/cn';\nimport { ScrollArea, type ScrollAreaProps, ScrollViewport } from '@/components/ui/scroll-area';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  type CollapsibleContentProps,\n  CollapsibleTrigger,\n  type CollapsibleTriggerProps,\n} from '@/components/ui/collapsible';\nimport { useMediaQuery } from 'fumadocs-core/utils/use-media-query';\nimport scrollIntoView from 'scroll-into-view-if-needed';\nimport { usePathname } from 'fumadocs-core/framework';\nimport ReactDOM from 'react-dom';\n\ninterface SidebarContext {\n  open: boolean;\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  collapsed: boolean;\n  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;\n\n  /**\n   * When set to false, don't close the sidebar when navigate to another page\n   */\n  closeOnRedirect: RefObject<boolean>;\n  defaultOpenLevel: number;\n  prefetch?: boolean;\n  mode: Mode;\n}\n\nexport interface SidebarProviderProps {\n  /**\n   * Open folders by default if their level is lower or equal to a specific level\n   * (Starting from 1)\n   *\n   * @defaultValue 0\n   */\n  defaultOpenLevel?: number;\n\n  /**\n   * Prefetch links, default behaviour depends on your React.js framework.\n   */\n  prefetch?: boolean;\n\n  children?: ReactNode;\n}\n\ntype Mode = 'drawer' | 'full';\n\nconst SidebarContext = createContext<SidebarContext | null>(null);\n\nconst FolderContext = createContext<{\n  open: boolean;\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  depth: number;\n  collapsible: boolean;\n} | null>(null);\n\nexport function SidebarProvider({\n  defaultOpenLevel = 0,\n  prefetch,\n  children,\n}: SidebarProviderProps) {\n  const closeOnRedirect = useRef(true);\n  const [open, setOpen] = useState(false);\n  const [collapsed, setCollapsed] = useState(false);\n  const pathname = usePathname();\n  const mode: Mode = useMediaQuery('(width < 768px)') ? 'drawer' : 'full';\n\n  useOnChange(pathname, () => {\n    if (closeOnRedirect.current) {\n      setOpen(false);\n    }\n    closeOnRedirect.current = true;\n  });\n\n  return (\n    <SidebarContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n          collapsed,\n          setCollapsed,\n          closeOnRedirect,\n          defaultOpenLevel,\n          prefetch,\n          mode,\n        }),\n        [open, collapsed, defaultOpenLevel, prefetch, mode],\n      )}\n    >\n      {children}\n    </SidebarContext>\n  );\n}\n\nexport function useSidebar(): SidebarContext {\n  const ctx = use(SidebarContext);\n  if (!ctx)\n    throw new Error(\n      'Missing SidebarContext, make sure you have wrapped the component in <DocsLayout /> and the context is available.',\n    );\n\n  return ctx;\n}\n\nexport function useFolder() {\n  return use(FolderContext);\n}\n\nexport function useFolderDepth() {\n  return use(FolderContext)?.depth ?? 0;\n}\n\nexport function SidebarContent({\n  children,\n}: {\n  children: (state: {\n    ref: RefObject<HTMLElement | null>;\n    collapsed: boolean;\n    hovered: boolean;\n    onPointerEnter: (event: PointerEvent) => void;\n    onPointerLeave: (event: PointerEvent) => void;\n  }) => ReactNode;\n}) {\n  const { collapsed, mode } = useSidebar();\n  const [hover, setHover] = useState(false);\n  const ref = useRef<HTMLElement>(null);\n  const timerRef = useRef(0);\n\n  useOnChange(collapsed, () => {\n    if (collapsed) setHover(false);\n  });\n\n  if (mode !== 'full') return;\n\n  function shouldIgnoreHover(e: PointerEvent): boolean {\n    const element = ref.current;\n    if (!element) return true;\n\n    return !collapsed || e.pointerType === 'touch' || element.getAnimations().length > 0;\n  }\n\n  return children({\n    ref,\n    collapsed,\n    hovered: hover,\n    onPointerEnter(e) {\n      if (shouldIgnoreHover(e)) return;\n      window.clearTimeout(timerRef.current);\n      setHover(true);\n    },\n    onPointerLeave(e) {\n      if (shouldIgnoreHover(e)) return;\n      window.clearTimeout(timerRef.current);\n\n      timerRef.current = window.setTimeout(\n        () => setHover(false),\n        // if mouse is leaving the viewport, add a close delay\n        Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500,\n      );\n    },\n  });\n}\n\nexport function SidebarDrawerOverlay(props: ComponentProps<'div'>) {\n  const { open, setOpen, mode } = useSidebar();\n  const [hidden, setHidden] = useState(!open);\n\n  if (open && hidden) setHidden(false);\n  if (mode !== 'drawer' || hidden) return;\n  return (\n    <div\n      data-state={open ? 'open' : 'closed'}\n      onClick={() => setOpen(false)}\n      onAnimationEnd={() => {\n        if (!open) ReactDOM.flushSync(() => setHidden(true));\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarDrawerContent({ className, children, ...props }: ComponentProps<'aside'>) {\n  const { open, mode } = useSidebar();\n  const [hidden, setHidden] = useState(!open);\n\n  if (open && hidden) setHidden(false);\n  if (mode !== 'drawer') return;\n  return (\n    <aside\n      id=\"nd-sidebar-mobile\"\n      data-state={open ? 'open' : 'closed'}\n      className={cn(hidden && 'invisible', className)}\n      onAnimationEnd={() => {\n        if (!open) ReactDOM.flushSync(() => setHidden(true));\n      }}\n      {...props}\n    >\n      {children}\n    </aside>\n  );\n}\n\nexport function SidebarViewport({ className, ...props }: ScrollAreaProps) {\n  return (\n    <ScrollArea\n      className={(s) =>\n        cn('min-h-0 flex-1', typeof className === 'function' ? className(s) : className)\n      }\n      {...props}\n    >\n      <ScrollViewport\n        className=\"p-4 overscroll-contain\"\n        style={\n          {\n            maskImage:\n              'linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)',\n          } as object\n        }\n      >\n        {props.children}\n      </ScrollViewport>\n    </ScrollArea>\n  );\n}\n\nexport function SidebarSeparator(props: ComponentProps<'p'>) {\n  const depth = useFolderDepth();\n  return (\n    <p\n      {...props}\n      className={cn(\n        'inline-flex items-center gap-2 mb-1.5 px-2 mt-6 empty:mb-0',\n        depth === 0 && 'first:mt-0',\n        props.className,\n      )}\n    >\n      {props.children}\n    </p>\n  );\n}\n\nexport function SidebarItem({\n  icon,\n  active = false,\n  children,\n  ...props\n}: LinkProps & {\n  active?: boolean;\n  icon?: ReactNode;\n}) {\n  const ref = useRef<HTMLAnchorElement>(null);\n  const { prefetch } = useSidebar();\n\n  useAutoScroll(active, ref);\n\n  return (\n    <Link ref={ref} data-active={active} prefetch={prefetch} {...props}>\n      {icon ?? (props.external ? <ExternalLink /> : null)}\n      {children}\n    </Link>\n  );\n}\n\nexport function SidebarFolder({\n  defaultOpen: defaultOpenProp,\n  collapsible = true,\n  active = false,\n  children,\n  ...props\n}: ComponentProps<'div'> & {\n  active?: boolean;\n  defaultOpen?: boolean;\n  collapsible?: boolean;\n}) {\n  const { defaultOpenLevel } = useSidebar();\n  const depth = useFolderDepth() + 1;\n  const defaultOpen =\n    collapsible === false || active || (defaultOpenProp ?? defaultOpenLevel >= depth);\n  const [open, setOpen] = useState(defaultOpen);\n\n  useOnChange(defaultOpen, (v) => {\n    if (v) setOpen(v);\n  });\n\n  return (\n    <Collapsible open={open} onOpenChange={setOpen} disabled={!collapsible} {...props}>\n      <FolderContext\n        value={useMemo(() => ({ open, setOpen, depth, collapsible }), [collapsible, depth, open])}\n      >\n        {children}\n      </FolderContext>\n    </Collapsible>\n  );\n}\n\nexport function SidebarFolderTrigger({ children, ...props }: CollapsibleTriggerProps) {\n  const { open, collapsible } = use(FolderContext)!;\n\n  if (collapsible) {\n    return (\n      <CollapsibleTrigger {...props}>\n        {children}\n        <ChevronDown\n          data-icon\n          className={cn('ms-auto transition-transform', !open && '-rotate-90')}\n        />\n      </CollapsibleTrigger>\n    );\n  }\n\n  return <div {...(props as ComponentProps<'div'>)}>{children}</div>;\n}\n\nexport function SidebarFolderLink({\n  children,\n  active = false,\n  ...props\n}: LinkProps & {\n  active?: boolean;\n}) {\n  const ref = useRef<HTMLAnchorElement>(null);\n  const { open, setOpen, collapsible } = use(FolderContext)!;\n  const { prefetch } = useSidebar();\n\n  useAutoScroll(active, ref);\n\n  return (\n    <Link\n      ref={ref}\n      data-active={active}\n      onClick={(e) => {\n        if (!collapsible) return;\n\n        if (e.target instanceof Element && e.target.matches('[data-icon], [data-icon] *')) {\n          setOpen(!open);\n          e.preventDefault();\n        } else {\n          setOpen(active ? !open : true);\n        }\n      }}\n      prefetch={prefetch}\n      {...props}\n    >\n      {children}\n      {collapsible && (\n        <ChevronDown\n          data-icon\n          className={cn('ms-auto transition-transform', !open && '-rotate-90')}\n        />\n      )}\n    </Link>\n  );\n}\n\nexport function SidebarFolderContent(props: CollapsibleContentProps) {\n  return <CollapsibleContent {...props}>{props.children}</CollapsibleContent>;\n}\n\nexport function SidebarTrigger({ children, ...props }: ComponentProps<'button'>) {\n  const { setOpen } = useSidebar();\n\n  return (\n    <button aria-label=\"Open Sidebar\" onClick={() => setOpen((prev) => !prev)} {...props}>\n      {children}\n    </button>\n  );\n}\n\nexport function SidebarCollapseTrigger(props: ComponentProps<'button'>) {\n  const { collapsed, setCollapsed } = useSidebar();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Collapse Sidebar\"\n      data-collapsed={collapsed}\n      onClick={() => {\n        setCollapsed((prev) => !prev);\n      }}\n      {...props}\n    >\n      {props.children}\n    </button>\n  );\n}\n\n/**\n * scroll to the element if `active` is true\n */\nexport function useAutoScroll(active: boolean, ref: RefObject<HTMLElement | null>) {\n  const { mode } = useSidebar();\n\n  useEffect(() => {\n    if (active && ref.current) {\n      scrollIntoView(ref.current, {\n        boundary: document.getElementById(mode === 'drawer' ? 'nd-sidebar-mobile' : 'nd-sidebar'),\n        scrollMode: 'if-needed',\n      });\n    }\n  }, [active, mode, ref]);\n}\n"],"mappings":"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"}

package/dist/components/sidebar/link-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-item.d.ts","names":[],"sources":["../../../src/components/sidebar/link-item.tsx"],"mappings":";;;;;;KAIK,kBAAA,GAAqB,IAAA,QACjB,cAAA;AAAA,iBAQO,sBAAA,CAAA;EACd,aAAA;EACA,oBAAA;EACA,iBAAA;EACA,oBAAA;EACA;AAAA,GACC,kBAAA;EAI+B,IAAA;EAAA,GAAA;AAAA,GAG7B,cAAA,CAAe,WAAA;EAChB,IAAA,EAAM,OAAA,CAAQ,YAAA;IAAgB,IAAA;EAAA;AAAA,MAC/B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"link-item.d.ts","names":[],"sources":["../../../src/components/sidebar/link-item.tsx"],"mappings":";;;;;;KAKK,kBAAA,GAAqB,IAAA,QACjB,cAAA;AAAA,iBAQO,sBAAA,CAAA;EACd,aAAA;EACA,oBAAA;EACA,iBAAA;EACA,oBAAA;EACA;AAAA,GACC,kBAAA;EAI+B,IAAA;EAAA,GAAA;AAAA,GAG7B,cAAA,CAAe,WAAA;EAChB,IAAA,EAAM,OAAA,CAAQ,YAAA;IAAgB,IAAA;EAAA;AAAA,MAC/B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/sidebar/link-item.js

@@ -1,3 +1,6 @@
+'use client';
+
+import { useLinkItemActive } from "../../utils/link-item.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/sidebar/link-item.tsx
@@ -6,6 +9,7 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 	* Render sidebar items from page tree
 	*/
 	return function SidebarLinkItem({ item, ...props }) {
+		const active = useLinkItemActive(item);
 		if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
 			...props,
 			children: item.children
@@ -14,6 +18,7 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 			...props,
 			children: [item.url ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
 				href: item.url,
+				active,
 				external: item.external,
 				children: [item.icon, item.text]
 			}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: item.items.map((child, i) => /* @__PURE__ */ jsx(SidebarLinkItem, { item: child }, i)) })]
@@ -22,6 +27,7 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 			href: item.url,
 			icon: item.icon,
 			external: item.external,
+			active,
 			...props,
 			children: item.text
 		});

package/dist/components/sidebar/link-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-item.js","names":[],"sources":["../../../src/components/sidebar/link-item.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport type * as Base from './base';\nimport type { LinkItemType } from '@/utils/link-item';\n\ntype InternalComponents = Pick<\n  typeof Base,\n  | 'SidebarFolder'\n  | 'SidebarFolderLink'\n  | 'SidebarFolderContent'\n  | 'SidebarFolderTrigger'\n  | 'SidebarItem'\n>;\n\nexport function createLinkItemRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n}: InternalComponents) {\n  /**\n   * Render sidebar items from page tree\n   */\n  return function SidebarLinkItem({\n    item,\n    ...props\n  }: HTMLAttributes<HTMLElement> & {\n    item: Exclude<LinkItemType, { type: 'icon' }>;\n  }) {\n    if (item.type === 'custom') return <div {...props}>{item.children}</div>;\n\n    if (item.type === 'menu')\n      return (\n        <SidebarFolder {...props}>\n          {item.url ? (\n            <SidebarFolderLink href={item.url} external={item.external}>\n              {item.icon}\n              {item.text}\n            </SidebarFolderLink>\n          ) : (\n            <SidebarFolderTrigger>\n              {item.icon}\n              {item.text}\n            </SidebarFolderTrigger>\n          )}\n          <SidebarFolderContent>\n            {item.items.map((child, i) => (\n              <SidebarLinkItem key={i} item={child} />\n            ))}\n          </SidebarFolderContent>\n        </SidebarFolder>\n      );\n\n    return (\n      <SidebarItem href={item.url} icon={item.icon} external={item.external} {...props}>\n        {item.text}\n      </SidebarItem>\n    );\n  };\n}\n"],"mappings":";;;AAaA,SAAgB,uBAAuB,EACrC,eACA,sBACA,mBACA,sBACA,eACqB;;;;AAIrB,QAAO,SAAS,gBAAgB,EAC9B,MACA,GAAG,SAGF;AACD,MAAI,KAAK,SAAS,SAAU,QAAO,oBAAC;GAAI,GAAI;aAAQ,KAAK;IAAe;AAExE,MAAI,KAAK,SAAS,OAChB,QACE,qBAAC;GAAc,GAAI;cAChB,KAAK,MACJ,qBAAC;IAAkB,MAAM,KAAK;IAAK,UAAU,KAAK;eAC/C,KAAK,MACL,KAAK;KACY,GAEpB,qBAAC,mCACE,KAAK,MACL,KAAK,QACe,EAEzB,oBAAC,kCACE,KAAK,MAAM,KAAK,OAAO,MACtB,oBAAC,mBAAwB,MAAM,SAAT,EAAkB,CACxC,GACmB;IACT;AAGpB,SACE,oBAAC;GAAY,MAAM,KAAK;GAAK,MAAM,KAAK;GAAM,UAAU,KAAK;GAAU,GAAI;aACxE,KAAK;IACM"}
+{"version":3,"file":"link-item.js","names":[],"sources":["../../../src/components/sidebar/link-item.tsx"],"sourcesContent":["'use client';\nimport type { HTMLAttributes } from 'react';\nimport type * as Base from './base';\nimport { useLinkItemActive, type LinkItemType } from '@/utils/link-item';\n\ntype InternalComponents = Pick<\n  typeof Base,\n  | 'SidebarFolder'\n  | 'SidebarFolderLink'\n  | 'SidebarFolderContent'\n  | 'SidebarFolderTrigger'\n  | 'SidebarItem'\n>;\n\nexport function createLinkItemRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n}: InternalComponents) {\n  /**\n   * Render sidebar items from page tree\n   */\n  return function SidebarLinkItem({\n    item,\n    ...props\n  }: HTMLAttributes<HTMLElement> & {\n    item: Exclude<LinkItemType, { type: 'icon' }>;\n  }) {\n    const active = useLinkItemActive(item);\n    if (item.type === 'custom') return <div {...props}>{item.children}</div>;\n\n    if (item.type === 'menu')\n      return (\n        <SidebarFolder {...props}>\n          {item.url ? (\n            <SidebarFolderLink href={item.url} active={active} external={item.external}>\n              {item.icon}\n              {item.text}\n            </SidebarFolderLink>\n          ) : (\n            <SidebarFolderTrigger>\n              {item.icon}\n              {item.text}\n            </SidebarFolderTrigger>\n          )}\n          <SidebarFolderContent>\n            {item.items.map((child, i) => (\n              <SidebarLinkItem key={i} item={child} />\n            ))}\n          </SidebarFolderContent>\n        </SidebarFolder>\n      );\n\n    return (\n      <SidebarItem\n        href={item.url}\n        icon={item.icon}\n        external={item.external}\n        active={active}\n        {...props}\n      >\n        {item.text}\n      </SidebarItem>\n    );\n  };\n}\n"],"mappings":";;;;;;AAcA,SAAgB,uBAAuB,EACrC,eACA,sBACA,mBACA,sBACA,eACqB;;;;AAIrB,QAAO,SAAS,gBAAgB,EAC9B,MACA,GAAG,SAGF;EACD,MAAM,SAAS,kBAAkB,KAAK;AACtC,MAAI,KAAK,SAAS,SAAU,QAAO,oBAAC;GAAI,GAAI;aAAQ,KAAK;IAAe;AAExE,MAAI,KAAK,SAAS,OAChB,QACE,qBAAC;GAAc,GAAI;cAChB,KAAK,MACJ,qBAAC;IAAkB,MAAM,KAAK;IAAa;IAAQ,UAAU,KAAK;eAC/D,KAAK,MACL,KAAK;KACY,GAEpB,qBAAC,mCACE,KAAK,MACL,KAAK,QACe,EAEzB,oBAAC,kCACE,KAAK,MAAM,KAAK,OAAO,MACtB,oBAAC,mBAAwB,MAAM,SAAT,EAAkB,CACxC,GACmB;IACT;AAGpB,SACE,oBAAC;GACC,MAAM,KAAK;GACX,MAAM,KAAK;GACX,UAAU,KAAK;GACP;GACR,GAAI;aAEH,KAAK;IACM"}

package/dist/components/sidebar/page-tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-tree.d.ts","names":[],"sources":["../../../src/components/sidebar/page-tree.tsx"],"mappings":";;;;;;UAKiB,yBAAA;EACf,IAAA,EAAM,EAAA;IAAK,IAAA,EAAM,QAAA,CAAS,IAAA;EAAA;EAC1B,MAAA,EAAQ,EAAA;IAAK,IAAA,EAAM,QAAA,CAAS,MAAA;IAAQ,QAAA,EAAU,SAAA;EAAA;EAC9C,SAAA,EAAW,EAAA;IAAK,IAAA,EAAM,QAAA,CAAS,SAAA;EAAA;AAAA;AAAA,KAG5B,kBAAA,GAAqB,IAAA,QACjB,cAAA;AAAA,iBASO,sBAAA,CAAA;EACd,aAAA;EACA,oBAAA;EACA,iBAAA;EACA,oBAAA;EACA,gBAAA;EACA;AAAA,GACC,kBAAA,IA6B+B,UAAA,EAAY,OAAA,CAAQ,yBAAA,MAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"page-tree.d.ts","names":[],"sources":["../../../src/components/sidebar/page-tree.tsx"],"mappings":";;;;;;UAOiB,yBAAA;EACf,IAAA,EAAM,EAAA;IAAK,IAAA,EAAM,QAAA,CAAS,IAAA;EAAA;EAC1B,MAAA,EAAQ,EAAA;IAAK,IAAA,EAAM,QAAA,CAAS,MAAA;IAAQ,QAAA,EAAU,SAAA;EAAA;EAC9C,SAAA,EAAW,EAAA;IAAK,IAAA,EAAM,QAAA,CAAS,SAAA;EAAA;AAAA;AAAA,KAU5B,kBAAA,GAAqB,IAAA,QACjB,cAAA;AAAA,iBASO,sBAAA,CAAA;EACd,aAAA;EACA,oBAAA;EACA,iBAAA;EACA,oBAAA;EACA,gBAAA;EACA;AAAA,GACC,kBAAA,IAiE+B,UAAA,EAAY,OAAA,CAAQ,yBAAA,MAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/sidebar/page-tree.js

@@ -1,55 +1,69 @@
 import { useTreeContext, useTreePath } from "../../contexts/tree.js";
-import { Fragment, useMemo } from "react";
+import { isActive } from "../../utils/urls.js";
+import { Fragment, createContext, use, useMemo } from "react";
+import { usePathname } from "fumadocs-core/framework";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/sidebar/page-tree.tsx
+const RendererContext = createContext(null);
 function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem }) {
-	function PageTreeFolder({ item, children }) {
-		const path = useTreePath();
-		return /* @__PURE__ */ jsxs(SidebarFolder, {
-			collapsible: item.collapsible,
-			active: path.includes(item),
-			defaultOpen: item.defaultOpen,
-			children: [item.index ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
-				href: item.index.url,
-				external: item.index.external,
-				children: [item.icon, item.name]
-			}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [item.icon, item.name] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children })]
+	function renderList(nodes) {
+		return nodes.map((node, i) => /* @__PURE__ */ jsx(PageTreeNode, { node }, i));
+	}
+	function PageTreeNode({ node }) {
+		const { Separator, Item, Folder, pathname } = use(RendererContext);
+		if (node.type === "separator") {
+			if (Separator) return /* @__PURE__ */ jsx(Separator, { item: node });
+			return /* @__PURE__ */ jsxs(SidebarSeparator, { children: [node.icon, node.name] });
+		}
+		if (node.type === "folder") {
+			const path = useTreePath();
+			if (Folder) return /* @__PURE__ */ jsx(Folder, {
+				item: node,
+				children: renderList(node.children)
+			});
+			return /* @__PURE__ */ jsxs(SidebarFolder, {
+				collapsible: node.collapsible,
+				active: path.includes(node),
+				defaultOpen: node.defaultOpen,
+				children: [node.index ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
+					href: node.index.url,
+					active: isActive(node.index.url, pathname),
+					external: node.index.external,
+					children: [node.icon, node.name]
+				}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [node.icon, node.name] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: renderList(node.children) })]
+			});
+		}
+		if (Item) return /* @__PURE__ */ jsx(Item, { item: node });
+		return /* @__PURE__ */ jsx(SidebarItem, {
+			href: node.url,
+			external: node.external,
+			active: isActive(node.url, pathname),
+			icon: node.icon,
+			children: node.name
 		});
 	}
 	/**
 	* Render sidebar items from page tree
 	*/
 	return function SidebarPageTree(components) {
+		const { Folder, Item, Separator } = components;
 		const { root } = useTreeContext();
-		const { Separator, Item, Folder = PageTreeFolder } = components;
-		return useMemo(() => {
-			function renderSidebarList(items) {
-				return items.map((item, i) => {
-					if (item.type === "separator") {
-						if (Separator) return /* @__PURE__ */ jsx(Separator, { item }, i);
-						return /* @__PURE__ */ jsxs(SidebarSeparator, { children: [item.icon, item.name] }, i);
-					}
-					if (item.type === "folder") return /* @__PURE__ */ jsx(Folder, {
-						item,
-						children: renderSidebarList(item.children)
-					}, i);
-					if (Item) return /* @__PURE__ */ jsx(Item, { item }, item.url);
-					return /* @__PURE__ */ jsx(SidebarItem, {
-						href: item.url,
-						external: item.external,
-						icon: item.icon,
-						children: item.name
-					}, item.url);
-				});
-			}
-			return /* @__PURE__ */ jsx(Fragment, { children: renderSidebarList(root.children) }, root.$id);
-		}, [
-			Folder,
-			Item,
-			Separator,
-			root
-		]);
+		const pathname = usePathname();
+		return /* @__PURE__ */ jsx(RendererContext, {
+			value: useMemo(() => ({
+				Folder,
+				Item,
+				Separator,
+				pathname
+			}), [
+				Folder,
+				Item,
+				Separator,
+				pathname
+			]),
+			children: /* @__PURE__ */ jsx(Fragment, { children: renderList(root.children) }, root.$id)
+		});
 	};
 }
 

package/dist/components/sidebar/page-tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-tree.js","names":[],"sources":["../../../src/components/sidebar/page-tree.tsx"],"sourcesContent":["import { useTreeContext, useTreePath } from '@/contexts/tree';\nimport { type FC, type ReactNode, useMemo, Fragment } from 'react';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport type * as Base from './base';\n\nexport interface SidebarPageTreeComponents {\n  Item: FC<{ item: PageTree.Item }>;\n  Folder: FC<{ item: PageTree.Folder; children: ReactNode }>;\n  Separator: FC<{ item: PageTree.Separator }>;\n}\n\ntype InternalComponents = Pick<\n  typeof Base,\n  | 'SidebarSeparator'\n  | 'SidebarFolder'\n  | 'SidebarFolderLink'\n  | 'SidebarFolderContent'\n  | 'SidebarFolderTrigger'\n  | 'SidebarItem'\n>;\n\nexport function createPageTreeRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarSeparator,\n  SidebarItem,\n}: InternalComponents) {\n  function PageTreeFolder({ item, children }: { item: PageTree.Folder; children: ReactNode }) {\n    const path = useTreePath();\n\n    return (\n      <SidebarFolder\n        collapsible={item.collapsible}\n        active={path.includes(item)}\n        defaultOpen={item.defaultOpen}\n      >\n        {item.index ? (\n          <SidebarFolderLink href={item.index.url} external={item.index.external}>\n            {item.icon}\n            {item.name}\n          </SidebarFolderLink>\n        ) : (\n          <SidebarFolderTrigger>\n            {item.icon}\n            {item.name}\n          </SidebarFolderTrigger>\n        )}\n        <SidebarFolderContent>{children}</SidebarFolderContent>\n      </SidebarFolder>\n    );\n  }\n\n  /**\n   * Render sidebar items from page tree\n   */\n  return function SidebarPageTree(components: Partial<SidebarPageTreeComponents>) {\n    const { root } = useTreeContext();\n    const { Separator, Item, Folder = PageTreeFolder } = components;\n\n    return useMemo(() => {\n      function renderSidebarList(items: PageTree.Node[]) {\n        return items.map((item, i) => {\n          if (item.type === 'separator') {\n            if (Separator) return <Separator key={i} item={item} />;\n            return (\n              <SidebarSeparator key={i}>\n                {item.icon}\n                {item.name}\n              </SidebarSeparator>\n            );\n          }\n\n          if (item.type === 'folder') {\n            return (\n              <Folder key={i} item={item}>\n                {renderSidebarList(item.children)}\n              </Folder>\n            );\n          }\n\n          if (Item) return <Item key={item.url} item={item} />;\n          return (\n            <SidebarItem key={item.url} href={item.url} external={item.external} icon={item.icon}>\n              {item.name}\n            </SidebarItem>\n          );\n        });\n      }\n\n      return <Fragment key={root.$id}>{renderSidebarList(root.children)}</Fragment>;\n    }, [Folder, Item, Separator, root]);\n  };\n}\n"],"mappings":";;;;;AAqBA,SAAgB,uBAAuB,EACrC,eACA,sBACA,mBACA,sBACA,kBACA,eACqB;CACrB,SAAS,eAAe,EAAE,MAAM,YAA4D;EAC1F,MAAM,OAAO,aAAa;AAE1B,SACE,qBAAC;GACC,aAAa,KAAK;GAClB,QAAQ,KAAK,SAAS,KAAK;GAC3B,aAAa,KAAK;cAEjB,KAAK,QACJ,qBAAC;IAAkB,MAAM,KAAK,MAAM;IAAK,UAAU,KAAK,MAAM;eAC3D,KAAK,MACL,KAAK;KACY,GAEpB,qBAAC,mCACE,KAAK,MACL,KAAK,QACe,EAEzB,oBAAC,wBAAsB,WAAgC;IACzC;;;;;AAOpB,QAAO,SAAS,gBAAgB,YAAgD;EAC9E,MAAM,EAAE,SAAS,gBAAgB;EACjC,MAAM,EAAE,WAAW,MAAM,SAAS,mBAAmB;AAErD,SAAO,cAAc;GACnB,SAAS,kBAAkB,OAAwB;AACjD,WAAO,MAAM,KAAK,MAAM,MAAM;AAC5B,SAAI,KAAK,SAAS,aAAa;AAC7B,UAAI,UAAW,QAAO,oBAAC,aAAwB,QAAT,EAAiB;AACvD,aACE,qBAAC,+BACE,KAAK,MACL,KAAK,SAFe,EAGJ;;AAIvB,SAAI,KAAK,SAAS,SAChB,QACE,oBAAC;MAAqB;gBACnB,kBAAkB,KAAK,SAAS;QADtB,EAEJ;AAIb,SAAI,KAAM,QAAO,oBAAC,QAA0B,QAAhB,KAAK,IAAmB;AACpD,YACE,oBAAC;MAA2B,MAAM,KAAK;MAAK,UAAU,KAAK;MAAU,MAAM,KAAK;gBAC7E,KAAK;QADU,KAAK,IAET;MAEhB;;AAGJ,UAAO,oBAAC,sBAAyB,kBAAkB,KAAK,SAAS,IAA3C,KAAK,IAAkD;KAC5E;GAAC;GAAQ;GAAM;GAAW;GAAK,CAAC"}
+{"version":3,"file":"page-tree.js","names":[],"sources":["../../../src/components/sidebar/page-tree.tsx"],"sourcesContent":["import { useTreeContext, useTreePath } from '@/contexts/tree';\nimport { type FC, Fragment, type ReactNode, createContext, use, useMemo } from 'react';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport type * as Base from './base';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { isActive } from '@/utils/urls';\n\nexport interface SidebarPageTreeComponents {\n  Item: FC<{ item: PageTree.Item }>;\n  Folder: FC<{ item: PageTree.Folder; children: ReactNode }>;\n  Separator: FC<{ item: PageTree.Separator }>;\n}\n\nconst RendererContext = createContext<\n  | (Partial<SidebarPageTreeComponents> & {\n      pathname: string;\n    })\n  | null\n>(null);\n\ntype InternalComponents = Pick<\n  typeof Base,\n  | 'SidebarSeparator'\n  | 'SidebarFolder'\n  | 'SidebarFolderLink'\n  | 'SidebarFolderContent'\n  | 'SidebarFolderTrigger'\n  | 'SidebarItem'\n>;\n\nexport function createPageTreeRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarSeparator,\n  SidebarItem,\n}: InternalComponents) {\n  function renderList(nodes: PageTree.Node[]) {\n    return nodes.map((node, i) => <PageTreeNode key={i} node={node} />);\n  }\n\n  function PageTreeNode({ node }: { node: PageTree.Node }) {\n    const { Separator, Item, Folder, pathname } = use(RendererContext)!;\n\n    if (node.type === 'separator') {\n      if (Separator) return <Separator item={node} />;\n      return (\n        <SidebarSeparator>\n          {node.icon}\n          {node.name}\n        </SidebarSeparator>\n      );\n    }\n\n    if (node.type === 'folder') {\n      // eslint-disable-next-line react-hooks/rules-of-hooks -- assume node type unchanged\n      const path = useTreePath();\n      if (Folder) return <Folder item={node}>{renderList(node.children)}</Folder>;\n\n      return (\n        <SidebarFolder\n          collapsible={node.collapsible}\n          active={path.includes(node)}\n          defaultOpen={node.defaultOpen}\n        >\n          {node.index ? (\n            <SidebarFolderLink\n              href={node.index.url}\n              active={isActive(node.index.url, pathname)}\n              external={node.index.external}\n            >\n              {node.icon}\n              {node.name}\n            </SidebarFolderLink>\n          ) : (\n            <SidebarFolderTrigger>\n              {node.icon}\n              {node.name}\n            </SidebarFolderTrigger>\n          )}\n          <SidebarFolderContent>{renderList(node.children)}</SidebarFolderContent>\n        </SidebarFolder>\n      );\n    }\n\n    if (Item) return <Item item={node} />;\n    return (\n      <SidebarItem\n        href={node.url}\n        external={node.external}\n        active={isActive(node.url, pathname)}\n        icon={node.icon}\n      >\n        {node.name}\n      </SidebarItem>\n    );\n  }\n\n  /**\n   * Render sidebar items from page tree\n   */\n  return function SidebarPageTree(components: Partial<SidebarPageTreeComponents>) {\n    const { Folder, Item, Separator } = components;\n    const { root } = useTreeContext();\n    const pathname = usePathname();\n\n    return (\n      <RendererContext\n        value={useMemo(\n          () => ({ Folder, Item, Separator, pathname }),\n          [Folder, Item, Separator, pathname],\n        )}\n      >\n        <Fragment key={root.$id}>{renderList(root.children)}</Fragment>\n      </RendererContext>\n    );\n  };\n}\n"],"mappings":";;;;;;;AAaA,MAAM,kBAAkB,cAKtB,KAAK;AAYP,SAAgB,uBAAuB,EACrC,eACA,sBACA,mBACA,sBACA,kBACA,eACqB;CACrB,SAAS,WAAW,OAAwB;AAC1C,SAAO,MAAM,KAAK,MAAM,MAAM,oBAAC,gBAA2B,QAAT,EAAiB,CAAC;;CAGrE,SAAS,aAAa,EAAE,QAAiC;EACvD,MAAM,EAAE,WAAW,MAAM,QAAQ,aAAa,IAAI,gBAAgB;AAElE,MAAI,KAAK,SAAS,aAAa;AAC7B,OAAI,UAAW,QAAO,oBAAC,aAAU,MAAM,OAAQ;AAC/C,UACE,qBAAC,+BACE,KAAK,MACL,KAAK,QACW;;AAIvB,MAAI,KAAK,SAAS,UAAU;GAE1B,MAAM,OAAO,aAAa;AAC1B,OAAI,OAAQ,QAAO,oBAAC;IAAO,MAAM;cAAO,WAAW,KAAK,SAAS;KAAU;AAE3E,UACE,qBAAC;IACC,aAAa,KAAK;IAClB,QAAQ,KAAK,SAAS,KAAK;IAC3B,aAAa,KAAK;eAEjB,KAAK,QACJ,qBAAC;KACC,MAAM,KAAK,MAAM;KACjB,QAAQ,SAAS,KAAK,MAAM,KAAK,SAAS;KAC1C,UAAU,KAAK,MAAM;gBAEpB,KAAK,MACL,KAAK;MACY,GAEpB,qBAAC,mCACE,KAAK,MACL,KAAK,QACe,EAEzB,oBAAC,kCAAsB,WAAW,KAAK,SAAS,GAAwB;KAC1D;;AAIpB,MAAI,KAAM,QAAO,oBAAC,QAAK,MAAM,OAAQ;AACrC,SACE,oBAAC;GACC,MAAM,KAAK;GACX,UAAU,KAAK;GACf,QAAQ,SAAS,KAAK,KAAK,SAAS;GACpC,MAAM,KAAK;aAEV,KAAK;IACM;;;;;AAOlB,QAAO,SAAS,gBAAgB,YAAgD;EAC9E,MAAM,EAAE,QAAQ,MAAM,cAAc;EACpC,MAAM,EAAE,SAAS,gBAAgB;EACjC,MAAM,WAAW,aAAa;AAE9B,SACE,oBAAC;GACC,OAAO,eACE;IAAE;IAAQ;IAAM;IAAW;IAAU,GAC5C;IAAC;IAAQ;IAAM;IAAW;IAAS,CACpC;aAED,oBAAC,sBAAyB,WAAW,KAAK,SAAS,IAApC,KAAK,IAA2C;IAC/C"}

package/dist/layouts/docs/page/client.js

@@ -150,7 +150,7 @@ function PageFooter({ items, children, className, ...props }) {
 	const pathname = usePathname();
 	const { previous, next } = useMemo(() => {
 		if (items) return items;
-		const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));
+		const idx = footerList.findIndex((item) => isActive(item.url, pathname));
 		if (idx === -1) return {};
 		return {
 			previous: footerList[idx - 1],

package/dist/layouts/docs/page/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":[],"sources":["../../../../src/layouts/docs/page/client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport Link from 'fumadocs-core/link';\nimport { cn } from '@/utils/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';\nimport { isActive } from '@/utils/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from 'fumadocs-core/toc';\nimport { LayoutContext } from '../client';\nimport { useFooterItems } from '@/utils/use-footer-items';\n\nconst TocPopoverContext = createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n} | null>(null);\n\nexport function PageTOCPopover({ className, children, ...rest }: ComponentProps<'div'>) {\n  const ref = useRef<HTMLElement>(null);\n  const [open, setOpen] = useState(false);\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  const onClick = useEffectEvent((e: Event) => {\n    if (!open) return;\n\n    if (ref.current && !ref.current.contains(e.target as HTMLElement)) setOpen(false);\n  });\n\n  useEffect(() => {\n    window.addEventListener('click', onClick);\n\n    return () => {\n      window.removeEventListener('click', onClick);\n    };\n  }, []);\n\n  return (\n    <TocPopoverContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n        }),\n        [setOpen, open],\n      )}\n    >\n      <Collapsible\n        open={open}\n        onOpenChange={setOpen}\n        data-toc-popover=\"\"\n        className={cn(\n          '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)]',\n          className,\n        )}\n        {...rest}\n      >\n        <header\n          ref={ref}\n          className={cn(\n            'border-b backdrop-blur-sm transition-colors',\n            (!isNavTransparent || open) && 'bg-fd-background/80',\n            open && 'shadow-lg',\n          )}\n        >\n          {children}\n        </header>\n      </Collapsible>\n    </TocPopoverContext>\n  );\n}\n\nexport function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>) {\n  const { text } = useI18n();\n  const { open } = use(TocPopoverContext)!;\n  const items = useTOCItems();\n  const active = useActiveAnchor();\n  const selected = useMemo(\n    () => items.findIndex((item) => active === item.url.slice(1)),\n    [items, active],\n  );\n  const path = useTreePath().at(-1);\n  const showItem = selected !== -1 && !open;\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        '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',\n        className,\n      )}\n      data-toc-popover-trigger=\"\"\n      {...props}\n    >\n      <ProgressCircle\n        value={(selected + 1) / Math.max(1, items.length)}\n        max={1}\n        className={cn('shrink-0', open && 'text-fd-primary')}\n      />\n      <span className=\"grid flex-1 *:my-auto *:row-start-1 *:col-start-1\">\n        <span\n          className={cn(\n            'truncate transition-all',\n            open && 'text-fd-foreground',\n            showItem && 'opacity-0 -translate-y-full pointer-events-none',\n          )}\n        >\n          {path?.name ?? text.toc}\n        </span>\n        <span\n          className={cn(\n            'truncate transition-all',\n            !showItem && 'opacity-0 translate-y-full pointer-events-none',\n          )}\n        >\n          {items[selected]?.title}\n        </span>\n      </span>\n      <ChevronDown className={cn('shrink-0 transition-transform mx-0.5', open && 'rotate-180')} />\n    </CollapsibleTrigger>\n  );\n}\n\ninterface ProgressCircleProps extends Omit<React.ComponentProps<'svg'>, 'strokeWidth'> {\n  value: number;\n  strokeWidth?: number;\n  size?: number;\n  min?: number;\n  max?: number;\n}\n\nfunction clamp(input: number, min: number, max: number): number {\n  if (input < min) return min;\n  if (input > max) return max;\n  return input;\n}\n\nfunction ProgressCircle({\n  value,\n  strokeWidth = 2,\n  size = 24,\n  min = 0,\n  max = 100,\n  ...restSvgProps\n}: ProgressCircleProps) {\n  const normalizedValue = clamp(value, min, max);\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const progress = (normalizedValue / max) * circumference;\n  const circleProps = {\n    cx: size / 2,\n    cy: size / 2,\n    r: radius,\n    fill: 'none',\n    strokeWidth,\n  };\n\n  return (\n    <svg\n      role=\"progressbar\"\n      viewBox={`0 0 ${size} ${size}`}\n      aria-valuenow={normalizedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      {...restSvgProps}\n    >\n      <circle {...circleProps} className=\"stroke-current/25\" />\n      <circle\n        {...circleProps}\n        stroke=\"currentColor\"\n        strokeDasharray={circumference}\n        strokeDashoffset={circumference - progress}\n        strokeLinecap=\"round\"\n        transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        className=\"transition-all\"\n      />\n    </svg>\n  );\n}\n\nexport function PageTOCPopoverContent(props: ComponentProps<'div'>) {\n  return (\n    <CollapsibleContent\n      data-toc-popover-content=\"\"\n      {...props}\n      className={cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className)}\n    >\n      <div>{props.children}</div>\n    </CollapsibleContent>\n  );\n}\n\nexport function PageLastUpdate({\n  date: value,\n  ...props\n}: Omit<ComponentProps<'p'>, 'children'> & { date: Date }) {\n  const { text } = useI18n();\n  const [date, setDate] = useState('');\n\n  useEffect(() => {\n    // to the timezone of client\n    setDate(value.toLocaleDateString());\n  }, [value]);\n\n  return (\n    <p {...props} className={cn('text-sm text-fd-muted-foreground', props.className)}>\n      {text.lastUpdate} {date}\n    </p>\n  );\n}\n\ntype Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;\nexport interface FooterProps extends ComponentProps<'div'> {\n  /**\n   * Items including information for the next and previous page\n   */\n  items?: {\n    previous?: Item;\n    next?: Item;\n  };\n}\n\nexport function PageFooter({ items, children, className, ...props }: FooterProps) {\n  const footerList = useFooterItems();\n  const pathname = usePathname();\n\n  const { previous, next } = useMemo(() => {\n    if (items) return items;\n\n    const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));\n\n    if (idx === -1) return {};\n    return {\n      previous: footerList[idx - 1],\n      next: footerList[idx + 1],\n    };\n  }, [footerList, items, pathname]);\n\n  return (\n    <>\n      <div\n        className={cn(\n          '@container grid gap-4',\n          previous && next ? 'grid-cols-2' : 'grid-cols-1',\n          className,\n        )}\n        {...props}\n      >\n        {previous && <FooterItem item={previous} index={0} />}\n        {next && <FooterItem item={next} index={1} />}\n      </div>\n      {children}\n    </>\n  );\n}\n\nfunction FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {\n  const { text } = useI18n();\n  const Icon = index === 0 ? ChevronLeft : ChevronRight;\n\n  return (\n    <Link\n      href={item.url}\n      className={cn(\n        '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',\n        index === 1 && 'text-end',\n      )}\n    >\n      <div\n        className={cn(\n          'inline-flex items-center gap-1.5 font-medium',\n          index === 1 && 'flex-row-reverse',\n        )}\n      >\n        <Icon className=\"-mx-1 size-4 shrink-0 rtl:rotate-180\" />\n        <p>{item.name}</p>\n      </div>\n      <p className=\"text-fd-muted-foreground truncate\">\n        {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}\n      </p>\n    </Link>\n  );\n}\n\nexport type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;\n\nexport function PageBreadcrumb({\n  includeRoot,\n  includeSeparator,\n  includePage,\n  ...props\n}: BreadcrumbProps) {\n  const path = useTreePath();\n  const { root } = useTreeContext();\n  const items = useMemo(() => {\n    return getBreadcrumbItemsFromPath(root, path, {\n      includePage,\n      includeSeparator,\n      includeRoot,\n    });\n  }, [includePage, includeRoot, includeSeparator, path, root]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className)}\n    >\n      {items.map((item, i) => {\n        const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');\n\n        return (\n          <Fragment key={i}>\n            {i !== 0 && <ChevronRight className=\"size-3.5 shrink-0\" />}\n            {item.url ? (\n              <Link\n                href={item.url}\n                className={cn(className, 'transition-opacity hover:opacity-80')}\n              >\n                {item.name}\n              </Link>\n            ) : (\n              <span className={className}>{item.name}</span>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"client.js","names":[],"sources":["../../../../src/layouts/docs/page/client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport Link from 'fumadocs-core/link';\nimport { cn } from '@/utils/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';\nimport { isActive } from '@/utils/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from 'fumadocs-core/toc';\nimport { LayoutContext } from '../client';\nimport { useFooterItems } from '@/utils/use-footer-items';\n\nconst TocPopoverContext = createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n} | null>(null);\n\nexport function PageTOCPopover({ className, children, ...rest }: ComponentProps<'div'>) {\n  const ref = useRef<HTMLElement>(null);\n  const [open, setOpen] = useState(false);\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  const onClick = useEffectEvent((e: Event) => {\n    if (!open) return;\n\n    if (ref.current && !ref.current.contains(e.target as HTMLElement)) setOpen(false);\n  });\n\n  useEffect(() => {\n    window.addEventListener('click', onClick);\n\n    return () => {\n      window.removeEventListener('click', onClick);\n    };\n  }, []);\n\n  return (\n    <TocPopoverContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n        }),\n        [setOpen, open],\n      )}\n    >\n      <Collapsible\n        open={open}\n        onOpenChange={setOpen}\n        data-toc-popover=\"\"\n        className={cn(\n          '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)]',\n          className,\n        )}\n        {...rest}\n      >\n        <header\n          ref={ref}\n          className={cn(\n            'border-b backdrop-blur-sm transition-colors',\n            (!isNavTransparent || open) && 'bg-fd-background/80',\n            open && 'shadow-lg',\n          )}\n        >\n          {children}\n        </header>\n      </Collapsible>\n    </TocPopoverContext>\n  );\n}\n\nexport function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>) {\n  const { text } = useI18n();\n  const { open } = use(TocPopoverContext)!;\n  const items = useTOCItems();\n  const active = useActiveAnchor();\n  const selected = useMemo(\n    () => items.findIndex((item) => active === item.url.slice(1)),\n    [items, active],\n  );\n  const path = useTreePath().at(-1);\n  const showItem = selected !== -1 && !open;\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        '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',\n        className,\n      )}\n      data-toc-popover-trigger=\"\"\n      {...props}\n    >\n      <ProgressCircle\n        value={(selected + 1) / Math.max(1, items.length)}\n        max={1}\n        className={cn('shrink-0', open && 'text-fd-primary')}\n      />\n      <span className=\"grid flex-1 *:my-auto *:row-start-1 *:col-start-1\">\n        <span\n          className={cn(\n            'truncate transition-all',\n            open && 'text-fd-foreground',\n            showItem && 'opacity-0 -translate-y-full pointer-events-none',\n          )}\n        >\n          {path?.name ?? text.toc}\n        </span>\n        <span\n          className={cn(\n            'truncate transition-all',\n            !showItem && 'opacity-0 translate-y-full pointer-events-none',\n          )}\n        >\n          {items[selected]?.title}\n        </span>\n      </span>\n      <ChevronDown className={cn('shrink-0 transition-transform mx-0.5', open && 'rotate-180')} />\n    </CollapsibleTrigger>\n  );\n}\n\ninterface ProgressCircleProps extends Omit<React.ComponentProps<'svg'>, 'strokeWidth'> {\n  value: number;\n  strokeWidth?: number;\n  size?: number;\n  min?: number;\n  max?: number;\n}\n\nfunction clamp(input: number, min: number, max: number): number {\n  if (input < min) return min;\n  if (input > max) return max;\n  return input;\n}\n\nfunction ProgressCircle({\n  value,\n  strokeWidth = 2,\n  size = 24,\n  min = 0,\n  max = 100,\n  ...restSvgProps\n}: ProgressCircleProps) {\n  const normalizedValue = clamp(value, min, max);\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const progress = (normalizedValue / max) * circumference;\n  const circleProps = {\n    cx: size / 2,\n    cy: size / 2,\n    r: radius,\n    fill: 'none',\n    strokeWidth,\n  };\n\n  return (\n    <svg\n      role=\"progressbar\"\n      viewBox={`0 0 ${size} ${size}`}\n      aria-valuenow={normalizedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      {...restSvgProps}\n    >\n      <circle {...circleProps} className=\"stroke-current/25\" />\n      <circle\n        {...circleProps}\n        stroke=\"currentColor\"\n        strokeDasharray={circumference}\n        strokeDashoffset={circumference - progress}\n        strokeLinecap=\"round\"\n        transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        className=\"transition-all\"\n      />\n    </svg>\n  );\n}\n\nexport function PageTOCPopoverContent(props: ComponentProps<'div'>) {\n  return (\n    <CollapsibleContent\n      data-toc-popover-content=\"\"\n      {...props}\n      className={cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className)}\n    >\n      <div>{props.children}</div>\n    </CollapsibleContent>\n  );\n}\n\nexport function PageLastUpdate({\n  date: value,\n  ...props\n}: Omit<ComponentProps<'p'>, 'children'> & { date: Date }) {\n  const { text } = useI18n();\n  const [date, setDate] = useState('');\n\n  useEffect(() => {\n    // to the timezone of client\n    setDate(value.toLocaleDateString());\n  }, [value]);\n\n  return (\n    <p {...props} className={cn('text-sm text-fd-muted-foreground', props.className)}>\n      {text.lastUpdate} {date}\n    </p>\n  );\n}\n\ntype Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;\nexport interface FooterProps extends ComponentProps<'div'> {\n  /**\n   * Items including information for the next and previous page\n   */\n  items?: {\n    previous?: Item;\n    next?: Item;\n  };\n}\n\nexport function PageFooter({ items, children, className, ...props }: FooterProps) {\n  const footerList = useFooterItems();\n  const pathname = usePathname();\n\n  const { previous, next } = useMemo(() => {\n    if (items) return items;\n\n    const idx = footerList.findIndex((item) => isActive(item.url, pathname));\n\n    if (idx === -1) return {};\n    return {\n      previous: footerList[idx - 1],\n      next: footerList[idx + 1],\n    };\n  }, [footerList, items, pathname]);\n\n  return (\n    <>\n      <div\n        className={cn(\n          '@container grid gap-4',\n          previous && next ? 'grid-cols-2' : 'grid-cols-1',\n          className,\n        )}\n        {...props}\n      >\n        {previous && <FooterItem item={previous} index={0} />}\n        {next && <FooterItem item={next} index={1} />}\n      </div>\n      {children}\n    </>\n  );\n}\n\nfunction FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {\n  const { text } = useI18n();\n  const Icon = index === 0 ? ChevronLeft : ChevronRight;\n\n  return (\n    <Link\n      href={item.url}\n      className={cn(\n        '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',\n        index === 1 && 'text-end',\n      )}\n    >\n      <div\n        className={cn(\n          'inline-flex items-center gap-1.5 font-medium',\n          index === 1 && 'flex-row-reverse',\n        )}\n      >\n        <Icon className=\"-mx-1 size-4 shrink-0 rtl:rotate-180\" />\n        <p>{item.name}</p>\n      </div>\n      <p className=\"text-fd-muted-foreground truncate\">\n        {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}\n      </p>\n    </Link>\n  );\n}\n\nexport type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;\n\nexport function PageBreadcrumb({\n  includeRoot,\n  includeSeparator,\n  includePage,\n  ...props\n}: BreadcrumbProps) {\n  const path = useTreePath();\n  const { root } = useTreeContext();\n  const items = useMemo(() => {\n    return getBreadcrumbItemsFromPath(root, path, {\n      includePage,\n      includeSeparator,\n      includeRoot,\n    });\n  }, [includePage, includeRoot, includeSeparator, path, root]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className)}\n    >\n      {items.map((item, i) => {\n        const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');\n\n        return (\n          <Fragment key={i}>\n            {i !== 0 && <ChevronRight className=\"size-3.5 shrink-0\" />}\n            {item.url ? (\n              <Link\n                href={item.url}\n                className={cn(className, 'transition-opacity hover:opacity-80')}\n              >\n                {item.name}\n              </Link>\n            ) : (\n              <span className={className}>{item.name}</span>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/layouts/flux/page/client.js

@@ -178,7 +178,7 @@ function PageFooter({ items, children, className, ...props }) {
 	const pathname = usePathname();
 	const { previous, next } = useMemo(() => {
 		if (items) return items;
-		const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));
+		const idx = footerList.findIndex((item) => isActive(item.url, pathname));
 		if (idx === -1) return {};
 		return {
 			previous: footerList[idx - 1],

package/dist/layouts/flux/page/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":[],"sources":["../../../../src/layouts/flux/page/client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport Link from 'fumadocs-core/link';\nimport { cn } from '@/utils/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';\nimport { isActive } from '@/utils/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from 'fumadocs-core/toc';\nimport { useFooterItems } from '@/utils/use-footer-items';\nimport { createPortal } from 'react-dom';\nimport { AnimatePresence, motion } from 'motion/react';\n\nconst TocPopoverContext = createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n} | null>(null);\n\nexport function PageTOCPopover(props: ComponentProps<'div'>) {\n  const [container, setContainer] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    const element = document.getElementById('flux-layout-slot');\n    if (!element) return;\n    setContainer(element);\n  }, []);\n\n  if (!container) return;\n  return createPortal(<PageTOCPopoverPhysical {...props} />, container);\n}\n\nfunction PageTOCPopoverPhysical({ className, children, ...rest }: ComponentProps<'div'>) {\n  const ref = useRef<HTMLElement>(null);\n  const [open, setOpen] = useState(false);\n\n  const onClick = useEffectEvent((e: Event) => {\n    if (!open) return;\n\n    if (ref.current && !ref.current.contains(e.target as HTMLElement)) setOpen(false);\n  });\n\n  useEffect(() => {\n    window.addEventListener('click', onClick);\n\n    return () => {\n      window.removeEventListener('click', onClick);\n    };\n  }, []);\n\n  return (\n    <TocPopoverContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n        }),\n        [setOpen, open],\n      )}\n    >\n      <Collapsible\n        open={open}\n        onOpenChange={setOpen}\n        data-toc-popover=\"\"\n        className={cn('relative h-9 animate-fd-fade-in', className)}\n        {...rest}\n      >\n        <header\n          ref={ref}\n          className={cn(\n            'absolute w-full bottom-0 border rounded-xl transition-colors bg-fd-secondary text-fd-secondary-foreground backdrop-blur-sm',\n            open && 'shadow-lg bg-fd-popover/80 text-fd-popover-foreground',\n          )}\n        >\n          {children}\n        </header>\n      </Collapsible>\n    </TocPopoverContext>\n  );\n}\n\nexport function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>) {\n  const { text } = useI18n();\n  const { open } = use(TocPopoverContext)!;\n  const items = useTOCItems();\n  const active = useActiveAnchor();\n  const selected = useMemo(\n    () => items.findIndex((item) => active === item.url.slice(1)),\n    [items, active],\n  );\n  const path = useTreePath().at(-1);\n  const spanProps = {\n    transition: {\n      duration: 0.1,\n    },\n    initial: {\n      opacity: 0,\n      y: 10,\n    },\n    animate: {\n      opacity: 1,\n      y: 0,\n    },\n    exit: {\n      opacity: 0,\n      y: -10,\n    },\n    className: cn(open && 'text-fd-popover-foreground'),\n  };\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        'flex w-full h-8.5 items-center text-sm text-fd-muted-foreground gap-2.5 px-2 text-start focus-visible:outline-none [&_svg]:size-4',\n        className,\n      )}\n      data-toc-popover-trigger=\"\"\n      {...props}\n    >\n      <ProgressCircle\n        value={(selected + 1) / Math.max(1, items.length)}\n        max={1}\n        className={cn('shrink-0', open && 'text-fd-primary')}\n      />\n      <AnimatePresence mode=\"wait\">\n        {items[selected] && selected !== -1 && !open ? (\n          <motion.span key={selected} {...spanProps}>\n            {items[selected].title}\n          </motion.span>\n        ) : path ? (\n          <motion.span key={path.$id ?? ':pathId'} {...spanProps}>\n            {path.name}\n          </motion.span>\n        ) : (\n          <motion.span key=\":toc\" {...spanProps}>\n            {text.toc}\n          </motion.span>\n        )}\n      </AnimatePresence>\n\n      <ChevronDown className={cn('ms-auto shrink-0 transition-transform', open && 'rotate-180')} />\n    </CollapsibleTrigger>\n  );\n}\n\ninterface ProgressCircleProps extends Omit<React.ComponentProps<'svg'>, 'strokeWidth'> {\n  value: number;\n  strokeWidth?: number;\n  size?: number;\n  min?: number;\n  max?: number;\n}\n\nfunction clamp(input: number, min: number, max: number): number {\n  if (input < min) return min;\n  if (input > max) return max;\n  return input;\n}\n\nfunction ProgressCircle({\n  value,\n  strokeWidth = 2,\n  size = 24,\n  min = 0,\n  max = 100,\n  ...restSvgProps\n}: ProgressCircleProps) {\n  const normalizedValue = clamp(value, min, max);\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const progress = (normalizedValue / max) * circumference;\n  const circleProps = {\n    cx: size / 2,\n    cy: size / 2,\n    r: radius,\n    fill: 'none',\n    strokeWidth,\n  };\n\n  return (\n    <svg\n      role=\"progressbar\"\n      viewBox={`0 0 ${size} ${size}`}\n      aria-valuenow={normalizedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      {...restSvgProps}\n    >\n      <circle {...circleProps} className=\"stroke-current/25\" />\n      <circle\n        {...circleProps}\n        stroke=\"currentColor\"\n        strokeDasharray={circumference}\n        strokeDashoffset={circumference - progress}\n        strokeLinecap=\"round\"\n        transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        className=\"transition-all\"\n      />\n    </svg>\n  );\n}\n\nexport function PageTOCPopoverContent(props: ComponentProps<'div'>) {\n  return (\n    <CollapsibleContent\n      data-toc-popover-content=\"\"\n      {...props}\n      className={cn('flex flex-col px-2 max-h-[50vh]', props.className)}\n    >\n      {props.children}\n    </CollapsibleContent>\n  );\n}\n\nexport function PageLastUpdate({\n  date: value,\n  ...props\n}: Omit<ComponentProps<'p'>, 'children'> & { date: Date }) {\n  const { text } = useI18n();\n  const [date, setDate] = useState('');\n\n  useEffect(() => {\n    // to the timezone of client\n    setDate(value.toLocaleDateString());\n  }, [value]);\n\n  return (\n    <p {...props} className={cn('text-sm text-fd-muted-foreground', props.className)}>\n      {text.lastUpdate} {date}\n    </p>\n  );\n}\n\ntype Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;\nexport interface FooterProps extends ComponentProps<'div'> {\n  /**\n   * Items including information for the next and previous page\n   */\n  items?: {\n    previous?: Item;\n    next?: Item;\n  };\n}\n\nexport function PageFooter({ items, children, className, ...props }: FooterProps) {\n  const footerList = useFooterItems();\n  const pathname = usePathname();\n  const { previous, next } = useMemo(() => {\n    if (items) return items;\n\n    const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));\n\n    if (idx === -1) return {};\n    return {\n      previous: footerList[idx - 1],\n      next: footerList[idx + 1],\n    };\n  }, [footerList, items, pathname]);\n\n  return (\n    <>\n      <div\n        className={cn(\n          '@container grid gap-4',\n          previous && next ? 'grid-cols-2' : 'grid-cols-1',\n          className,\n        )}\n        {...props}\n      >\n        {previous && <FooterItem item={previous} index={0} />}\n        {next && <FooterItem item={next} index={1} />}\n      </div>\n      {children}\n    </>\n  );\n}\n\nfunction FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {\n  const { text } = useI18n();\n  const Icon = index === 0 ? ChevronLeft : ChevronRight;\n\n  return (\n    <Link\n      href={item.url}\n      className={cn(\n        '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',\n        index === 1 && 'text-end',\n      )}\n    >\n      <div\n        className={cn(\n          'inline-flex items-center gap-1.5 font-medium',\n          index === 1 && 'flex-row-reverse',\n        )}\n      >\n        <Icon className=\"-mx-1 size-4 shrink-0 rtl:rotate-180\" />\n        <p>{item.name}</p>\n      </div>\n      <p className=\"text-fd-muted-foreground truncate\">\n        {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}\n      </p>\n    </Link>\n  );\n}\n\nexport type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;\n\nexport function PageBreadcrumb({\n  includeRoot,\n  includeSeparator,\n  includePage,\n  ...props\n}: BreadcrumbProps) {\n  const path = useTreePath();\n  const { root } = useTreeContext();\n  const items = useMemo(() => {\n    return getBreadcrumbItemsFromPath(root, path, {\n      includePage,\n      includeSeparator,\n      includeRoot,\n    });\n  }, [includePage, includeRoot, includeSeparator, path, root]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className)}\n    >\n      {items.map((item, i) => {\n        const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');\n\n        return (\n          <Fragment key={i}>\n            {i !== 0 && <ChevronRight className=\"size-3.5 shrink-0\" />}\n            {item.url ? (\n              <Link\n                href={item.url}\n                className={cn(className, 'transition-opacity hover:opacity-80')}\n              >\n                {item.name}\n              </Link>\n            ) : (\n              <span className={className}>{item.name}</span>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"client.js","names":[],"sources":["../../../../src/layouts/flux/page/client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport Link from 'fumadocs-core/link';\nimport { cn } from '@/utils/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';\nimport { isActive } from '@/utils/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from 'fumadocs-core/toc';\nimport { useFooterItems } from '@/utils/use-footer-items';\nimport { createPortal } from 'react-dom';\nimport { AnimatePresence, motion } from 'motion/react';\n\nconst TocPopoverContext = createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n} | null>(null);\n\nexport function PageTOCPopover(props: ComponentProps<'div'>) {\n  const [container, setContainer] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    const element = document.getElementById('flux-layout-slot');\n    if (!element) return;\n    setContainer(element);\n  }, []);\n\n  if (!container) return;\n  return createPortal(<PageTOCPopoverPhysical {...props} />, container);\n}\n\nfunction PageTOCPopoverPhysical({ className, children, ...rest }: ComponentProps<'div'>) {\n  const ref = useRef<HTMLElement>(null);\n  const [open, setOpen] = useState(false);\n\n  const onClick = useEffectEvent((e: Event) => {\n    if (!open) return;\n\n    if (ref.current && !ref.current.contains(e.target as HTMLElement)) setOpen(false);\n  });\n\n  useEffect(() => {\n    window.addEventListener('click', onClick);\n\n    return () => {\n      window.removeEventListener('click', onClick);\n    };\n  }, []);\n\n  return (\n    <TocPopoverContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n        }),\n        [setOpen, open],\n      )}\n    >\n      <Collapsible\n        open={open}\n        onOpenChange={setOpen}\n        data-toc-popover=\"\"\n        className={cn('relative h-9 animate-fd-fade-in', className)}\n        {...rest}\n      >\n        <header\n          ref={ref}\n          className={cn(\n            'absolute w-full bottom-0 border rounded-xl transition-colors bg-fd-secondary text-fd-secondary-foreground backdrop-blur-sm',\n            open && 'shadow-lg bg-fd-popover/80 text-fd-popover-foreground',\n          )}\n        >\n          {children}\n        </header>\n      </Collapsible>\n    </TocPopoverContext>\n  );\n}\n\nexport function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>) {\n  const { text } = useI18n();\n  const { open } = use(TocPopoverContext)!;\n  const items = useTOCItems();\n  const active = useActiveAnchor();\n  const selected = useMemo(\n    () => items.findIndex((item) => active === item.url.slice(1)),\n    [items, active],\n  );\n  const path = useTreePath().at(-1);\n  const spanProps = {\n    transition: {\n      duration: 0.1,\n    },\n    initial: {\n      opacity: 0,\n      y: 10,\n    },\n    animate: {\n      opacity: 1,\n      y: 0,\n    },\n    exit: {\n      opacity: 0,\n      y: -10,\n    },\n    className: cn(open && 'text-fd-popover-foreground'),\n  };\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        'flex w-full h-8.5 items-center text-sm text-fd-muted-foreground gap-2.5 px-2 text-start focus-visible:outline-none [&_svg]:size-4',\n        className,\n      )}\n      data-toc-popover-trigger=\"\"\n      {...props}\n    >\n      <ProgressCircle\n        value={(selected + 1) / Math.max(1, items.length)}\n        max={1}\n        className={cn('shrink-0', open && 'text-fd-primary')}\n      />\n      <AnimatePresence mode=\"wait\">\n        {items[selected] && selected !== -1 && !open ? (\n          <motion.span key={selected} {...spanProps}>\n            {items[selected].title}\n          </motion.span>\n        ) : path ? (\n          <motion.span key={path.$id ?? ':pathId'} {...spanProps}>\n            {path.name}\n          </motion.span>\n        ) : (\n          <motion.span key=\":toc\" {...spanProps}>\n            {text.toc}\n          </motion.span>\n        )}\n      </AnimatePresence>\n\n      <ChevronDown className={cn('ms-auto shrink-0 transition-transform', open && 'rotate-180')} />\n    </CollapsibleTrigger>\n  );\n}\n\ninterface ProgressCircleProps extends Omit<React.ComponentProps<'svg'>, 'strokeWidth'> {\n  value: number;\n  strokeWidth?: number;\n  size?: number;\n  min?: number;\n  max?: number;\n}\n\nfunction clamp(input: number, min: number, max: number): number {\n  if (input < min) return min;\n  if (input > max) return max;\n  return input;\n}\n\nfunction ProgressCircle({\n  value,\n  strokeWidth = 2,\n  size = 24,\n  min = 0,\n  max = 100,\n  ...restSvgProps\n}: ProgressCircleProps) {\n  const normalizedValue = clamp(value, min, max);\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const progress = (normalizedValue / max) * circumference;\n  const circleProps = {\n    cx: size / 2,\n    cy: size / 2,\n    r: radius,\n    fill: 'none',\n    strokeWidth,\n  };\n\n  return (\n    <svg\n      role=\"progressbar\"\n      viewBox={`0 0 ${size} ${size}`}\n      aria-valuenow={normalizedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      {...restSvgProps}\n    >\n      <circle {...circleProps} className=\"stroke-current/25\" />\n      <circle\n        {...circleProps}\n        stroke=\"currentColor\"\n        strokeDasharray={circumference}\n        strokeDashoffset={circumference - progress}\n        strokeLinecap=\"round\"\n        transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        className=\"transition-all\"\n      />\n    </svg>\n  );\n}\n\nexport function PageTOCPopoverContent(props: ComponentProps<'div'>) {\n  return (\n    <CollapsibleContent\n      data-toc-popover-content=\"\"\n      {...props}\n      className={cn('flex flex-col px-2 max-h-[50vh]', props.className)}\n    >\n      {props.children}\n    </CollapsibleContent>\n  );\n}\n\nexport function PageLastUpdate({\n  date: value,\n  ...props\n}: Omit<ComponentProps<'p'>, 'children'> & { date: Date }) {\n  const { text } = useI18n();\n  const [date, setDate] = useState('');\n\n  useEffect(() => {\n    // to the timezone of client\n    setDate(value.toLocaleDateString());\n  }, [value]);\n\n  return (\n    <p {...props} className={cn('text-sm text-fd-muted-foreground', props.className)}>\n      {text.lastUpdate} {date}\n    </p>\n  );\n}\n\ntype Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;\nexport interface FooterProps extends ComponentProps<'div'> {\n  /**\n   * Items including information for the next and previous page\n   */\n  items?: {\n    previous?: Item;\n    next?: Item;\n  };\n}\n\nexport function PageFooter({ items, children, className, ...props }: FooterProps) {\n  const footerList = useFooterItems();\n  const pathname = usePathname();\n  const { previous, next } = useMemo(() => {\n    if (items) return items;\n\n    const idx = footerList.findIndex((item) => isActive(item.url, pathname));\n\n    if (idx === -1) return {};\n    return {\n      previous: footerList[idx - 1],\n      next: footerList[idx + 1],\n    };\n  }, [footerList, items, pathname]);\n\n  return (\n    <>\n      <div\n        className={cn(\n          '@container grid gap-4',\n          previous && next ? 'grid-cols-2' : 'grid-cols-1',\n          className,\n        )}\n        {...props}\n      >\n        {previous && <FooterItem item={previous} index={0} />}\n        {next && <FooterItem item={next} index={1} />}\n      </div>\n      {children}\n    </>\n  );\n}\n\nfunction FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {\n  const { text } = useI18n();\n  const Icon = index === 0 ? ChevronLeft : ChevronRight;\n\n  return (\n    <Link\n      href={item.url}\n      className={cn(\n        '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',\n        index === 1 && 'text-end',\n      )}\n    >\n      <div\n        className={cn(\n          'inline-flex items-center gap-1.5 font-medium',\n          index === 1 && 'flex-row-reverse',\n        )}\n      >\n        <Icon className=\"-mx-1 size-4 shrink-0 rtl:rotate-180\" />\n        <p>{item.name}</p>\n      </div>\n      <p className=\"text-fd-muted-foreground truncate\">\n        {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}\n      </p>\n    </Link>\n  );\n}\n\nexport type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;\n\nexport function PageBreadcrumb({\n  includeRoot,\n  includeSeparator,\n  includePage,\n  ...props\n}: BreadcrumbProps) {\n  const path = useTreePath();\n  const { root } = useTreeContext();\n  const items = useMemo(() => {\n    return getBreadcrumbItemsFromPath(root, path, {\n      includePage,\n      includeSeparator,\n      includeRoot,\n    });\n  }, [includePage, includeRoot, includeSeparator, path, root]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className)}\n    >\n      {items.map((item, i) => {\n        const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');\n\n        return (\n          <Fragment key={i}>\n            {i !== 0 && <ChevronRight className=\"size-3.5 shrink-0\" />}\n            {item.url ? (\n              <Link\n                href={item.url}\n                className={cn(className, 'transition-opacity hover:opacity-80')}\n              >\n                {item.name}\n              </Link>\n            ) : (\n              <span className={className}>{item.name}</span>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/layouts/notebook/client.d.ts

@@ -41,7 +41,7 @@ declare function NavbarLinkItem({
   ...props
 }: {
   item: LinkItemType;
-} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 //#endregion
 export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, LayoutInfo, NavbarLinkItem };
 //# sourceMappingURL=client.d.ts.map

package/dist/layouts/notebook/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","names":[],"sources":["../../../src/layouts/notebook/client.tsx"],"mappings":";;;;;;;cAuBa,aAAA,EAAa,KAAA,CAAA,OAAA,EAAA,UAAA;;;UAOT,UAAA;EACf,OAAA;EACA,OAAA;AAAA;AAAA,iBAGc,qBAAA,CAAA;EACd,kBAAA;EACA,OAAA;EACA,OAAA;EACA;AAAA,GACC,UAAA;EACD,kBAAA;EACA,QAAA,EAAU,SAAA;AAAA,IACX,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBe,YAAA,CAAa,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAW5C,UAAA,CAAA;EAAa,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqC1E,gBAAA,CAAA;EACd,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,OAAA,EAAS,mBAAA;AAAA,IACV,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgCe,cAAA,CAAA;EACd,IAAA;EACA,SAAA;EAAA,GACG;AAAA;EACA,IAAA,EAAM,YAAA;AAAA,IAAiB,cAAA,CAAe,WAAA,yCAAY,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA"}
+{"version":3,"file":"client.d.ts","names":[],"sources":["../../../src/layouts/notebook/client.tsx"],"mappings":";;;;;;;cAuBa,aAAA,EAAa,KAAA,CAAA,OAAA,EAAA,UAAA;;;UAOT,UAAA;EACf,OAAA;EACA,OAAA;AAAA;AAAA,iBAGc,qBAAA,CAAA;EACd,kBAAA;EACA,OAAA;EACA,OAAA;EACA;AAAA,GACC,UAAA;EACD,kBAAA;EACA,QAAA,EAAU,SAAA;AAAA,IACX,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBe,YAAA,CAAa,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAW5C,UAAA,CAAA;EAAa,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqC1E,gBAAA,CAAA;EACd,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,OAAA,EAAS,mBAAA;AAAA,IACV,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgCe,cAAA,CAAA;EACd,IAAA;EACA,SAAA;EAAA,GACG;AAAA;EACA,IAAA,EAAM,YAAA;AAAA,IAAiB,cAAA,CAAe,WAAA,yCAAY,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/layouts/notebook/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":[],"sources":["../../../src/layouts/notebook/client.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@/utils/cn';\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  type HTMLAttributes,\n  type PointerEvent,\n  type ReactNode,\n  use,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { ChevronDown } from 'lucide-react';\nimport Link from 'fumadocs-core/link';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { isTabActive, type SidebarTabWithProps } from '@/components/sidebar/tabs/dropdown';\nimport { useIsScrollTop } from '@/utils/use-is-scroll-top';\nimport { LinkItem, type LinkItemType, type MenuItemType } from '@/utils/link-item';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nexport const LayoutContext = createContext<\n  | (LayoutInfo & {\n      isNavTransparent: boolean;\n    })\n  | null\n>(null);\n\nexport interface LayoutInfo {\n  tabMode: 'sidebar' | 'navbar';\n  navMode: 'top' | 'auto';\n}\n\nexport function LayoutContextProvider({\n  navTransparentMode = 'none',\n  navMode,\n  tabMode,\n  children,\n}: LayoutInfo & {\n  navTransparentMode?: 'always' | 'top' | 'none';\n  children: ReactNode;\n}) {\n  const isTop = useIsScrollTop({ enabled: navTransparentMode === 'top' }) ?? true;\n  const isNavTransparent = navTransparentMode === 'top' ? isTop : navTransparentMode === 'always';\n\n  return (\n    <LayoutContext\n      value={useMemo(\n        () => ({\n          isNavTransparent,\n          navMode,\n          tabMode,\n        }),\n        [isNavTransparent, navMode, tabMode],\n      )}\n    >\n      {children}\n    </LayoutContext>\n  );\n}\n\nexport function LayoutHeader(props: ComponentProps<'header'>) {\n  const { open } = useSidebar();\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  return (\n    <header data-transparent={isNavTransparent && !open} {...props}>\n      {props.children}\n    </header>\n  );\n}\n\nexport function LayoutBody({ className, style, children, ...props }: ComponentProps<'div'>) {\n  const { navMode } = use(LayoutContext)!;\n  const { collapsed } = useSidebar();\n  const pageCol =\n    'calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))';\n\n  return (\n    <div\n      id=\"nd-notebook-layout\"\n      className={cn(\n        'grid overflow-x-clip min-h-(--fd-docs-height) transition-[grid-template-columns] auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',\n        className,\n      )}\n      style={\n        {\n          gridTemplate:\n            navMode === 'top'\n              ? `\". header header header .\"\n        \"sidebar sidebar toc-popover toc-popover .\"\n        \"sidebar sidebar main toc .\" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`\n              : `\"sidebar sidebar header header .\"\n        \"sidebar sidebar toc-popover toc-popover .\"\n        \"sidebar sidebar main toc .\" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`,\n          '--fd-docs-row-1': 'var(--fd-banner-height, 0px)',\n          '--fd-docs-row-2': 'calc(var(--fd-docs-row-1) + var(--fd-header-height))',\n          '--fd-docs-row-3': 'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',\n          '--fd-sidebar-col': collapsed ? '0px' : 'var(--fd-sidebar-width)',\n          ...style,\n        } as object\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function LayoutHeaderTabs({\n  options,\n  className,\n  ...props\n}: ComponentProps<'div'> & {\n  options: SidebarTabWithProps[];\n}) {\n  const pathname = usePathname();\n  const selectedIdx = useMemo(() => {\n    return options.findLastIndex((option) => isTabActive(option, pathname));\n  }, [options, pathname]);\n\n  return (\n    <div className={cn('flex flex-row items-end gap-6', className)} {...props}>\n      {options.map((option, i) => {\n        const { title, url, unlisted, props: { className, ...rest } = {} } = option;\n        const isSelected = selectedIdx === i;\n\n        return (\n          <Link\n            key={i}\n            href={url}\n            className={cn(\n              'inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground',\n              unlisted && !isSelected && 'hidden',\n              isSelected && 'border-fd-primary text-fd-primary',\n              className,\n            )}\n            {...rest}\n          >\n            {title}\n          </Link>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function NavbarLinkItem({\n  item,\n  className,\n  ...props\n}: { item: LinkItemType } & HTMLAttributes<HTMLElement>) {\n  if (item.type === 'custom') return item.children;\n\n  if (item.type === 'menu') {\n    return <NavbarLinkItemMenu item={item} className={className} {...props} />;\n  }\n\n  return (\n    <LinkItem\n      item={item}\n      className={cn(\n        'text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary',\n        className,\n      )}\n      {...props}\n    >\n      {item.text}\n    </LinkItem>\n  );\n}\n\nfunction NavbarLinkItemMenu({\n  item,\n  hoverDelay = 50,\n  className,\n  ...props\n}: { item: MenuItemType; hoverDelay?: number } & HTMLAttributes<HTMLElement>) {\n  const [open, setOpen] = useState(false);\n  const timeoutRef = useRef<number>(null);\n  const freezeUntil = useRef<number>(null);\n\n  const delaySetOpen = (value: boolean) => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n\n    timeoutRef.current = window.setTimeout(() => {\n      setOpen(value);\n      freezeUntil.current = Date.now() + 300;\n    }, hoverDelay);\n  };\n  const onPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return;\n    delaySetOpen(true);\n  };\n  const onPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return;\n    delaySetOpen(false);\n  };\n  function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n  }\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(value) => {\n        if (freezeUntil.current === null || Date.now() >= freezeUntil.current) setOpen(value);\n      }}\n    >\n      <PopoverTrigger\n        className={cn(\n          'inline-flex items-center gap-1.5 p-1 text-sm text-fd-muted-foreground transition-colors has-data-[active=true]:text-fd-primary data-[state=open]:text-fd-accent-foreground focus-visible:outline-none',\n          className,\n        )}\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n        {...props}\n      >\n        {item.url ? <LinkItem item={item as { url: string }}>{item.text}</LinkItem> : item.text}\n        <ChevronDown className=\"size-3\" />\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"flex flex-col p-1 text-fd-muted-foreground text-start\"\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n      >\n        {item.items.map((child, i) => {\n          if (child.type === 'custom') return <Fragment key={i}>{child.children}</Fragment>;\n\n          return (\n            <LinkItem\n              key={i}\n              item={child}\n              className=\"inline-flex items-center gap-2 rounded-md p-2 transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground data-[active=true]:text-fd-primary [&_svg]:size-4\"\n              onClick={() => {\n                if (isTouchDevice()) setOpen(false);\n              }}\n            >\n              {child.icon}\n              {child.text}\n            </LinkItem>\n          );\n        })}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"client.js","names":[],"sources":["../../../src/layouts/notebook/client.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@/utils/cn';\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  type HTMLAttributes,\n  type PointerEvent,\n  type ReactNode,\n  use,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { ChevronDown } from 'lucide-react';\nimport Link from 'fumadocs-core/link';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { isTabActive, type SidebarTabWithProps } from '@/components/sidebar/tabs/dropdown';\nimport { useIsScrollTop } from '@/utils/use-is-scroll-top';\nimport { LinkItem, type LinkItemType, type MenuItemType } from '@/utils/link-item';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nexport const LayoutContext = createContext<\n  | (LayoutInfo & {\n      isNavTransparent: boolean;\n    })\n  | null\n>(null);\n\nexport interface LayoutInfo {\n  tabMode: 'sidebar' | 'navbar';\n  navMode: 'top' | 'auto';\n}\n\nexport function LayoutContextProvider({\n  navTransparentMode = 'none',\n  navMode,\n  tabMode,\n  children,\n}: LayoutInfo & {\n  navTransparentMode?: 'always' | 'top' | 'none';\n  children: ReactNode;\n}) {\n  const isTop = useIsScrollTop({ enabled: navTransparentMode === 'top' }) ?? true;\n  const isNavTransparent = navTransparentMode === 'top' ? isTop : navTransparentMode === 'always';\n\n  return (\n    <LayoutContext\n      value={useMemo(\n        () => ({\n          isNavTransparent,\n          navMode,\n          tabMode,\n        }),\n        [isNavTransparent, navMode, tabMode],\n      )}\n    >\n      {children}\n    </LayoutContext>\n  );\n}\n\nexport function LayoutHeader(props: ComponentProps<'header'>) {\n  const { open } = useSidebar();\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  return (\n    <header data-transparent={isNavTransparent && !open} {...props}>\n      {props.children}\n    </header>\n  );\n}\n\nexport function LayoutBody({ className, style, children, ...props }: ComponentProps<'div'>) {\n  const { navMode } = use(LayoutContext)!;\n  const { collapsed } = useSidebar();\n  const pageCol =\n    'calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))';\n\n  return (\n    <div\n      id=\"nd-notebook-layout\"\n      className={cn(\n        'grid overflow-x-clip min-h-(--fd-docs-height) transition-[grid-template-columns] auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',\n        className,\n      )}\n      style={\n        {\n          gridTemplate:\n            navMode === 'top'\n              ? `\". header header header .\"\n        \"sidebar sidebar toc-popover toc-popover .\"\n        \"sidebar sidebar main toc .\" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`\n              : `\"sidebar sidebar header header .\"\n        \"sidebar sidebar toc-popover toc-popover .\"\n        \"sidebar sidebar main toc .\" 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`,\n          '--fd-docs-row-1': 'var(--fd-banner-height, 0px)',\n          '--fd-docs-row-2': 'calc(var(--fd-docs-row-1) + var(--fd-header-height))',\n          '--fd-docs-row-3': 'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',\n          '--fd-sidebar-col': collapsed ? '0px' : 'var(--fd-sidebar-width)',\n          ...style,\n        } as object\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function LayoutHeaderTabs({\n  options,\n  className,\n  ...props\n}: ComponentProps<'div'> & {\n  options: SidebarTabWithProps[];\n}) {\n  const pathname = usePathname();\n  const selectedIdx = useMemo(() => {\n    return options.findLastIndex((option) => isTabActive(option, pathname));\n  }, [options, pathname]);\n\n  return (\n    <div className={cn('flex flex-row items-end gap-6', className)} {...props}>\n      {options.map((option, i) => {\n        const { title, url, unlisted, props: { className, ...rest } = {} } = option;\n        const isSelected = selectedIdx === i;\n\n        return (\n          <Link\n            key={i}\n            href={url}\n            className={cn(\n              'inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground',\n              unlisted && !isSelected && 'hidden',\n              isSelected && 'border-fd-primary text-fd-primary',\n              className,\n            )}\n            {...rest}\n          >\n            {title}\n          </Link>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function NavbarLinkItem({\n  item,\n  className,\n  ...props\n}: { item: LinkItemType } & HTMLAttributes<HTMLElement>) {\n  if (item.type === 'custom') return item.children;\n\n  if (item.type === 'menu') {\n    return <NavbarLinkItemMenu item={item} className={className} {...props} />;\n  }\n\n  return (\n    <LinkItem\n      item={item}\n      className={cn(\n        'text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary',\n        className,\n      )}\n      {...props}\n    >\n      {item.text}\n    </LinkItem>\n  );\n}\n\nfunction NavbarLinkItemMenu({\n  item,\n  hoverDelay = 50,\n  className,\n  ...props\n}: { item: MenuItemType; hoverDelay?: number } & HTMLAttributes<HTMLElement>) {\n  const [open, setOpen] = useState(false);\n  const timeoutRef = useRef<number>(null);\n  const freezeUntil = useRef<number>(null);\n\n  const delaySetOpen = (value: boolean) => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n\n    timeoutRef.current = window.setTimeout(() => {\n      setOpen(value);\n      freezeUntil.current = Date.now() + 300;\n    }, hoverDelay);\n  };\n  const onPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return;\n    delaySetOpen(true);\n  };\n  const onPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return;\n    delaySetOpen(false);\n  };\n  function isTouchDevice() {\n    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n  }\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(value) => {\n        if (freezeUntil.current === null || Date.now() >= freezeUntil.current) setOpen(value);\n      }}\n    >\n      <PopoverTrigger\n        className={cn(\n          'inline-flex items-center gap-1.5 p-1 text-sm text-fd-muted-foreground transition-colors has-data-[active=true]:text-fd-primary data-[state=open]:text-fd-accent-foreground focus-visible:outline-none',\n          className,\n        )}\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n        {...props}\n      >\n        {item.url ? <LinkItem item={item as never}>{item.text}</LinkItem> : item.text}\n        <ChevronDown className=\"size-3\" />\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"flex flex-col p-1 text-fd-muted-foreground text-start\"\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n      >\n        {item.items.map((child, i) => {\n          if (child.type === 'custom') return <Fragment key={i}>{child.children}</Fragment>;\n\n          return (\n            <LinkItem\n              key={i}\n              item={child}\n              className=\"inline-flex items-center gap-2 rounded-md p-2 transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground data-[active=true]:text-fd-primary [&_svg]:size-4\"\n              onClick={() => {\n                if (isTouchDevice()) setOpen(false);\n              }}\n            >\n              {child.icon}\n              {child.text}\n            </LinkItem>\n          );\n        })}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/dist/layouts/notebook/page/client.js

@@ -150,7 +150,7 @@ function PageFooter({ items, children, className, ...props }) {
 	const pathname = usePathname();
 	const { previous, next } = useMemo(() => {
 		if (items) return items;
-		const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));
+		const idx = footerList.findIndex((item) => isActive(item.url, pathname));
 		if (idx === -1) return {};
 		return {
 			previous: footerList[idx - 1],

package/dist/layouts/notebook/page/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":[],"sources":["../../../../src/layouts/notebook/page/client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport Link from 'fumadocs-core/link';\nimport { cn } from '@/utils/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';\nimport { isActive } from '@/utils/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from 'fumadocs-core/toc';\nimport { LayoutContext } from '../client';\nimport { useFooterItems } from '@/utils/use-footer-items';\n\nconst TocPopoverContext = createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n} | null>(null);\n\nexport function PageTOCPopover({ className, children, ...rest }: ComponentProps<'div'>) {\n  const ref = useRef<HTMLElement>(null);\n  const [open, setOpen] = useState(false);\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  const onClick = useEffectEvent((e: Event) => {\n    if (!open) return;\n\n    if (ref.current && !ref.current.contains(e.target as HTMLElement)) setOpen(false);\n  });\n\n  useEffect(() => {\n    window.addEventListener('click', onClick);\n\n    return () => {\n      window.removeEventListener('click', onClick);\n    };\n  }, []);\n\n  return (\n    <TocPopoverContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n        }),\n        [setOpen, open],\n      )}\n    >\n      <Collapsible\n        open={open}\n        onOpenChange={setOpen}\n        data-toc-popover=\"\"\n        className={cn(\n          '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)]',\n          className,\n        )}\n        {...rest}\n      >\n        <header\n          ref={ref}\n          className={cn(\n            'border-b backdrop-blur-sm transition-colors',\n            (!isNavTransparent || open) && 'bg-fd-background/80',\n            open && 'shadow-lg',\n          )}\n        >\n          {children}\n        </header>\n      </Collapsible>\n    </TocPopoverContext>\n  );\n}\n\nexport function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>) {\n  const { text } = useI18n();\n  const { open } = use(TocPopoverContext)!;\n  const items = useTOCItems();\n  const active = useActiveAnchor();\n  const selected = useMemo(\n    () => items.findIndex((item) => active === item.url.slice(1)),\n    [items, active],\n  );\n  const path = useTreePath().at(-1);\n  const showItem = selected !== -1 && !open;\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        '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',\n        className,\n      )}\n      data-toc-popover-trigger=\"\"\n      {...props}\n    >\n      <ProgressCircle\n        value={(selected + 1) / Math.max(1, items.length)}\n        max={1}\n        className={cn('shrink-0', open && 'text-fd-primary')}\n      />\n      <span className=\"grid flex-1 *:my-auto *:row-start-1 *:col-start-1\">\n        <span\n          className={cn(\n            'truncate transition-all',\n            open && 'text-fd-foreground',\n            showItem && 'opacity-0 -translate-y-full pointer-events-none',\n          )}\n        >\n          {path?.name ?? text.toc}\n        </span>\n        <span\n          className={cn(\n            'truncate transition-all',\n            !showItem && 'opacity-0 translate-y-full pointer-events-none',\n          )}\n        >\n          {items[selected]?.title}\n        </span>\n      </span>\n      <ChevronDown className={cn('shrink-0 transition-transform mx-0.5', open && 'rotate-180')} />\n    </CollapsibleTrigger>\n  );\n}\n\ninterface ProgressCircleProps extends Omit<React.ComponentProps<'svg'>, 'strokeWidth'> {\n  value: number;\n  strokeWidth?: number;\n  size?: number;\n  min?: number;\n  max?: number;\n}\n\nfunction clamp(input: number, min: number, max: number): number {\n  if (input < min) return min;\n  if (input > max) return max;\n  return input;\n}\n\nfunction ProgressCircle({\n  value,\n  strokeWidth = 2,\n  size = 24,\n  min = 0,\n  max = 100,\n  ...restSvgProps\n}: ProgressCircleProps) {\n  const normalizedValue = clamp(value, min, max);\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const progress = (normalizedValue / max) * circumference;\n  const circleProps = {\n    cx: size / 2,\n    cy: size / 2,\n    r: radius,\n    fill: 'none',\n    strokeWidth,\n  };\n\n  return (\n    <svg\n      role=\"progressbar\"\n      viewBox={`0 0 ${size} ${size}`}\n      aria-valuenow={normalizedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      {...restSvgProps}\n    >\n      <circle {...circleProps} className=\"stroke-current/25\" />\n      <circle\n        {...circleProps}\n        stroke=\"currentColor\"\n        strokeDasharray={circumference}\n        strokeDashoffset={circumference - progress}\n        strokeLinecap=\"round\"\n        transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        className=\"transition-all\"\n      />\n    </svg>\n  );\n}\n\nexport function PageTOCPopoverContent(props: ComponentProps<'div'>) {\n  return (\n    <CollapsibleContent\n      data-toc-popover-content=\"\"\n      {...props}\n      className={cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className)}\n    >\n      {props.children}\n    </CollapsibleContent>\n  );\n}\n\nexport function PageLastUpdate({\n  date: value,\n  ...props\n}: Omit<ComponentProps<'p'>, 'children'> & { date: Date }) {\n  const { text } = useI18n();\n  const [date, setDate] = useState('');\n\n  useEffect(() => {\n    // to the timezone of client\n    setDate(value.toLocaleDateString());\n  }, [value]);\n\n  return (\n    <p {...props} className={cn('text-sm text-fd-muted-foreground', props.className)}>\n      {text.lastUpdate} {date}\n    </p>\n  );\n}\n\ntype Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;\nexport interface FooterProps extends ComponentProps<'div'> {\n  /**\n   * Items including information for the next and previous page\n   */\n  items?: {\n    previous?: Item;\n    next?: Item;\n  };\n}\n\nexport function PageFooter({ items, children, className, ...props }: FooterProps) {\n  const footerList = useFooterItems();\n  const pathname = usePathname();\n  const { previous, next } = useMemo(() => {\n    if (items) return items;\n\n    const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));\n\n    if (idx === -1) return {};\n    return {\n      previous: footerList[idx - 1],\n      next: footerList[idx + 1],\n    };\n  }, [footerList, items, pathname]);\n\n  return (\n    <>\n      <div\n        className={cn(\n          '@container grid gap-4',\n          previous && next ? 'grid-cols-2' : 'grid-cols-1',\n          className,\n        )}\n        {...props}\n      >\n        {previous && <FooterItem item={previous} index={0} />}\n        {next && <FooterItem item={next} index={1} />}\n      </div>\n      {children}\n    </>\n  );\n}\n\nfunction FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {\n  const { text } = useI18n();\n  const Icon = index === 0 ? ChevronLeft : ChevronRight;\n\n  return (\n    <Link\n      href={item.url}\n      className={cn(\n        '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',\n        index === 1 && 'text-end',\n      )}\n    >\n      <div\n        className={cn(\n          'inline-flex items-center gap-1.5 font-medium',\n          index === 1 && 'flex-row-reverse',\n        )}\n      >\n        <Icon className=\"-mx-1 size-4 shrink-0 rtl:rotate-180\" />\n        <p>{item.name}</p>\n      </div>\n      <p className=\"text-fd-muted-foreground truncate\">\n        {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}\n      </p>\n    </Link>\n  );\n}\n\nexport type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;\n\nexport function PageBreadcrumb({\n  includeRoot,\n  includeSeparator,\n  includePage,\n  ...props\n}: BreadcrumbProps) {\n  const path = useTreePath();\n  const { root } = useTreeContext();\n  const items = useMemo(() => {\n    return getBreadcrumbItemsFromPath(root, path, {\n      includePage,\n      includeSeparator,\n      includeRoot,\n    });\n  }, [includePage, includeRoot, includeSeparator, path, root]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className)}\n    >\n      {items.map((item, i) => {\n        const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');\n\n        return (\n          <Fragment key={i}>\n            {i !== 0 && <ChevronRight className=\"size-3.5 shrink-0\" />}\n            {item.url ? (\n              <Link\n                href={item.url}\n                className={cn(className, 'transition-opacity hover:opacity-80')}\n              >\n                {item.name}\n              </Link>\n            ) : (\n              <span className={className}>{item.name}</span>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"client.js","names":[],"sources":["../../../../src/layouts/notebook/page/client.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport Link from 'fumadocs-core/link';\nimport { cn } from '@/utils/cn';\nimport { useI18n } from '@/contexts/i18n';\nimport { useTreeContext, useTreePath } from '@/contexts/tree';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';\nimport { isActive } from '@/utils/urls';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\nimport { useTOCItems } from '@/components/toc';\nimport { useActiveAnchor } from 'fumadocs-core/toc';\nimport { LayoutContext } from '../client';\nimport { useFooterItems } from '@/utils/use-footer-items';\n\nconst TocPopoverContext = createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n} | null>(null);\n\nexport function PageTOCPopover({ className, children, ...rest }: ComponentProps<'div'>) {\n  const ref = useRef<HTMLElement>(null);\n  const [open, setOpen] = useState(false);\n  const { isNavTransparent } = use(LayoutContext)!;\n\n  const onClick = useEffectEvent((e: Event) => {\n    if (!open) return;\n\n    if (ref.current && !ref.current.contains(e.target as HTMLElement)) setOpen(false);\n  });\n\n  useEffect(() => {\n    window.addEventListener('click', onClick);\n\n    return () => {\n      window.removeEventListener('click', onClick);\n    };\n  }, []);\n\n  return (\n    <TocPopoverContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n        }),\n        [setOpen, open],\n      )}\n    >\n      <Collapsible\n        open={open}\n        onOpenChange={setOpen}\n        data-toc-popover=\"\"\n        className={cn(\n          '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)]',\n          className,\n        )}\n        {...rest}\n      >\n        <header\n          ref={ref}\n          className={cn(\n            'border-b backdrop-blur-sm transition-colors',\n            (!isNavTransparent || open) && 'bg-fd-background/80',\n            open && 'shadow-lg',\n          )}\n        >\n          {children}\n        </header>\n      </Collapsible>\n    </TocPopoverContext>\n  );\n}\n\nexport function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>) {\n  const { text } = useI18n();\n  const { open } = use(TocPopoverContext)!;\n  const items = useTOCItems();\n  const active = useActiveAnchor();\n  const selected = useMemo(\n    () => items.findIndex((item) => active === item.url.slice(1)),\n    [items, active],\n  );\n  const path = useTreePath().at(-1);\n  const showItem = selected !== -1 && !open;\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        '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',\n        className,\n      )}\n      data-toc-popover-trigger=\"\"\n      {...props}\n    >\n      <ProgressCircle\n        value={(selected + 1) / Math.max(1, items.length)}\n        max={1}\n        className={cn('shrink-0', open && 'text-fd-primary')}\n      />\n      <span className=\"grid flex-1 *:my-auto *:row-start-1 *:col-start-1\">\n        <span\n          className={cn(\n            'truncate transition-all',\n            open && 'text-fd-foreground',\n            showItem && 'opacity-0 -translate-y-full pointer-events-none',\n          )}\n        >\n          {path?.name ?? text.toc}\n        </span>\n        <span\n          className={cn(\n            'truncate transition-all',\n            !showItem && 'opacity-0 translate-y-full pointer-events-none',\n          )}\n        >\n          {items[selected]?.title}\n        </span>\n      </span>\n      <ChevronDown className={cn('shrink-0 transition-transform mx-0.5', open && 'rotate-180')} />\n    </CollapsibleTrigger>\n  );\n}\n\ninterface ProgressCircleProps extends Omit<React.ComponentProps<'svg'>, 'strokeWidth'> {\n  value: number;\n  strokeWidth?: number;\n  size?: number;\n  min?: number;\n  max?: number;\n}\n\nfunction clamp(input: number, min: number, max: number): number {\n  if (input < min) return min;\n  if (input > max) return max;\n  return input;\n}\n\nfunction ProgressCircle({\n  value,\n  strokeWidth = 2,\n  size = 24,\n  min = 0,\n  max = 100,\n  ...restSvgProps\n}: ProgressCircleProps) {\n  const normalizedValue = clamp(value, min, max);\n  const radius = (size - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const progress = (normalizedValue / max) * circumference;\n  const circleProps = {\n    cx: size / 2,\n    cy: size / 2,\n    r: radius,\n    fill: 'none',\n    strokeWidth,\n  };\n\n  return (\n    <svg\n      role=\"progressbar\"\n      viewBox={`0 0 ${size} ${size}`}\n      aria-valuenow={normalizedValue}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      {...restSvgProps}\n    >\n      <circle {...circleProps} className=\"stroke-current/25\" />\n      <circle\n        {...circleProps}\n        stroke=\"currentColor\"\n        strokeDasharray={circumference}\n        strokeDashoffset={circumference - progress}\n        strokeLinecap=\"round\"\n        transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        className=\"transition-all\"\n      />\n    </svg>\n  );\n}\n\nexport function PageTOCPopoverContent(props: ComponentProps<'div'>) {\n  return (\n    <CollapsibleContent\n      data-toc-popover-content=\"\"\n      {...props}\n      className={cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className)}\n    >\n      {props.children}\n    </CollapsibleContent>\n  );\n}\n\nexport function PageLastUpdate({\n  date: value,\n  ...props\n}: Omit<ComponentProps<'p'>, 'children'> & { date: Date }) {\n  const { text } = useI18n();\n  const [date, setDate] = useState('');\n\n  useEffect(() => {\n    // to the timezone of client\n    setDate(value.toLocaleDateString());\n  }, [value]);\n\n  return (\n    <p {...props} className={cn('text-sm text-fd-muted-foreground', props.className)}>\n      {text.lastUpdate} {date}\n    </p>\n  );\n}\n\ntype Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;\nexport interface FooterProps extends ComponentProps<'div'> {\n  /**\n   * Items including information for the next and previous page\n   */\n  items?: {\n    previous?: Item;\n    next?: Item;\n  };\n}\n\nexport function PageFooter({ items, children, className, ...props }: FooterProps) {\n  const footerList = useFooterItems();\n  const pathname = usePathname();\n  const { previous, next } = useMemo(() => {\n    if (items) return items;\n\n    const idx = footerList.findIndex((item) => isActive(item.url, pathname));\n\n    if (idx === -1) return {};\n    return {\n      previous: footerList[idx - 1],\n      next: footerList[idx + 1],\n    };\n  }, [footerList, items, pathname]);\n\n  return (\n    <>\n      <div\n        className={cn(\n          '@container grid gap-4',\n          previous && next ? 'grid-cols-2' : 'grid-cols-1',\n          className,\n        )}\n        {...props}\n      >\n        {previous && <FooterItem item={previous} index={0} />}\n        {next && <FooterItem item={next} index={1} />}\n      </div>\n      {children}\n    </>\n  );\n}\n\nfunction FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {\n  const { text } = useI18n();\n  const Icon = index === 0 ? ChevronLeft : ChevronRight;\n\n  return (\n    <Link\n      href={item.url}\n      className={cn(\n        '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',\n        index === 1 && 'text-end',\n      )}\n    >\n      <div\n        className={cn(\n          'inline-flex items-center gap-1.5 font-medium',\n          index === 1 && 'flex-row-reverse',\n        )}\n      >\n        <Icon className=\"-mx-1 size-4 shrink-0 rtl:rotate-180\" />\n        <p>{item.name}</p>\n      </div>\n      <p className=\"text-fd-muted-foreground truncate\">\n        {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}\n      </p>\n    </Link>\n  );\n}\n\nexport type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;\n\nexport function PageBreadcrumb({\n  includeRoot,\n  includeSeparator,\n  includePage,\n  ...props\n}: BreadcrumbProps) {\n  const path = useTreePath();\n  const { root } = useTreeContext();\n  const items = useMemo(() => {\n    return getBreadcrumbItemsFromPath(root, path, {\n      includePage,\n      includeSeparator,\n      includeRoot,\n    });\n  }, [includePage, includeRoot, includeSeparator, path, root]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div\n      {...props}\n      className={cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className)}\n    >\n      {items.map((item, i) => {\n        const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');\n\n        return (\n          <Fragment key={i}>\n            {i !== 0 && <ChevronRight className=\"size-3.5 shrink-0\" />}\n            {item.url ? (\n              <Link\n                href={item.url}\n                className={cn(className, 'transition-opacity hover:opacity-80')}\n              >\n                {item.name}\n              </Link>\n            ) : (\n              <span className={className}>{item.name}</span>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType } from "../../utils/link-item.js";
+import { ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType, useLinkItemActive } from "../../utils/link-item.js";
 import * as react from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
@@ -62,7 +62,7 @@ declare function resolveLinkItems({
 declare function renderTitleNav({
   title,
   url
-}: Partial<NavOptions>, props: ComponentProps<'a'>): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}: Partial<NavOptions>, props: ComponentProps<'a'>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 declare function useLinkItems({
   githubUrl,
   links
@@ -72,5 +72,5 @@ declare function useLinkItems({
   all: LinkItemType[];
 };
 //#endregion
-export { BaseLayoutProps, ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType, NavOptions, renderTitleNav, resolveLinkItems, useLinkItems };
+export { BaseLayoutProps, ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType, NavOptions, renderTitleNav, resolveLinkItems, useLinkItemActive, useLinkItems };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/shared/index.tsx"],"mappings":";;;;;;;UAKiB,UAAA;EACf,OAAA;EACA,SAAA,EAAW,SAAA;EAEX,KAAA,GAAQ,SAAA,KAAc,KAAA,EAAO,cAAA,UAAwB,SAAA;EAJtC;;;;EAUf,GAAA;EAN6B;;;;;EAa7B,eAAA;EAEA,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,eAAA;EACf,WAAA;IACE,OAAA;IACA,SAAA,GAAY,SAAA;IACZ,IAAA;EAAA;EAGF,YAAA,GAAe,OAAA;IACb,OAAA;IACA,UAAA,EAAY,OAAA;MACV,EAAA,EAAI,SAAA;MACJ,EAAA,EAAI,SAAA;IAAA;EAAA;;;;;;EASR,IAAA,aAAiB,UAAA;EAAA;;;EAKjB,SAAA;EAEA,KAAA,GAAQ,YAAA;EAMY;;;EAFpB,GAAA,GAAM,OAAA,CAAQ,UAAA;EAEd,QAAA,GAAW,SAAA;AAAA;;;;iBAMG,gBAAA,CAAA;EACd,KAAA;EACA;AAAA,GACC,IAAA,CAAK,eAAA,2BAA0C,YAAA;AAAA,iBAoBlC,cAAA,CAAA;EACZ,KAAA;EAAO;AAAA,GAAa,OAAA,CAAQ,UAAA,GAC9B,KAAA,EAAO,cAAA,6CAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA;AAAA,iBAUZ,YAAA,CAAA;EAAe,SAAA;EAAW;AAAA,GAAS,IAAA,CAAK,eAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/shared/index.tsx"],"mappings":";;;;;;;UAKiB,UAAA;EACf,OAAA;EACA,SAAA,EAAW,SAAA;EAEX,KAAA,GAAQ,SAAA,KAAc,KAAA,EAAO,cAAA,UAAwB,SAAA;EAJtC;;;;EAUf,GAAA;EAN6B;;;;;EAa7B,eAAA;EAEA,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,eAAA;EACf,WAAA;IACE,OAAA;IACA,SAAA,GAAY,SAAA;IACZ,IAAA;EAAA;EAGF,YAAA,GAAe,OAAA;IACb,OAAA;IACA,UAAA,EAAY,OAAA;MACV,EAAA,EAAI,SAAA;MACJ,EAAA,EAAI,SAAA;IAAA;EAAA;;;;;;EASR,IAAA,aAAiB,UAAA;EAAA;;;EAKjB,SAAA;EAEA,KAAA,GAAQ,YAAA;EAMY;;;EAFpB,GAAA,GAAM,OAAA,CAAQ,UAAA;EAEd,QAAA,GAAW,SAAA;AAAA;;;;iBAMG,gBAAA,CAAA;EACd,KAAA;EACA;AAAA,GACC,IAAA,CAAK,eAAA,2BAA0C,YAAA;AAAA,iBAoBlC,cAAA,CAAA;EACZ,KAAA;EAAO;AAAA,GAAa,OAAA,CAAQ,UAAA,GAC9B,KAAA,EAAO,cAAA,6CAAmB,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUZ,YAAA,CAAA;EAAe,SAAA;EAAW;AAAA,GAAS,IAAA,CAAK,eAAA"}

package/dist/utils/link-item.d.ts

@@ -79,8 +79,9 @@ declare function LinkItem({
   item,
   ...props
 }: Omit<ComponentProps<'a'>, 'href'> & {
-  item: WithHref;
+  item: LinkItemType & WithHref;
 }): react_jsx_runtime0.JSX.Element;
+declare function useLinkItemActive(link: LinkItemType): boolean;
 //#endregion
-export { ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType };
+export { ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType, useLinkItemActive };
 //# sourceMappingURL=link-item.d.ts.map

package/dist/utils/link-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-item.d.ts","names":[],"sources":["../../src/utils/link-item.tsx"],"mappings":";;;;UAMU,UAAA;;;AAL6C;;;EAWrD,EAAA;AAAA;AAAA,UAGQ,QAAA;EACR,GAAA;;;;;;EAMA,MAAA;EACA,QAAA;AAAA;AAAA,UAGe,YAAA,SAAqB,QAAA,EAAU,UAAA;EAC9C,IAAA;EACA,IAAA,GAAO,SAAA;EACP,IAAA,EAAM,SAAA;EACN,WAAA,GAAc,SAAA;AAAA;AAAA,UAGC,YAAA,SAAqB,QAAA,EAAU,UAAA;EAC9C,IAAA;EARwD;;;EAYxD,KAAA;EACA,IAAA,EAAM,SAAA;EACN,IAAA,EAAM,SAAA;EAXN;;;EAeA,SAAA;AAAA;AAAA,UAGe,cAAA,SAAuB,QAAA,EAAU,UAAA;EAChD,IAAA;EACA,IAAA,GAAO,SAAA;EACP,IAAA,EAAM,SAAA;EAXA;;;EAeN,SAAA;AAAA;AAAA,UAGe,YAAA,SAAqB,OAAA,CAAQ,QAAA,GAAW,UAAA;EACvD,IAAA;EACA,IAAA,GAAO,SAAA;EACP,IAAA,EAAM,SAAA;EAEN,KAAA,IACK,YAAA;IAxBL;;;IA4BM,IAAA,GAAO,cAAA;MACL,MAAA,GAAS,SAAA;IAAA;EAAA,KAGb,cAAA;EAxBW;;;EA8Bf,SAAA;AAAA;AAAA,UAGe,cAAA,SAAuB,UAAA;EACtC,IAAA;EAlC0D;;;EAsC1D,SAAA;EACA,QAAA,EAAU,SAAA;AAAA;AAAA,KAGA,YAAA,GACR,YAAA,GACA,YAAA,GACA,cAAA,GACA,YAAA,GACA,cAAA;AAAA,iBAEY,QAAA,CAAA;EACd,GAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,IAAA,CAAK,cAAA;EAAiC,IAAA,EAAM,QAAA;AAAA,IAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"link-item.d.ts","names":[],"sources":["../../src/utils/link-item.tsx"],"mappings":";;;;UAMU,UAAA;;;AAL6C;;;EAWrD,EAAA;AAAA;AAAA,UAGQ,QAAA;EACR,GAAA;;;;;;EAMA,MAAA;EACA,QAAA;AAAA;AAAA,UAGe,YAAA,SAAqB,QAAA,EAAU,UAAA;EAC9C,IAAA;EACA,IAAA,GAAO,SAAA;EACP,IAAA,EAAM,SAAA;EACN,WAAA,GAAc,SAAA;AAAA;AAAA,UAGC,YAAA,SAAqB,QAAA,EAAU,UAAA;EAC9C,IAAA;EARwD;;;EAYxD,KAAA;EACA,IAAA,EAAM,SAAA;EACN,IAAA,EAAM,SAAA;EAXN;;;EAeA,SAAA;AAAA;AAAA,UAGe,cAAA,SAAuB,QAAA,EAAU,UAAA;EAChD,IAAA;EACA,IAAA,GAAO,SAAA;EACP,IAAA,EAAM,SAAA;EAXA;;;EAeN,SAAA;AAAA;AAAA,UAGe,YAAA,SAAqB,OAAA,CAAQ,QAAA,GAAW,UAAA;EACvD,IAAA;EACA,IAAA,GAAO,SAAA;EACP,IAAA,EAAM,SAAA;EAEN,KAAA,IACK,YAAA;IAxBL;;;IA4BM,IAAA,GAAO,cAAA;MACL,MAAA,GAAS,SAAA;IAAA;EAAA,KAGb,cAAA;EAxBW;;;EA8Bf,SAAA;AAAA;AAAA,UAGe,cAAA,SAAuB,UAAA;EACtC,IAAA;EAlC0D;;;EAsC1D,SAAA;EACA,QAAA,EAAU,SAAA;AAAA;AAAA,KAGA,YAAA,GACR,YAAA,GACA,YAAA,GACA,cAAA,GACA,YAAA,GACA,cAAA;AAAA,iBAEY,QAAA,CAAA;EACd,GAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,IAAA,CAAK,cAAA;EAAiC,IAAA,EAAM,YAAA,GAAe,QAAA;AAAA,IAAU,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUxD,iBAAA,CAAkB,IAAA,EAAM,YAAA"}

package/dist/utils/link-item.js

@@ -7,9 +7,7 @@ import Link from "fumadocs-core/link";
 
 //#region src/utils/link-item.tsx
 function LinkItem({ ref, item, ...props }) {
-	const pathname = usePathname();
-	const activeType = item.active ?? "url";
-	const active = activeType !== "none" && isActive(item.url, pathname, activeType === "nested-url");
+	const active = useLinkItemActive(item);
 	return /* @__PURE__ */ jsx(Link, {
 		ref,
 		href: item.url,
@@ -19,7 +17,13 @@ function LinkItem({ ref, item, ...props }) {
 		children: props.children
 	});
 }
+function useLinkItemActive(link) {
+	const pathname = usePathname();
+	if (link.type === "custom" || !link.url) return false;
+	if (link.active === "none") return false;
+	return isActive(link.url, pathname, link.active === "nested-url");
+}
 
 //#endregion
-export { LinkItem };
+export { LinkItem, useLinkItemActive };
 //# sourceMappingURL=link-item.js.map

package/dist/utils/link-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-item.js","names":[],"sources":["../../src/utils/link-item.tsx"],"sourcesContent":["'use client';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { isActive } from './urls';\nimport Link from 'fumadocs-core/link';\n\ninterface Filterable {\n  /**\n   * Restrict where the item is displayed\n   *\n   * @defaultValue 'all'\n   */\n  on?: 'menu' | 'nav' | 'all';\n}\n\ninterface WithHref {\n  url: string;\n  /**\n   * When the item is marked as active\n   *\n   * @defaultValue 'url'\n   */\n  active?: 'url' | 'nested-url' | 'none';\n  external?: boolean;\n}\n\nexport interface MainItemType extends WithHref, Filterable {\n  type?: 'main';\n  icon?: ReactNode;\n  text: ReactNode;\n  description?: ReactNode;\n}\n\nexport interface IconItemType extends WithHref, Filterable {\n  type: 'icon';\n  /**\n   * `aria-label` of icon button\n   */\n  label?: string;\n  icon: ReactNode;\n  text: ReactNode;\n  /**\n   * @defaultValue true\n   */\n  secondary?: boolean;\n}\n\nexport interface ButtonItemType extends WithHref, Filterable {\n  type: 'button';\n  icon?: ReactNode;\n  text: ReactNode;\n  /**\n   * @defaultValue false\n   */\n  secondary?: boolean;\n}\n\nexport interface MenuItemType extends Partial<WithHref>, Filterable {\n  type: 'menu';\n  icon?: ReactNode;\n  text: ReactNode;\n\n  items: (\n    | (MainItemType & {\n        /**\n         * Options when displayed on navigation menu\n         */\n        menu?: ComponentProps<'a'> & {\n          banner?: ReactNode;\n        };\n      })\n    | CustomItemType\n  )[];\n\n  /**\n   * @defaultValue false\n   */\n  secondary?: boolean;\n}\n\nexport interface CustomItemType extends Filterable {\n  type: 'custom';\n  /**\n   * @defaultValue false\n   */\n  secondary?: boolean;\n  children: ReactNode;\n}\n\nexport type LinkItemType =\n  | MainItemType\n  | IconItemType\n  | ButtonItemType\n  | MenuItemType\n  | CustomItemType;\n\nexport function LinkItem({\n  ref,\n  item,\n  ...props\n}: Omit<ComponentProps<'a'>, 'href'> & { item: WithHref }) {\n  const pathname = usePathname();\n  const activeType = item.active ?? 'url';\n  const active = activeType !== 'none' && isActive(item.url, pathname, activeType === 'nested-url');\n\n  return (\n    <Link ref={ref} href={item.url} external={item.external} {...props} data-active={active}>\n      {props.children}\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;AAgGA,SAAgB,SAAS,EACvB,KACA,MACA,GAAG,SACsD;CACzD,MAAM,WAAW,aAAa;CAC9B,MAAM,aAAa,KAAK,UAAU;CAClC,MAAM,SAAS,eAAe,UAAU,SAAS,KAAK,KAAK,UAAU,eAAe,aAAa;AAEjG,QACE,oBAAC;EAAU;EAAK,MAAM,KAAK;EAAK,UAAU,KAAK;EAAU,GAAI;EAAO,eAAa;YAC9E,MAAM;GACF"}
+{"version":3,"file":"link-item.js","names":[],"sources":["../../src/utils/link-item.tsx"],"sourcesContent":["'use client';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { isActive } from './urls';\nimport Link from 'fumadocs-core/link';\n\ninterface Filterable {\n  /**\n   * Restrict where the item is displayed\n   *\n   * @defaultValue 'all'\n   */\n  on?: 'menu' | 'nav' | 'all';\n}\n\ninterface WithHref {\n  url: string;\n  /**\n   * When the item is marked as active\n   *\n   * @defaultValue 'url'\n   */\n  active?: 'url' | 'nested-url' | 'none';\n  external?: boolean;\n}\n\nexport interface MainItemType extends WithHref, Filterable {\n  type?: 'main';\n  icon?: ReactNode;\n  text: ReactNode;\n  description?: ReactNode;\n}\n\nexport interface IconItemType extends WithHref, Filterable {\n  type: 'icon';\n  /**\n   * `aria-label` of icon button\n   */\n  label?: string;\n  icon: ReactNode;\n  text: ReactNode;\n  /**\n   * @defaultValue true\n   */\n  secondary?: boolean;\n}\n\nexport interface ButtonItemType extends WithHref, Filterable {\n  type: 'button';\n  icon?: ReactNode;\n  text: ReactNode;\n  /**\n   * @defaultValue false\n   */\n  secondary?: boolean;\n}\n\nexport interface MenuItemType extends Partial<WithHref>, Filterable {\n  type: 'menu';\n  icon?: ReactNode;\n  text: ReactNode;\n\n  items: (\n    | (MainItemType & {\n        /**\n         * Options when displayed on navigation menu\n         */\n        menu?: ComponentProps<'a'> & {\n          banner?: ReactNode;\n        };\n      })\n    | CustomItemType\n  )[];\n\n  /**\n   * @defaultValue false\n   */\n  secondary?: boolean;\n}\n\nexport interface CustomItemType extends Filterable {\n  type: 'custom';\n  /**\n   * @defaultValue false\n   */\n  secondary?: boolean;\n  children: ReactNode;\n}\n\nexport type LinkItemType =\n  | MainItemType\n  | IconItemType\n  | ButtonItemType\n  | MenuItemType\n  | CustomItemType;\n\nexport function LinkItem({\n  ref,\n  item,\n  ...props\n}: Omit<ComponentProps<'a'>, 'href'> & { item: LinkItemType & WithHref }) {\n  const active = useLinkItemActive(item);\n\n  return (\n    <Link ref={ref} href={item.url} external={item.external} {...props} data-active={active}>\n      {props.children}\n    </Link>\n  );\n}\n\nexport function useLinkItemActive(link: LinkItemType) {\n  const pathname = usePathname();\n\n  if (link.type === 'custom' || !link.url) return false;\n  if (link.active === 'none') return false;\n\n  return isActive(link.url, pathname, link.active === 'nested-url');\n}\n"],"mappings":";;;;;;;;AAgGA,SAAgB,SAAS,EACvB,KACA,MACA,GAAG,SACqE;CACxE,MAAM,SAAS,kBAAkB,KAAK;AAEtC,QACE,oBAAC;EAAU;EAAK,MAAM,KAAK;EAAK,UAAU,KAAK;EAAU,GAAI;EAAO,eAAa;YAC9E,MAAM;GACF;;AAIX,SAAgB,kBAAkB,MAAoB;CACpD,MAAM,WAAW,aAAa;AAE9B,KAAI,KAAK,SAAS,YAAY,CAAC,KAAK,IAAK,QAAO;AAChD,KAAI,KAAK,WAAW,OAAQ,QAAO;AAEnC,QAAO,SAAS,KAAK,KAAK,UAAU,KAAK,WAAW,aAAa"}

package/dist/utils/urls.js

@@ -6,7 +6,7 @@ function normalize(urlOrPath) {
 /**
 * @returns if `href` is matching the given pathname
 */
-function isActive(href, pathname, nested = true) {
+function isActive(href, pathname, nested = false) {
 	href = normalize(href);
 	pathname = normalize(pathname);
 	return href === pathname || nested && pathname.startsWith(`${href}/`);

package/dist/utils/urls.js.map

@@ -1 +1 @@
-{"version":3,"file":"urls.js","names":[],"sources":["../../src/utils/urls.ts"],"sourcesContent":["export function normalize(urlOrPath: string) {\n  if (urlOrPath.length > 1 && urlOrPath.endsWith('/')) return urlOrPath.slice(0, -1);\n  return urlOrPath;\n}\n\n/**\n * @returns if `href` is matching the given pathname\n */\nexport function isActive(href: string, pathname: string, nested = true): boolean {\n  href = normalize(href);\n  pathname = normalize(pathname);\n\n  return href === pathname || (nested && pathname.startsWith(`${href}/`));\n}\n"],"mappings":";AAAA,SAAgB,UAAU,WAAmB;AAC3C,KAAI,UAAU,SAAS,KAAK,UAAU,SAAS,IAAI,CAAE,QAAO,UAAU,MAAM,GAAG,GAAG;AAClF,QAAO;;;;;AAMT,SAAgB,SAAS,MAAc,UAAkB,SAAS,MAAe;AAC/E,QAAO,UAAU,KAAK;AACtB,YAAW,UAAU,SAAS;AAE9B,QAAO,SAAS,YAAa,UAAU,SAAS,WAAW,GAAG,KAAK,GAAG"}
+{"version":3,"file":"urls.js","names":[],"sources":["../../src/utils/urls.ts"],"sourcesContent":["export function normalize(urlOrPath: string) {\n  if (urlOrPath.length > 1 && urlOrPath.endsWith('/')) return urlOrPath.slice(0, -1);\n  return urlOrPath;\n}\n\n/**\n * @returns if `href` is matching the given pathname\n */\nexport function isActive(href: string, pathname: string, nested = false): boolean {\n  href = normalize(href);\n  pathname = normalize(pathname);\n\n  return href === pathname || (nested && pathname.startsWith(`${href}/`));\n}\n"],"mappings":";AAAA,SAAgB,UAAU,WAAmB;AAC3C,KAAI,UAAU,SAAS,KAAK,UAAU,SAAS,IAAI,CAAE,QAAO,UAAU,MAAM,GAAG,GAAG;AAClF,QAAO;;;;;AAMT,SAAgB,SAAS,MAAc,UAAkB,SAAS,OAAgB;AAChF,QAAO,UAAU,KAAK;AACtB,YAAW,UAAU,SAAS;AAE9B,QAAO,SAAS,YAAa,UAAU,SAAS,WAAW,GAAG,KAAK,GAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fumadocs/base-ui",
-  "version": "16.6.1",
+  "version": "16.6.2",
   "description": "The Base UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -118,7 +118,7 @@
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.2.4",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.6.1",
+    "fumadocs-core": "16.6.2",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -127,7 +127,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwindcss": "^4.0.0",
-    "fumadocs-core": "16.6.1"
+    "fumadocs-core": "16.6.2"
   },
   "peerDependenciesMeta": {
     "next": {