@farming-labs/theme 0.0.2-beta.17 → 0.0.2-beta.19

package/dist/ai-search-dialog.d.mts

@@ -33,5 +33,20 @@ declare function FloatingAIChat({
   aiLabel?: string;
   loadingComponentHtml?: string;
 }): any;
+declare function AIModalDialog({
+  open,
+  onOpenChange,
+  api,
+  suggestedQuestions,
+  aiLabel,
+  loadingComponentHtml
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  api?: string;
+  suggestedQuestions?: string[];
+  aiLabel?: string;
+  loadingComponentHtml?: string;
+}): any;
 //#endregion
-export { DocsSearchDialog, FloatingAIChat };
+export { AIModalDialog, DocsSearchDialog, FloatingAIChat };

package/dist/ai-search-dialog.mjs

@@ -932,6 +932,95 @@ function TrashIcon() {
 		]
 	});
 }
+function AIModalDialog({ open, onOpenChange, api = "/api/docs", suggestedQuestions, aiLabel, loadingComponentHtml }) {
+	const [messages, setMessages] = useState([]);
+	const [aiInput, setAiInput] = useState("");
+	const [isStreaming, setIsStreaming] = useState(false);
+	useEffect(() => {
+		if (!open) return;
+		const handler = (e) => {
+			if (e.key === "Escape") onOpenChange(false);
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [open, onOpenChange]);
+	useEffect(() => {
+		if (open) document.body.style.overflow = "hidden";
+		else document.body.style.overflow = "";
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [open]);
+	if (!open) return null;
+	const aiName = aiLabel || "AI";
+	return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		onClick: () => onOpenChange(false),
+		className: "fd-ai-overlay"
+	}), /* @__PURE__ */ jsxs("div", {
+		role: "dialog",
+		"aria-modal": "true",
+		onClick: (e) => e.stopPropagation(),
+		className: "fd-ai-dialog fd-ai-modal-pure",
+		style: {
+			left: "50%",
+			top: "50%",
+			transform: "translate(-50%, -50%)",
+			width: "min(680px, calc(100vw - 32px))",
+			height: "min(560px, calc(100vh - 64px))",
+			animation: "fd-ai-float-center-in 200ms ease-out"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "fd-ai-header",
+				children: [
+					/* @__PURE__ */ jsx(SparklesIcon, { size: 16 }),
+					/* @__PURE__ */ jsxs("span", {
+						className: "fd-ai-header-title",
+						children: ["Ask ", aiName]
+					}),
+					/* @__PURE__ */ jsx("kbd", {
+						className: "fd-ai-esc",
+						children: "ESC"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => onOpenChange(false),
+						className: "fd-ai-close-btn",
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(AIChat, {
+				api,
+				messages,
+				setMessages,
+				aiInput,
+				setAiInput,
+				isStreaming,
+				setIsStreaming,
+				suggestedQuestions,
+				aiLabel,
+				loadingComponentHtml
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "fd-ai-modal-footer",
+				children: messages.length > 0 ? /* @__PURE__ */ jsxs("button", {
+					className: "fd-ai-fm-clear-btn",
+					onClick: () => {
+						if (!isStreaming) {
+							setMessages([]);
+							setAiInput("");
+						}
+					},
+					"aria-disabled": isStreaming,
+					children: [/* @__PURE__ */ jsx(TrashIcon, {}), /* @__PURE__ */ jsx("span", { children: "Clear chat" })]
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "fd-ai-modal-footer-hint",
+					children: "AI can be inaccurate, please verify the information."
+				})
+			})
+		]
+	})] }), document.body);
+}
 
 //#endregion
-export { DocsSearchDialog, FloatingAIChat };
+export { AIModalDialog, DocsSearchDialog, FloatingAIChat };

package/dist/darkbold/index.d.mts

@@ -0,0 +1,80 @@
+import * as _farming_labs_docs0 from "@farming-labs/docs";
+
+//#region src/darkbold/index.d.ts
+declare const DarkBoldUIDefaults: {
+  colors: {
+    primary: string;
+    background: string;
+    muted: string;
+    border: string;
+  };
+  typography: {
+    font: {
+      style: {
+        sans: string;
+        mono: string;
+      };
+      h1: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+        letterSpacing: string;
+      };
+      h2: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+        letterSpacing: string;
+      };
+      h3: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+        letterSpacing: string;
+      };
+      h4: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+      };
+      body: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+      };
+      small: {
+        size: string;
+        weight: number;
+        lineHeight: string;
+      };
+    };
+  };
+  layout: {
+    contentWidth: number;
+    sidebarWidth: number;
+    toc: {
+      enabled: boolean;
+      depth: number;
+      style: "default";
+    };
+    header: {
+      height: number;
+      sticky: boolean;
+    };
+  };
+  components: {
+    Callout: {
+      variant: string;
+      icon: boolean;
+    };
+    CodeBlock: {
+      showCopyButton: boolean;
+    };
+    Tabs: {
+      style: string;
+    };
+  };
+};
+declare const darkbold: (overrides?: Partial<_farming_labs_docs0.DocsTheme>) => _farming_labs_docs0.DocsTheme;
+//#endregion
+export { DarkBoldUIDefaults, darkbold };

package/dist/darkbold/index.mjs

@@ -0,0 +1,84 @@
+import { createTheme } from "@farming-labs/docs";
+
+//#region src/darkbold/index.ts
+/**
+* DarkBold theme preset.
+* Pure monochrome design, Geist typography, clean minimalism.
+*
+* CSS: `@import "@farming-labs/theme/darkbold/css";`
+*/
+const DarkBoldUIDefaults = {
+	colors: {
+		primary: "#000",
+		background: "#fff",
+		muted: "#666",
+		border: "#eaeaea"
+	},
+	typography: { font: {
+		style: {
+			sans: "Geist, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+			mono: "Geist Mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+		},
+		h1: {
+			size: "2.5rem",
+			weight: 600,
+			lineHeight: "1.2",
+			letterSpacing: "-0.06em"
+		},
+		h2: {
+			size: "2rem",
+			weight: 600,
+			lineHeight: "1.25",
+			letterSpacing: "-0.04em"
+		},
+		h3: {
+			size: "1.5rem",
+			weight: 600,
+			lineHeight: "1.3",
+			letterSpacing: "-0.02em"
+		},
+		h4: {
+			size: "1.25rem",
+			weight: 600,
+			lineHeight: "1.4"
+		},
+		body: {
+			size: "1rem",
+			weight: 400,
+			lineHeight: "1.6"
+		},
+		small: {
+			size: "0.875rem",
+			weight: 400,
+			lineHeight: "1.5"
+		}
+	} },
+	layout: {
+		contentWidth: 768,
+		sidebarWidth: 260,
+		toc: {
+			enabled: true,
+			depth: 3,
+			style: "default"
+		},
+		header: {
+			height: 64,
+			sticky: true
+		}
+	},
+	components: {
+		Callout: {
+			variant: "soft",
+			icon: true
+		},
+		CodeBlock: { showCopyButton: true },
+		Tabs: { style: "default" }
+	}
+};
+const darkbold = createTheme({
+	name: "darkbold",
+	ui: DarkBoldUIDefaults
+});
+
+//#endregion
+export { DarkBoldUIDefaults, darkbold };

package/dist/docs-ai-features.d.mts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/docs-ai-features.d.ts
 interface DocsAIFeaturesProps {
-  mode: "search" | "floating";
+  mode: "search" | "floating" | "sidebar-icon";
   position?: "bottom-right" | "bottom-left" | "bottom-center";
   floatingStyle?: "panel" | "modal" | "popover" | "full-modal";
   triggerComponentHtml?: string;

package/dist/docs-ai-features.mjs

@@ -1,18 +1,20 @@
 "use client";
 
-import { DocsSearchDialog, FloatingAIChat } from "./ai-search-dialog.mjs";
+import { AIModalDialog, DocsSearchDialog, FloatingAIChat } from "./ai-search-dialog.mjs";
 import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/docs-ai-features.tsx
 /**
 * Client component injected by `createDocsLayout` when `ai` is configured.
 *
-* Handles both modes:
+* Handles multiple modes:
 * - "search": Intercepts Cmd+K / Ctrl+K and opens the custom search dialog
 *   with Search + Ask AI tabs (prevents fumadocs' default dialog from opening).
 * - "floating": Renders the floating chat widget with configurable position,
 *   style, and trigger component.
+* - "sidebar-icon": Injects an AI trigger icon button next to the search bar
+*   in the sidebar header area (Mintlify-style).
 *
 * This component is rendered inside the docs layout so the user's root layout
 * never needs to be modified — AI features work purely from `docs.config.tsx`.
@@ -23,6 +25,11 @@ function DocsAIFeatures({ mode, position = "bottom-right", floatingStyle = "pane
 		aiLabel,
 		loadingComponentHtml
 	});
+	if (mode === "sidebar-icon") return /* @__PURE__ */ jsx(SidebarIconModeAI, {
+		suggestedQuestions,
+		aiLabel,
+		loadingComponentHtml
+	});
 	return /* @__PURE__ */ jsx(FloatingAIChat, {
 		api: "/api/docs",
 		position,
@@ -76,6 +83,56 @@ function SearchModeAI({ suggestedQuestions, aiLabel, loadingComponentHtml }) {
 		loadingComponentHtml
 	});
 }
+/**
+* Sidebar-icon mode: injects a sparkle icon button next to the search bar
+* in the sidebar header. The search button opens the Cmd+K search dialog,
+* and the AI sparkle button opens a pure AI modal (no search tabs).
+*/
+function SidebarIconModeAI({ suggestedQuestions, aiLabel, loadingComponentHtml }) {
+	const [searchOpen, setSearchOpen] = useState(false);
+	const [aiOpen, setAiOpen] = useState(false);
+	useEffect(() => {
+		function handler(e) {
+			if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+				e.preventDefault();
+				e.stopPropagation();
+				e.stopImmediatePropagation();
+				setSearchOpen(true);
+			}
+		}
+		document.addEventListener("keydown", handler, true);
+		return () => document.removeEventListener("keydown", handler, true);
+	}, []);
+	useEffect(() => {
+		function onSearch() {
+			setSearchOpen(true);
+		}
+		function onAI() {
+			setAiOpen(true);
+		}
+		window.addEventListener("fd-open-search", onSearch);
+		window.addEventListener("fd-open-ai", onAI);
+		return () => {
+			window.removeEventListener("fd-open-search", onSearch);
+			window.removeEventListener("fd-open-ai", onAI);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DocsSearchDialog, {
+		open: searchOpen,
+		onOpenChange: setSearchOpen,
+		api: "/api/docs",
+		suggestedQuestions,
+		aiLabel,
+		loadingComponentHtml
+	}), /* @__PURE__ */ jsx(AIModalDialog, {
+		open: aiOpen,
+		onOpenChange: setAiOpen,
+		api: "/api/docs",
+		suggestedQuestions,
+		aiLabel,
+		loadingComponentHtml
+	})] });
+}
 
 //#endregion
 export { DocsAIFeatures };

package/dist/docs-command-search.mjs

@@ -336,7 +336,8 @@ function DocsCommandSearch() {
 			const button = e.target.closest("button");
 			if (!button) return;
 			const text = button.textContent || "";
-			if (text.includes("Search") && (text.includes("⌘") || text.includes("K"))) {
+			const ariaLabel = (button.getAttribute("aria-label") || "").toLowerCase();
+			if (text.includes("Search") && (text.includes("⌘") || text.includes("K")) || ariaLabel.includes("search") || text === "Open Search") {
 				e.preventDefault();
 				e.stopPropagation();
 				e.stopImmediatePropagation();

package/dist/docs-layout.mjs

@@ -2,6 +2,7 @@ import { DocsAIFeatures } from "./docs-ai-features.mjs";
 import { DocsCommandSearch } from "./docs-command-search.mjs";
 import { serializeIcon } from "./serialize-icon.mjs";
 import { DocsPageClient } from "./docs-page-client.mjs";
+import { SidebarSearchWithAI } from "./sidebar-search-ai.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import fs from "node:fs";
 import path from "node:path";
@@ -32,7 +33,7 @@ function hasChildPages(dir) {
 	}
 	return false;
 }
-function buildTree(config) {
+function buildTree(config, flat = false) {
 	const docsDir = path.join(process.cwd(), "app", config.entry);
 	const icons = config.icons;
 	const ordering = config.ordering;
@@ -68,7 +69,11 @@ function buildTree(config) {
 					url,
 					icon
 				},
-				children: folderChildren
+				children: folderChildren,
+				...flat ? {
+					collapsible: false,
+					defaultOpen: true
+				} : {}
 			};
 		}
 		return {
@@ -227,7 +232,8 @@ function resolveSidebar(sidebar) {
 		component: sidebar.component,
 		footer: sidebar.footer,
 		banner: sidebar.banner,
-		collapsible: sidebar.collapsible
+		collapsible: sidebar.collapsible,
+		flat: sidebar.flat
 	};
 }
 const COLOR_MAP = {
@@ -300,6 +306,26 @@ function TypographyStyle({ typography }) {
 	if (!css) return null;
 	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: css } });
 }
+function LayoutStyle({ layout }) {
+	if (!layout) return null;
+	const rootVars = [];
+	const gridVars = [];
+	if (layout.sidebarWidth) {
+		const v = `--fd-sidebar-width: ${layout.sidebarWidth}px`;
+		rootVars.push(`${v};`);
+		gridVars.push(`${v} !important;`);
+	}
+	if (layout.contentWidth) rootVars.push(`--fd-content-width: ${layout.contentWidth}px;`);
+	if (layout.tocWidth) {
+		const v = `--fd-toc-width: ${layout.tocWidth}px`;
+		rootVars.push(`${v};`);
+		gridVars.push(`${v} !important;`);
+	}
+	if (rootVars.length === 0) return null;
+	const parts = [`:root {\n  ${rootVars.join("\n  ")}\n}`];
+	if (gridVars.length > 0) parts.push(`[style*="fd-sidebar-col"] {\n  ${gridVars.join("\n  ")}\n}`);
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: parts.join("\n") } });
+}
 function createDocsLayout(config) {
 	const tocConfig = config.theme?.ui?.layout?.toc;
 	const tocEnabled = tocConfig?.enabled !== false;
@@ -309,15 +335,22 @@ function createDocsLayout(config) {
 	const themeSwitch = resolveThemeSwitch(config.themeToggle);
 	const toggleConfig = typeof config.themeToggle === "object" ? config.themeToggle : void 0;
 	const forcedTheme = themeSwitch.enabled === false && toggleConfig?.default && toggleConfig.default !== "system" ? toggleConfig.default : void 0;
-	const sidebarProps = resolveSidebar(config.sidebar);
+	const resolvedSidebar = resolveSidebar(config.sidebar);
+	const sidebarFlat = resolvedSidebar.flat;
+	const { flat: _sidebarFlat, ...sidebarProps } = resolvedSidebar;
 	const breadcrumbConfig = config.breadcrumb;
 	const breadcrumbEnabled = breadcrumbConfig === void 0 || breadcrumbConfig === true || typeof breadcrumbConfig === "object" && breadcrumbConfig.enabled !== false;
 	const colors = config.theme?._userColorOverrides;
 	const typography = config.theme?.ui?.typography;
+	const layoutDimensions = config.theme?.ui?.layout;
 	const pageActions = config.pageActions;
 	const copyMarkdownEnabled = resolveBool(pageActions?.copyMarkdown);
 	const openDocsEnabled = resolveBool(pageActions?.openDocs);
 	const pageActionsPosition = pageActions?.position ?? "below-title";
+	const pageActionsAlignment = pageActions?.alignment ?? "left";
+	const lastUpdatedRaw = config.lastUpdated;
+	const lastUpdatedEnabled = lastUpdatedRaw !== false && (typeof lastUpdatedRaw !== "object" || lastUpdatedRaw.enabled !== false);
+	const lastUpdatedPosition = typeof lastUpdatedRaw === "object" ? lastUpdatedRaw.position ?? "footer" : "footer";
 	const openDocsProviders = (typeof pageActions?.openDocs === "object" && pageActions.openDocs.providers ? pageActions.openDocs.providers : void 0)?.map((p) => ({
 		name: p.name,
 		urlTemplate: p.urlTemplate,
@@ -340,16 +373,18 @@ function createDocsLayout(config) {
 	const descriptionMap = buildDescriptionMap(config.entry);
 	return function DocsLayoutWrapper({ children }) {
 		return /* @__PURE__ */ jsxs(DocsLayout, {
-			tree: buildTree(config),
+			tree: buildTree(config, !!sidebarFlat),
 			nav: {
 				title: navTitle,
 				url: navUrl
 			},
 			themeSwitch,
 			sidebar: sidebarProps,
+			...aiMode === "sidebar-icon" && aiEnabled ? { searchToggle: { components: { lg: /* @__PURE__ */ jsx(SidebarSearchWithAI, {}) } } } : {},
 			children: [
 				/* @__PURE__ */ jsx(ColorStyle, { colors }),
 				/* @__PURE__ */ jsx(TypographyStyle, { typography }),
+				/* @__PURE__ */ jsx(LayoutStyle, { layout: layoutDimensions }),
 				forcedTheme && /* @__PURE__ */ jsx(ForcedThemeScript, { theme: forcedTheme }),
 				/* @__PURE__ */ jsx(DocsCommandSearch, {}),
 				aiEnabled && /* @__PURE__ */ jsx(DocsAIFeatures, {
@@ -370,10 +405,13 @@ function createDocsLayout(config) {
 					openDocs: openDocsEnabled,
 					openDocsProviders,
 					pageActionsPosition,
+					pageActionsAlignment,
 					githubUrl,
 					githubBranch,
 					githubDirectory,
 					lastModifiedMap,
+					lastUpdatedEnabled,
+					lastUpdatedPosition,
 					descriptionMap,
 					children
 				})

package/dist/docs-page-client.d.mts

@@ -19,6 +19,8 @@ interface DocsPageClientProps {
   openDocsProviders?: SerializedProvider[];
   /** Where to render page actions relative to the title */
   pageActionsPosition?: "above-title" | "below-title";
+  /** Horizontal alignment of page action buttons */
+  pageActionsAlignment?: "left" | "right";
   /** GitHub repository URL (e.g. "https://github.com/user/repo") */
   githubUrl?: string;
   /** GitHub branch name @default "main" */
@@ -27,6 +29,10 @@ interface DocsPageClientProps {
   githubDirectory?: string;
   /** Map of pathname → formatted last-modified date string */
   lastModifiedMap?: Record<string, string>;
+  /** Whether to show "Last updated" at all */
+  lastUpdatedEnabled?: boolean;
+  /** Where to show the "Last updated" date: "footer" (next to Edit on GitHub) or "below-title" */
+  lastUpdatedPosition?: "footer" | "below-title";
   /** Map of pathname → frontmatter description */
   descriptionMap?: Record<string, string>;
   /** Frontmatter description to display below the page title (overrides descriptionMap) */
@@ -42,10 +48,13 @@ declare function DocsPageClient({
   openDocs,
   openDocsProviders,
   pageActionsPosition,
+  pageActionsAlignment,
   githubUrl,
   githubBranch,
   githubDirectory,
   lastModifiedMap,
+  lastUpdatedEnabled,
+  lastUpdatedPosition,
   descriptionMap,
   description,
   children

package/dist/docs-page-client.mjs

@@ -2,6 +2,7 @@
 
 import { PageActions } from "./page-actions.mjs";
 import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DocsBody, DocsPage, EditOnGitHub } from "fumadocs-ui/layouts/docs/page";
 import { usePathname, useRouter } from "next/navigation";
@@ -62,10 +63,11 @@ function buildGithubFileUrl(githubUrl, branch, pathname, directory) {
 	const segments = pathname.replace(/^\//, "").replace(/\/$/, "");
 	return `${githubUrl}/tree/${branch}/${directory ? `${directory}/` : ""}app/${segments}/page.mdx`;
 }
-function DocsPageClient({ tocEnabled, tocStyle = "default", breadcrumbEnabled = true, entry = "docs", copyMarkdown = false, openDocs = false, openDocsProviders, pageActionsPosition = "below-title", githubUrl, githubBranch = "main", githubDirectory, lastModifiedMap, descriptionMap, description, children }) {
+function DocsPageClient({ tocEnabled, tocStyle = "default", breadcrumbEnabled = true, entry = "docs", copyMarkdown = false, openDocs = false, openDocsProviders, pageActionsPosition = "below-title", pageActionsAlignment = "left", githubUrl, githubBranch = "main", githubDirectory, lastModifiedMap, lastUpdatedEnabled = true, lastUpdatedPosition = "footer", descriptionMap, description, children }) {
 	const fdTocStyle = tocStyle === "directional" ? "clerk" : void 0;
 	const [toc, setToc] = useState([]);
 	const pathname = usePathname();
+	const [actionsPortalTarget, setActionsPortalTarget] = useState(null);
 	const pageDescription = description ?? descriptionMap?.[pathname.replace(/\/$/, "") || "/"];
 	useEffect(() => {
 		if (!tocEnabled) return;
@@ -104,8 +106,57 @@ function DocsPageClient({ tocEnabled, tocStyle = "default", breadcrumbEnabled =
 	const showActions = copyMarkdown || openDocs;
 	const githubFileUrl = githubUrl ? buildGithubFileUrl(githubUrl, githubBranch, pathname, githubDirectory) : void 0;
 	const normalizedPath = pathname.replace(/\/$/, "") || "/";
-	const lastModified = lastModifiedMap?.[normalizedPath];
-	const showFooter = githubFileUrl || lastModified;
+	const lastModified = lastUpdatedEnabled ? lastModifiedMap?.[normalizedPath] : void 0;
+	const showLastUpdatedBelowTitle = !!lastModified && lastUpdatedPosition === "below-title";
+	const showLastUpdatedInFooter = !!lastModified && lastUpdatedPosition === "footer";
+	const showFooter = !!githubFileUrl || showLastUpdatedInFooter;
+	const needsBelowTitleBlock = showLastUpdatedBelowTitle || showActions;
+	useEffect(() => {
+		if (!needsBelowTitleBlock) return;
+		const timer = requestAnimationFrame(() => {
+			const container = document.getElementById("nd-page");
+			if (!container) return;
+			container.querySelectorAll(".fd-below-title-block").forEach((el) => el.remove());
+			const h1 = container.querySelector("h1");
+			if (!h1) return;
+			let insertAfter = h1;
+			const desc = container.querySelector(".fd-page-description");
+			if (desc) insertAfter = desc;
+			const wrapper = document.createElement("div");
+			wrapper.className = "fd-below-title-block not-prose";
+			if (showLastUpdatedBelowTitle) {
+				const lastUpdatedEl = document.createElement("p");
+				lastUpdatedEl.className = "fd-last-updated-inline";
+				lastUpdatedEl.textContent = `Last updated ${lastModified}`;
+				wrapper.appendChild(lastUpdatedEl);
+			}
+			if (showLastUpdatedBelowTitle || showActions) {
+				const hr = document.createElement("hr");
+				hr.className = "fd-title-separator";
+				wrapper.appendChild(hr);
+			}
+			if (showActions) {
+				const portalEl = document.createElement("div");
+				portalEl.className = "fd-actions-portal";
+				portalEl.setAttribute("data-actions-alignment", pageActionsAlignment);
+				wrapper.appendChild(portalEl);
+				setActionsPortalTarget(portalEl);
+			}
+			insertAfter.insertAdjacentElement("afterend", wrapper);
+		});
+		return () => {
+			cancelAnimationFrame(timer);
+			setActionsPortalTarget(null);
+			document.querySelectorAll("#nd-page .fd-below-title-block").forEach((el) => el.remove());
+		};
+	}, [
+		lastModified,
+		needsBelowTitleBlock,
+		showLastUpdatedBelowTitle,
+		showActions,
+		pageActionsAlignment,
+		pathname
+	]);
 	return /* @__PURE__ */ jsxs(DocsPage, {
 		toc,
 		tableOfContent: {
@@ -122,14 +173,11 @@ function DocsPageClient({ tocEnabled, tocStyle = "default", breadcrumbEnabled =
 				pathname,
 				entry
 			}),
-			showActions && /* @__PURE__ */ jsx("div", {
-				"data-actions-position": pageActionsPosition,
-				children: /* @__PURE__ */ jsx(PageActions, {
-					copyMarkdown,
-					openDocs,
-					providers: openDocsProviders
-				})
-			}),
+			showActions && actionsPortalTarget && createPortal(/* @__PURE__ */ jsx(PageActions, {
+				copyMarkdown,
+				openDocs,
+				providers: openDocsProviders
+			}), actionsPortalTarget),
 			/* @__PURE__ */ jsxs(DocsBody, {
 				style: {
 					display: "flex",
@@ -140,9 +188,9 @@ function DocsPageClient({ tocEnabled, tocStyle = "default", breadcrumbEnabled =
 					children
 				}), showFooter && /* @__PURE__ */ jsxs("div", {
 					className: "not-prose fd-page-footer",
-					children: [githubFileUrl && /* @__PURE__ */ jsx(EditOnGitHub, { href: githubFileUrl }), lastModified && /* @__PURE__ */ jsxs("span", {
-						className: "fd-last-updated",
-						children: ["Last updated: ", lastModified]
+					children: [githubFileUrl && /* @__PURE__ */ jsx(EditOnGitHub, { href: githubFileUrl }), showLastUpdatedInFooter && lastModified && /* @__PURE__ */ jsxs("span", {
+						className: "fd-last-updated-footer",
+						children: ["Last updated ", lastModified]
 					})]
 				})]
 			})