@fumadocs/base-ui 16.8.12 → 16.9.1

package/dist/layouts/notebook/page/slots/breadcrumb.js

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../../../../utils/cn.js";
 import { useTreeContext, useTreePath } from "../../../../contexts/tree.js";
-import { Fragment, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
+import { Fragment as Fragment$1, useMemo } from "react";
 import { getBreadcrumbItemsFromPath } from "fumadocs-core/breadcrumb";
 //#region src/layouts/notebook/page/slots/breadcrumb.tsx
 function Breadcrumb({ includeRoot, includeSeparator, includePage, ...props }) {
@@ -29,7 +29,7 @@ function Breadcrumb({ includeRoot, includeSeparator, includePage, ...props }) {
 		className: cn("flex items-center gap-1.5 text-sm text-fd-muted-foreground", props.className),
 		children: items.map((item, i) => {
 			const className = cn("truncate", i === items.length - 1 && "text-fd-primary font-medium");
-			return /* @__PURE__ */ jsxs(Fragment, { children: [i !== 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0" }), item.url ? /* @__PURE__ */ jsx(Link, {
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [i !== 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0" }), item.url ? /* @__PURE__ */ jsx(Link, {
 				href: item.url,
 				className: cn(className, "transition-opacity hover:opacity-80"),
 				children: item.name

package/dist/layouts/notebook/page/slots/container.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 
 //#region src/layouts/notebook/page/slots/container.d.ts
 declare function Container(props: ComponentProps<'article'>): _$react_jsx_runtime0.JSX.Element;

package/dist/layouts/notebook/page/slots/footer.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 import * as PageTree from "fumadocs-core/page-tree";
 
 //#region src/layouts/notebook/page/slots/footer.d.ts

package/dist/layouts/notebook/page/slots/footer.js

@@ -1,13 +1,13 @@
 "use client";
-import { useI18n } from "../../../../contexts/i18n.js";
 import { cn } from "../../../../utils/cn.js";
+import { useTranslations } from "../../../../contexts/i18n.js";
 import { isActive } from "../../../../utils/urls.js";
 import { useFooterItems } from "../../../../utils/use-footer-items.js";
-import { useMemo } from "react";
-import { usePathname } from "fumadocs-core/framework";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useMemo } from "react";
 //#region src/layouts/notebook/page/slots/footer.tsx
 function Footer({ items, children, className, ...props }) {
 	const footerList = useFooterItems();
@@ -25,7 +25,7 @@ function Footer({ items, children, className, ...props }) {
 		items,
 		pathname
 	]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 		className: cn("@container grid gap-4", previous && next ? "grid-cols-2" : "grid-cols-1", className),
 		...props,
 		children: [previous && /* @__PURE__ */ jsx(FooterItem, {
@@ -38,7 +38,7 @@ function Footer({ items, children, className, ...props }) {
 	}), children] });
 }
 function FooterItem({ item, index }) {
-	const { text } = useI18n();
+	const t = useTranslations();
 	const Icon = index === 0 ? ChevronLeft : ChevronRight;
 	return /* @__PURE__ */ jsxs(Link, {
 		href: item.url,
@@ -48,7 +48,7 @@ function FooterItem({ item, index }) {
 			children: [/* @__PURE__ */ jsx(Icon, { className: "-mx-1 size-4 shrink-0 rtl:rotate-180" }), /* @__PURE__ */ jsx("p", { children: item.name })]
 		}), /* @__PURE__ */ jsx("p", {
 			className: "text-fd-muted-foreground truncate",
-			children: item.description ?? (index === 0 ? text.previousPage : text.nextPage)
+			children: item.description ?? (index === 0 ? t.previousPage : t.nextPage)
 		})]
 	});
 }

package/dist/layouts/notebook/page/slots/toc.d.ts

@@ -1,8 +1,8 @@
 import { TOCItemsProps } from "../../../../components/toc/clerk.js";
 import { TOCItemsProps as TOCItemsProps$1 } from "../../../../components/toc/default.js";
 import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
-import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps, ReactNode } from "react";
 
 //#region src/layouts/notebook/page/slots/toc.d.ts
 type TOCProviderProps = TOCProviderProps$1;

package/dist/layouts/notebook/page/slots/toc.js

@@ -1,15 +1,15 @@
 "use client";
-import { I18nLabel, useI18n } from "../../../../contexts/i18n.js";
 import { cn } from "../../../../utils/cn.js";
+import { I18nLabel, useTranslations } from "../../../../contexts/i18n.js";
 import { TOCProvider as TOCProvider$1, TOCScrollArea, useItems, useTOCItems } from "../../../../components/toc/index.js";
 import { default_exports } from "../../../../components/toc/default.js";
 import { clerk_exports } from "../../../../components/toc/clerk.js";
 import { useTreePath } from "../../../../contexts/tree.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
 import { useNotebookLayout } from "../../client.js";
-import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, Text } from "lucide-react";
+import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 //#region src/layouts/notebook/page/slots/toc.tsx
 function TOCProvider(props) {
 	return /* @__PURE__ */ jsx(TOCProvider$1, { ...props });
@@ -89,7 +89,7 @@ function TOCPopover({ container, trigger, content, header, footer, style = "norm
 	});
 }
 function PageTOCPopoverTrigger({ className, ...props }) {
-	const { text } = useI18n();
+	const t = useTranslations();
 	const { open } = use(TocPopoverContext);
 	const items = useItems();
 	const selectedIdx = items.findIndex((item) => item.active);
@@ -109,7 +109,7 @@ function PageTOCPopoverTrigger({ className, ...props }) {
 				className: "grid flex-1 *:my-auto *:row-start-1 *:col-start-1",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: cn("truncate transition-[opacity,translate,color]", open && "text-fd-foreground", showItem && "opacity-0 -translate-y-full pointer-events-none"),
-					children: path?.name ?? text.toc
+					children: path?.name ?? t.toc
 				}), /* @__PURE__ */ jsx("span", {
 					className: cn("truncate transition-[opacity,translate]", !showItem && "opacity-0 translate-y-full pointer-events-none"),
 					children: items[selectedIdx]?.original.title

package/dist/layouts/notebook/slots/container.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 
 //#region src/layouts/notebook/slots/container.d.ts
 declare function Container(props: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;

package/dist/layouts/notebook/slots/container.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../../utils/cn.js";
 import { useNotebookLayout } from "../client.js";
-import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 //#region src/layouts/notebook/slots/container.tsx
 function Container(props) {
 	const { props: { nav }, slots } = useNotebookLayout();

package/dist/layouts/notebook/slots/header.d.ts

@@ -1,6 +1,6 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
 import { ComponentProps } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/notebook/slots/header.d.ts
 declare function Header(props: ComponentProps<'header'>): string | number | bigint | true | _$react_jsx_runtime0.JSX.Element | Iterable<_$react.ReactNode> | Promise<string | number | bigint | boolean | _$react.ReactPortal | _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>> | Iterable<_$react.ReactNode> | null | undefined>;

package/dist/layouts/notebook/slots/header.js

@@ -5,11 +5,11 @@ import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/
 import { LinkItem } from "../../shared/client.js";
 import { isLayoutTabActive } from "../../shared/index.js";
 import { useNotebookLayout } from "../client.js";
-import { Fragment, useMemo, useRef, useState } from "react";
+import Link from "fumadocs-core/link";
 import { usePathname } from "fumadocs-core/framework";
 import { jsx, jsxs } from "react/jsx-runtime";
-import Link from "fumadocs-core/link";
 import { ChevronDown, Languages, Sidebar } from "lucide-react";
+import { Fragment as Fragment$1, useMemo, useRef, useState } from "react";
 //#region src/layouts/notebook/slots/header.tsx
 function Header(props) {
 	const { slots, navItems, isNavTransparent, props: { tabMode, nav, tabs, sidebar } } = useNotebookLayout();
@@ -177,7 +177,7 @@ function NavbarLinkItemMenu({ item, hoverDelay = 50, className, ...props }) {
 			onPointerEnter,
 			onPointerLeave,
 			children: item.items.map((child, i) => {
-				if (child.type === "custom") return /* @__PURE__ */ jsx(Fragment, { children: child.children }, i);
+				if (child.type === "custom") return /* @__PURE__ */ jsx(Fragment$1, { children: child.children }, i);
 				return /* @__PURE__ */ jsxs(LinkItem, {
 					item: child,
 					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",

package/dist/layouts/notebook/slots/sidebar.d.ts

@@ -1,8 +1,8 @@
 import { SidebarProviderProps as SidebarProviderProps$1, useSidebar as useSidebar$1 } from "../../../components/sidebar/base.js";
 import { LayoutTab } from "../../shared/index.js";
 import { SidebarPageTreeComponents } from "../../../components/sidebar/page-tree.js";
-import { ComponentProps, FC, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps, FC, ReactNode } from "react";
 
 //#region src/layouts/notebook/slots/sidebar.d.ts
 interface SidebarProps extends ComponentProps<'aside'> {

package/dist/layouts/notebook/slots/sidebar.js

@@ -9,12 +9,12 @@ import { SidebarCollapseTrigger as SidebarCollapseTrigger$1, SidebarContent as S
 import { createPageTreeRenderer } from "../../../components/sidebar/page-tree.js";
 import { createLinkItemRenderer } from "../../../components/sidebar/link-item.js";
 import { useNotebookLayout } from "../client.js";
-import { createElement, useMemo, useRef, useState } from "react";
-import { usePathname } from "fumadocs-core/framework";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronsUpDown, Languages, SidebarIcon, X } from "lucide-react";
 import { cva } from "class-variance-authority";
+import { createElement, useMemo, useRef, useState } from "react";
 //#region src/layouts/notebook/slots/sidebar.tsx
 const itemVariants = cva("relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0", { variants: {
 	variant: {
@@ -59,7 +59,7 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 	}) });
 }
 function SidebarDrawer({ children, className, ...props }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SidebarDrawerOverlay, { className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out" }), /* @__PURE__ */ jsx(SidebarDrawerContent, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarDrawerOverlay, { className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out" }), /* @__PURE__ */ jsx(SidebarDrawerContent, {
 		className: cn("fixed text-[0.9375rem] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out", className),
 		...props,
 		children
@@ -171,10 +171,10 @@ function Sidebar({ banner, footer, components, collapsible = true, ...rest }) {
 			className: cn("lg:hidden", i === arr.length - 1 && "mb-4")
 		}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })]
 	}) });
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
 		...rest,
 		children: [
-			renderHeader({ children: /* @__PURE__ */ jsxs(Fragment$1, { children: [navMode === "auto" && /* @__PURE__ */ jsxs("div", {
+			renderHeader({ children: /* @__PURE__ */ jsxs(Fragment, { children: [navMode === "auto" && /* @__PURE__ */ jsxs("div", {
 				className: "flex justify-between",
 				children: [
 					slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: "inline-flex items-center gap-2.5 font-medium" }),
@@ -210,7 +210,7 @@ function Sidebar({ banner, footer, components, collapsible = true, ...rest }) {
 	}), /* @__PURE__ */ jsxs(SidebarDrawer, {
 		...rest,
 		children: [
-			renderHeader({ children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SidebarTrigger, {
+			renderHeader({ children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarTrigger, {
 				className: cn(buttonVariants({
 					size: "icon-sm",
 					color: "ghost",
@@ -221,7 +221,7 @@ function Sidebar({ banner, footer, components, collapsible = true, ...rest }) {
 			viewport,
 			renderFooter({
 				className: cn("hidden flex-row text-fd-muted-foreground items-center border-t p-4 pt-2 justify-end", (slots.languageSelect || slots.themeSwitch) && "flex", iconLinks.length > 0 && "max-lg:flex"),
-				children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				children: /* @__PURE__ */ jsxs(Fragment, { children: [
 					iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
 						item,
 						className: cn(buttonVariants({
@@ -249,7 +249,7 @@ function SidebarTabsDropdown({ options, placeholder, ...props }) {
 		closeOnRedirect.current = false;
 		setOpen(false);
 	};
-	const item = selected ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+	const item = selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: "size-9 shrink-0 empty:hidden md:size-5",
 		children: selected.icon
 	}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {

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

@@ -2,8 +2,8 @@ import { LanguageSelectProps, LanguageSelectTextProps } from "./slots/language-s
 import { FullSearchTriggerProps, SearchTriggerProps } from "./slots/search-trigger.js";
 import { ThemeSwitchProps } from "./slots/theme-switch.js";
 import { BaseLayoutProps, LinkItemType } from "./index.js";
-import { ComponentProps, FC } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps, FC } from "react";
 
 //#region src/layouts/shared/client.d.ts
 declare function LinkItem({

package/dist/layouts/shared/client.js

@@ -4,9 +4,9 @@ import { LanguageSelect, LanguageSelectText } from "./slots/language-select.js";
 import { FullSearchTrigger, SearchTrigger } from "./slots/search-trigger.js";
 import { ThemeSwitch } from "./slots/theme-switch.js";
 import { isLinkItemActive } from "./index.js";
+import Link from "fumadocs-core/link";
 import { usePathname } from "fumadocs-core/framework";
 import { jsx } from "react/jsx-runtime";
-import Link from "fumadocs-core/link";
 //#region src/layouts/shared/client.tsx
 function LinkItem({ ref, item, ...props }) {
 	const active = isLinkItemActive(item, usePathname());

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

@@ -2,8 +2,8 @@ import { FullSearchTriggerProps, SearchTriggerProps } from "./slots/search-trigg
 import { ThemeSwitchProps } from "./slots/theme-switch.js";
 import { BaseSlots, BaseSlotsProps, LinkItem, baseSlots } from "./client.js";
 import { ComponentProps, FC, ReactNode } from "react";
-import * as PageTree from "fumadocs-core/page-tree";
 import { I18nConfig } from "fumadocs-core/i18n";
+import * as PageTree from "fumadocs-core/page-tree";
 
 //#region src/layouts/shared/index.d.ts
 interface NavOptions {

package/dist/layouts/shared/index.js

@@ -1,7 +1,7 @@
 import { isActive, normalize } from "../../utils/urls.js";
 import { LinkItem, baseSlots } from "./client.js";
-import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import * as PageTree from "fumadocs-core/page-tree";
 //#region src/layouts/shared/index.tsx
 const defaultTransform = (option, node) => {

package/dist/layouts/shared/page-actions.d.ts

@@ -1,6 +1,6 @@
 import { PopoverTrigger } from "../../components/ui/popover.js";
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 
 //#region src/layouts/shared/page-actions.d.ts
 /**

package/dist/layouts/shared/page-actions.js

@@ -2,17 +2,20 @@
 import { cn } from "../../utils/cn.js";
 import { buttonVariants } from "../../components/ui/button.js";
 import { useCopyButton } from "../../utils/use-copy-button.js";
+import { useTranslations } from "../../contexts/i18n.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
-import { useMemo, useState } from "react";
 import { usePathname } from "fumadocs-core/framework";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Copy, ExternalLinkIcon, TextIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { renderTranslation } from "fumadocs-core/i18n";
 //#region src/layouts/shared/page-actions.tsx
 const cache = /* @__PURE__ */ new Map();
 /**
 * see https://fumadocs.dev/docs/integrations/llms#page-actions to customize.
 */
 function MarkdownCopyButton({ markdownUrl, ...props }) {
+	const t = useTranslations();
 	const [isLoading, setLoading] = useState(false);
 	const [checked, onClick] = useCopyButton(async () => {
 		const cached = cache.get(markdownUrl);
@@ -35,7 +38,7 @@ function MarkdownCopyButton({ markdownUrl, ...props }) {
 			size: "sm",
 			className: "gap-2 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground"
 		}), props.className),
-		children: [checked ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), props.children ?? "Copy Markdown"]
+		children: [checked ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), props.children ?? t.pageActionsCopyMarkdown]
 	});
 }
 /**
@@ -43,11 +46,13 @@ function MarkdownCopyButton({ markdownUrl, ...props }) {
 */
 function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }) {
 	const pathname = usePathname();
+	const t = useTranslations();
 	const items = useMemo(() => {
-		const q = `Read ${typeof window === "undefined" ? pathname : new URL(pathname, window.location.origin)}, I want to ask questions about it.`;
+		const pageUrl = typeof window === "undefined" ? pathname : new URL(pathname, window.location.origin);
+		const q = renderTranslation(t.pageActionsOpenInLLMPrompt, { url: String(pageUrl) });
 		return [
 			githubUrl && {
-				title: "Open in GitHub",
+				title: t.pageActionsOpenGitHub,
 				href: githubUrl,
 				icon: /* @__PURE__ */ jsxs("svg", {
 					fill: "currentColor",
@@ -57,12 +62,12 @@ function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }) {
 				})
 			},
 			markdownUrl && {
-				title: "View as Markdown",
+				title: t.pageActionsViewMarkdown,
 				href: markdownUrl,
 				icon: /* @__PURE__ */ jsx(TextIcon, {})
 			},
 			{
-				title: "Open in Scira AI",
+				title: t.pageActionsOpenScira,
 				href: `https://scira.ai/?${new URLSearchParams({ q })}`,
 				icon: /* @__PURE__ */ jsxs("svg", {
 					width: "910",
@@ -123,7 +128,7 @@ function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }) {
 				})
 			},
 			{
-				title: "Open in ChatGPT",
+				title: t.pageActionsOpenChatGPT,
 				href: `https://chatgpt.com/?${new URLSearchParams({
 					hints: "search",
 					q
@@ -137,7 +142,7 @@ function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }) {
 				})
 			},
 			{
-				title: "Open in Claude",
+				title: t.pageActionsOpenClaude,
 				href: `https://claude.ai/new?${new URLSearchParams({ q })}`,
 				icon: /* @__PURE__ */ jsxs("svg", {
 					fill: "currentColor",
@@ -148,7 +153,7 @@ function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }) {
 				})
 			},
 			{
-				title: "Open in Cursor",
+				title: t.pageActionsOpenCursor,
 				icon: /* @__PURE__ */ jsxs("svg", {
 					fill: "currentColor",
 					role: "img",
@@ -162,7 +167,8 @@ function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }) {
 	}, [
 		githubUrl,
 		markdownUrl,
-		pathname
+		pathname,
+		t
 	]);
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
 		...props,
@@ -170,7 +176,7 @@ function ViewOptionsPopover({ markdownUrl, githubUrl, ...props }) {
 			color: "secondary",
 			size: "sm"
 		}), "gap-2 data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground", typeof props.className === "function" ? props.className(state) : props.className),
-		children: [props.children ?? "Open", /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-fd-muted-foreground" })]
+		children: [props.children ?? t.pageActionsOpen, /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-fd-muted-foreground" })]
 	}), /* @__PURE__ */ jsx(PopoverContent, {
 		className: "flex flex-col",
 		children: items.map((item) => /* @__PURE__ */ jsxs("a", {

package/dist/layouts/shared/slots/language-select.d.ts

@@ -1,7 +1,7 @@
 import { buttonVariants } from "../../../components/ui/button.js";
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
 
 //#region src/layouts/shared/slots/language-select.d.ts
 interface LanguageSelectProps extends ComponentProps<'button'> {

package/dist/layouts/shared/slots/language-select.js

@@ -1,7 +1,7 @@
 "use client";
-import { useI18n } from "../../../contexts/i18n.js";
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
+import { useI18n } from "../../../contexts/i18n.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/layouts/shared/slots/language-select.tsx

package/dist/layouts/shared/slots/search-trigger.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps } from "../../../components/ui/button.js";
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 
 //#region src/layouts/shared/slots/search-trigger.d.ts
 interface SearchTriggerProps extends Omit<ComponentProps<'button'>, 'color'>, ButtonProps {

package/dist/layouts/shared/slots/search-trigger.js

@@ -1,13 +1,14 @@
 "use client";
-import { useI18n } from "../../../contexts/i18n.js";
 import { cn } from "../../../utils/cn.js";
 import { buttonVariants } from "../../../components/ui/button.js";
+import { useTranslations } from "../../../contexts/i18n.js";
 import { useSearchContext } from "../../../contexts/search.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Search } from "lucide-react";
 //#region src/layouts/shared/slots/search-trigger.tsx
 function SearchTrigger({ hideIfDisabled, size = "icon-sm", color = "ghost", ...props }) {
 	const { setOpenSearch, enabled } = useSearchContext();
+	const t = useTranslations();
 	if (hideIfDisabled && !enabled) return null;
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -16,7 +17,7 @@ function SearchTrigger({ hideIfDisabled, size = "icon-sm", color = "ghost", ...p
 			color
 		}), props.className),
 		"data-search": "",
-		"aria-label": "Open Search",
+		"aria-label": t.searchOpen,
 		onClick: () => {
 			setOpenSearch(true);
 		},
@@ -25,7 +26,7 @@ function SearchTrigger({ hideIfDisabled, size = "icon-sm", color = "ghost", ...p
 }
 function FullSearchTrigger({ hideIfDisabled, ...props }) {
 	const { enabled, hotKey, setOpenSearch } = useSearchContext();
-	const { text } = useI18n();
+	const t = useTranslations();
 	if (hideIfDisabled && !enabled) return null;
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
@@ -37,7 +38,7 @@ function FullSearchTrigger({ hideIfDisabled, ...props }) {
 		},
 		children: [
 			/* @__PURE__ */ jsx(Search, { className: "size-4" }),
-			text.search,
+			t.search,
 			/* @__PURE__ */ jsx("div", {
 				className: "ms-auto inline-flex gap-0.5",
 				children: hotKey.map((k, i) => /* @__PURE__ */ jsx("kbd", {

package/dist/layouts/shared/slots/theme-switch.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 
 //#region src/layouts/shared/slots/theme-switch.d.ts
 interface ThemeSwitchProps extends ComponentProps<'div'> {

package/dist/layouts/shared/slots/theme-switch.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn } from "../../../utils/cn.js";
-import { useEffect, useState } from "react";
+import { useTranslations } from "../../../contexts/i18n.js";
 import { jsx } from "react/jsx-runtime";
 import { Airplay, Moon, Sun } from "lucide-react";
 import { cva } from "class-variance-authority";
+import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
 //#region src/layouts/shared/slots/theme-switch.tsx
 const itemVariants = cva("size-6.5 p-1.5 text-fd-muted-foreground", { variants: { active: {
@@ -11,13 +12,26 @@ const itemVariants = cva("size-6.5 p-1.5 text-fd-muted-foreground", { variants:
 	false: "text-fd-muted-foreground"
 } } });
 const full = [
-	["light", Sun],
-	["dark", Moon],
-	["system", Airplay]
+	[
+		"light",
+		Sun,
+		"themeLight"
+	],
+	[
+		"dark",
+		Moon,
+		"themeDark"
+	],
+	[
+		"system",
+		Airplay,
+		"themeSystem"
+	]
 ];
 function ThemeSwitch({ className, mode = "light-dark", ...props }) {
 	const { setTheme, theme, resolvedTheme } = useTheme();
 	const [mounted, setMounted] = useState(false);
+	const t = useTranslations();
 	useEffect(() => {
 		setMounted(true);
 	}, []);
@@ -26,7 +40,7 @@ function ThemeSwitch({ className, mode = "light-dark", ...props }) {
 		const value = mounted ? resolvedTheme : null;
 		return /* @__PURE__ */ jsx("button", {
 			className: container,
-			"aria-label": `Toggle Theme`,
+			"aria-label": t.themeToggle,
 			onClick: () => setTheme(value === "light" ? "dark" : "light"),
 			"data-theme-toggle": "",
 			children: full.map(([key, Icon]) => {
@@ -43,8 +57,8 @@ function ThemeSwitch({ className, mode = "light-dark", ...props }) {
 		className: container,
 		"data-theme-toggle": "",
 		...props,
-		children: full.map(([key, Icon]) => /* @__PURE__ */ jsx("button", {
-			"aria-label": key,
+		children: full.map(([key, Icon, label]) => /* @__PURE__ */ jsx("button", {
+			"aria-label": t[label],
 			className: cn(itemVariants({ active: value === key })),
 			onClick: () => setTheme(key),
 			children: /* @__PURE__ */ jsx(Icon, {

package/dist/mdx.d.ts

@@ -2,8 +2,8 @@ import { Callout, CalloutContainer, CalloutDescription, CalloutTitle } from "./c
 import { Card, Cards } from "./components/card.js";
 import { CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger } from "./components/codeblock.js";
 import { createRelativeLink as createRelativeLink$1 } from "./mdx.server.js";
-import React, { AnchorHTMLAttributes, FC, HTMLAttributes, ImgHTMLAttributes, TableHTMLAttributes } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import React, { AnchorHTMLAttributes, FC, HTMLAttributes, ImgHTMLAttributes, TableHTMLAttributes } from "react";
 
 //#region src/mdx.d.ts
 /**

package/dist/mdx.js

@@ -3,9 +3,9 @@ import { Card, Cards } from "./components/card.js";
 import { Callout, CalloutContainer, CalloutDescription, CalloutTitle } from "./components/callout.js";
 import { Heading } from "./components/heading.js";
 import { CodeBlock, CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, Pre } from "./components/codeblock.js";
+import Link from "fumadocs-core/link";
 import { Image } from "fumadocs-core/framework";
 import { jsx } from "react/jsx-runtime";
-import Link from "fumadocs-core/link";
 //#region src/mdx.tsx
 function Image$1(props) {
 	return /* @__PURE__ */ jsx(Image, {

package/dist/og/takumi.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import { ImageResponse, ImageResponseOptions } from "@takumi-rs/image-response";
 
 //#region src/og/takumi.d.ts

package/dist/og.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import { ImageResponse } from "next/og.js";
 import { ImageResponseOptions } from "next/dist/compiled/@vercel/og/types";
 

package/dist/page.d.ts

@@ -1,7 +1,7 @@
 import { Breadcrumb } from "./layouts/docs/page/slots/breadcrumb.js";
 import { DocsBody, DocsDescription, DocsPageProps as DocsPageProps$1, DocsTitle, EditOnGitHub, PageLastUpdate } from "./layouts/docs/page/index.js";
-import { ComponentProps } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
 
 //#region src/page.d.ts
 interface EditOnGitHubOptions extends Omit<ComponentProps<'a'>, 'href' | 'children'> {

package/dist/provider/base.d.ts

@@ -1,8 +1,8 @@
 import { SearchProviderProps } from "../contexts/search.js";
 import { DefaultSearchDialogProps } from "../components/dialog/search-default.js";
 import { I18nProviderProps } from "../contexts/i18n.js";
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import { ThemeProviderProps, UseThemeProps, useTheme } from "next-themes";
 
 //#region src/provider/base.d.ts

package/dist/provider/base.js

@@ -1,8 +1,8 @@
 "use client";
 import { I18nProvider } from "../contexts/i18n.js";
 import { SearchProvider } from "../contexts/search.js";
-import { lazy } from "react";
 import { jsx } from "react/jsx-runtime";
+import { lazy } from "react";
 import { ThemeProvider, useTheme } from "next-themes";
 import { DirectionProvider } from "@base-ui/react/direction-provider";
 //#region src/provider/base.tsx