@farming-labs/next 0.1.10 → 0.1.12

package/dist/api-reference.d.mts

@@ -1,9 +1,39 @@
 import { resolveApiReferenceConfig } from "@farming-labs/docs/server";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { DocsConfig } from "@farming-labs/docs";
 
 //#region src/api-reference.d.ts
+interface NextApiReferenceSourceState {
+  apiReference: ReturnType<typeof resolveApiReferenceConfig>;
+  document: Record<string, unknown>;
+  info: {
+    title: string;
+    description?: string;
+  };
+  pages: Array<{
+    url: string;
+  } & Record<string, any>>;
+  server: any;
+  source: {
+    getPage: (slug?: string[]) => any;
+    getPages: () => Array<any>;
+    getPageTree: () => any;
+  };
+}
 declare function buildNextOpenApiDocument(config: DocsConfig): Record<string, unknown>;
 declare function withNextApiReferenceBanner(config: DocsConfig): DocsConfig;
-declare function createNextApiReference(config: DocsConfig): () => Promise<Response>;
+declare function createNextApiReference(config: DocsConfig): (request?: Request) => Promise<Response>;
+declare function createNextApiReferencePage(config: DocsConfig): (props?: {
+  params?: Promise<{
+    slug?: string[];
+  }> | {
+    slug?: string[];
+  };
+}) => Promise<react_jsx_runtime0.JSX.Element>;
+declare function createNextApiReferenceLayout(config: DocsConfig): (props: {
+  children: React.ReactNode;
+}) => Promise<react_jsx_runtime0.JSX.Element>;
+declare function getNextApiReferenceSourceState(config: DocsConfig): Promise<NextApiReferenceSourceState>;
+declare function getNextApiReferenceMode(config: DocsConfig): "fumadocs" | "scalar";
 //#endregion
-export { buildNextOpenApiDocument, createNextApiReference, resolveApiReferenceConfig, withNextApiReferenceBanner };
+export { NextApiReferenceSourceState, buildNextOpenApiDocument, createNextApiReference, createNextApiReferenceLayout, createNextApiReferencePage, getNextApiReferenceMode, getNextApiReferenceSourceState, resolveApiReferenceConfig, withNextApiReferenceBanner };

package/dist/api-reference.mjs

@@ -1,8 +1,11 @@
+import DocsClientCallbacks from "./client-callbacks.mjs";
 import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
 import { join, relative } from "node:path";
 import { ApiReference } from "@scalar/nextjs-api-reference";
-import { buildApiReferenceOpenApiDocumentAsync, buildApiReferencePageTitle, buildApiReferenceScalarCss, resolveApiReferenceConfig } from "@farming-labs/docs/server";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { buildApiReferenceOpenApiDocumentAsync, buildApiReferencePageTitle, buildApiReferenceScalarCss, resolveApiReferenceConfig, resolveApiReferenceRenderer } from "@farming-labs/docs/server";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/api-reference.tsx
 const ROUTE_FILE_RE = /^route\.(ts|tsx|js|jsx)$/;
@@ -43,6 +46,9 @@ function shouldExcludeRoute(excludes, routePath, relativeFile, relativeDir) {
 function humanizeSegment(value) {
 	return value.replace(/^\[\[?\.{3}/, "").replace(/^\[/, "").replace(/\]\]?$/, "").replace(/^\$/, "").replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
 }
+function slugifyApiReferencePageName(value) {
+	return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/-{2,}/g, "-");
+}
 function endpointSegmentFromFsSegment(value) {
 	if (value.startsWith("[[...") && value.endsWith("]]")) return `{${value.slice(5, -2)}}`;
 	if (value.startsWith("[...") && value.endsWith("]")) return `{${value.slice(4, -1)}}`;
@@ -97,6 +103,25 @@ function isThemeToggleHidden(config) {
 	if (config.themeToggle && typeof config.themeToggle === "object") return config.themeToggle.enabled === false;
 	return false;
 }
+function getOriginFromRequest(request) {
+	if (!request) return void 0;
+	try {
+		return new URL(request.url).origin;
+	} catch {
+		return;
+	}
+}
+function getForwardedHeaderValue(value) {
+	if (!value) return void 0;
+	return value.split(",").map((entry) => entry.trim()).find(Boolean) || void 0;
+}
+async function getOriginFromNextHeaders() {
+	const { headers } = await import("next/headers");
+	const headerList = await headers();
+	const host = getForwardedHeaderValue(headerList.get("x-forwarded-host")) ?? getForwardedHeaderValue(headerList.get("host"));
+	if (!host) return void 0;
+	return `${getForwardedHeaderValue(headerList.get("x-forwarded-proto")) ?? "https"}://${host}`;
+}
 function buildPathParameters(fsSegments) {
 	const parameters = [];
 	for (const segment of fsSegments) {
@@ -203,7 +228,7 @@ function buildNextOpenApiDocument(config) {
 		openapi: "3.1.0",
 		info: {
 			title: "API Reference",
-			description: "Remote OpenAPI specs are resolved at request time through createNextApiReference().",
+			description: "Remote OpenAPI specs are resolved at request time through the Next.js API reference renderer.",
 			version: "0.0.0"
 		},
 		servers: [{ url: "/" }],
@@ -227,25 +252,80 @@ function buildNextOpenApiDocument(config) {
 		paths: buildOpenApiPaths(routes)
 	};
 }
-function DropdownIcon({ current, radius }) {
-	const label = current === "api" ? "</>" : "▣";
+function SwitcherGlyph({ kind, radius, active }) {
+	const isApi = kind === "api";
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		style: {
 			display: "inline-flex",
-			width: 20,
-			height: 20,
+			width: 22,
+			height: 22,
 			alignItems: "center",
 			justifyContent: "center",
 			borderRadius: radius,
 			border: "1px solid color-mix(in srgb, var(--color-fd-border, #2a2a2a) 100%, transparent)",
 			background: "color-mix(in srgb, var(--color-fd-card, #161616) 92%, transparent)",
-			color: "var(--color-fd-primary, currentColor)",
-			boxShadow: "0 0 0 1px color-mix(in srgb, var(--color-fd-border, #2a2a2a) 32%, transparent)",
-			fontSize: 9,
-			fontWeight: 700
+			color: active ? "var(--color-fd-primary, currentColor)" : "var(--color-fd-muted-foreground, rgba(255,255,255,0.72))",
+			boxShadow: "0 0 0 1px color-mix(in srgb, var(--color-fd-border, #2a2a2a) 32%, transparent)"
 		},
-		children: label
+		children: isApi ? /* @__PURE__ */ jsx("svg", {
+			width: "13",
+			height: "13",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M8 8L4 12L8 16M16 8L20 12L16 16M13.5 6L10.5 18",
+				stroke: "currentColor",
+				strokeWidth: "1.8",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}) : /* @__PURE__ */ jsx("svg", {
+			width: "13",
+			height: "13",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H11.25V19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75ZM12.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H12.75V4.75Z",
+				stroke: "currentColor",
+				strokeWidth: "1.8",
+				strokeLinejoin: "round"
+			})
+		})
+	});
+}
+function ChevronStack() {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": "true",
+		style: {
+			display: "inline-flex",
+			flexDirection: "column",
+			gap: 2,
+			color: "var(--color-fd-muted-foreground, rgba(255,255,255,0.65))"
+		},
+		children: [/* @__PURE__ */ jsx("svg", {
+			width: "11",
+			height: "7",
+			viewBox: "0 0 10 6",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M1 5L5 1L9 5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			})
+		}), /* @__PURE__ */ jsx("svg", {
+			width: "11",
+			height: "7",
+			viewBox: "0 0 10 6",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M1 1L5 5L9 1",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			})
+		})]
 	});
 }
 function getApiReferenceSwitcherTheme(config) {
@@ -260,87 +340,191 @@ function getApiReferenceSwitcherTheme(config) {
 		backgroundImage: isPixelBorder ? "repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-fd-border) 10%, transparent), color-mix(in srgb, var(--color-fd-border) 10%, transparent) 1px, transparent 1px, transparent 6px)" : void 0,
 		boxShadow: isPixelBorder || isDarksharp ? "none" : isShiny ? "0 14px 40px color-mix(in srgb, var(--color-fd-border, #2a2a2a) 18%, transparent)" : "0 0 0 1px color-mix(in srgb, var(--color-fd-border, #2a2a2a) 32%, transparent)",
 		titleStyle: {
-			fontFamily: isPixelBorder ? "var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace))" : void 0,
+			fontFamily: isPixelBorder ? "var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace))" : "var(--fd-font-sans, var(--font-geist-sans, system-ui, sans-serif))",
 			textTransform: isPixelBorder ? "uppercase" : void 0,
 			letterSpacing: isPixelBorder ? "0.08em" : void 0,
-			fontSize: isPixelBorder ? 12 : 14
+			fontSize: isPixelBorder ? 12 : 13
 		},
 		descriptionStyle: {
-			fontFamily: isPixelBorder ? "var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace))" : void 0,
+			fontFamily: isPixelBorder ? "var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace))" : "var(--fd-font-sans, var(--font-geist-sans, system-ui, sans-serif))",
 			textTransform: isPixelBorder ? "uppercase" : void 0,
 			letterSpacing: isPixelBorder ? "0.04em" : void 0,
-			fontSize: isPixelBorder ? 11 : 12,
-			opacity: isPixelBorder ? .74 : .62
+			fontSize: isPixelBorder ? 11 : 11,
+			opacity: isPixelBorder ? .74 : .72
 		}
 	};
 }
-function SwitcherOption({ href, title, description, current, config }) {
+const API_REFERENCE_COLOR_MAP = {
+	primary: "--color-fd-primary",
+	primaryForeground: "--color-fd-primary-foreground",
+	background: "--color-fd-background",
+	foreground: "--color-fd-foreground",
+	muted: "--color-fd-muted",
+	mutedForeground: "--color-fd-muted-foreground",
+	border: "--color-fd-border",
+	card: "--color-fd-card",
+	cardForeground: "--color-fd-card-foreground",
+	accent: "--color-fd-accent",
+	accentForeground: "--color-fd-accent-foreground",
+	popover: "--color-fd-popover",
+	popoverForeground: "--color-fd-popover-foreground",
+	secondary: "--color-fd-secondary",
+	secondaryForeground: "--color-fd-secondary-foreground",
+	ring: "--color-fd-ring"
+};
+function buildApiReferenceColorsCSS(colors) {
+	if (!colors) return "";
+	const vars = [];
+	for (const [key, value] of Object.entries(colors)) {
+		if (!value || !API_REFERENCE_COLOR_MAP[key]) continue;
+		vars.push(`${API_REFERENCE_COLOR_MAP[key]}: ${value};`);
+	}
+	if (vars.length === 0) return "";
+	const block = vars.join("\n  ");
+	return `:root {\n  ${block}\n}\n.dark {\n  ${block}\n}`;
+}
+function ApiReferenceColorStyle({ colors }) {
+	const css = buildApiReferenceColorsCSS(colors);
+	if (!css) return null;
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: css } });
+}
+function buildApiReferenceFontStyleVars(prefix, style) {
+	if (!style) return "";
+	const parts = [];
+	if (style.size) parts.push(`${prefix}-size: ${style.size};`);
+	if (style.weight != null) parts.push(`${prefix}-weight: ${style.weight};`);
+	if (style.lineHeight) parts.push(`${prefix}-line-height: ${style.lineHeight};`);
+	if (style.letterSpacing) parts.push(`${prefix}-letter-spacing: ${style.letterSpacing};`);
+	return parts.join("\n  ");
+}
+function buildApiReferenceTypographyCSS(typography) {
+	if (!typography?.font) return "";
+	const vars = [];
+	const fontStyle = typography.font.style;
+	if (fontStyle?.sans) vars.push(`--fd-font-sans: ${fontStyle.sans};`);
+	if (fontStyle?.mono) vars.push(`--fd-font-mono: ${fontStyle.mono};`);
+	for (const element of [
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"body",
+		"small"
+	]) {
+		const style = typography.font[element];
+		if (!style) continue;
+		const cssVars = buildApiReferenceFontStyleVars(`--fd-${element}`, style);
+		if (cssVars) vars.push(cssVars);
+	}
+	if (vars.length === 0) return "";
+	return `:root {\n  ${vars.join("\n  ")}\n}`;
+}
+function ApiReferenceTypographyStyle({ typography }) {
+	const css = buildApiReferenceTypographyCSS(typography);
+	if (!css) return null;
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: css } });
+}
+function ApiReferenceLayoutStyle({ layout }) {
+	if (!layout) return null;
+	const rootVars = [];
+	const desktopRootVars = [];
+	const desktopGridVars = [];
+	if (layout.sidebarWidth) {
+		const value = `--fd-sidebar-width: ${layout.sidebarWidth}px`;
+		desktopRootVars.push(`${value};`);
+		desktopGridVars.push(`${value} !important;`);
+	}
+	if (layout.contentWidth) rootVars.push(`--fd-content-width: ${layout.contentWidth}px;`);
+	if (layout.tocWidth) {
+		const value = `--fd-toc-width: ${layout.tocWidth}px`;
+		desktopRootVars.push(`${value};`);
+		desktopGridVars.push(`${value} !important;`);
+	}
+	if (rootVars.length === 0 && desktopRootVars.length === 0) return null;
+	const parts = [];
+	if (rootVars.length > 0) parts.push(`:root {\n  ${rootVars.join("\n  ")}\n}`);
+	if (desktopRootVars.length > 0) {
+		const inner = [`:root {\n    ${desktopRootVars.join("\n    ")}\n  }`];
+		if (desktopGridVars.length > 0) inner.push(`[style*="fd-sidebar-col"] {\n    ${desktopGridVars.join("\n    ")}\n  }`);
+		parts.push(`@media (min-width: 1024px) {\n  ${inner.join("\n  ")}\n}`);
+	}
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: parts.join("\n") } });
+}
+function resolveApiReferenceThemeSwitch(toggle) {
+	if (toggle === void 0 || toggle === true) return { enabled: true };
+	if (toggle === false) return { enabled: false };
+	return {
+		enabled: toggle.enabled !== false,
+		mode: toggle.mode
+	};
+}
+function ApiReferenceForcedThemeScript({ theme }) {
+	return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: `document.documentElement.classList.remove('light','dark');document.documentElement.classList.add('${theme}');` } });
+}
+function ApiReferenceThemeBridge({ config }) {
+	const colors = config.theme?._userColorOverrides;
+	const typography = config.theme?.ui?.typography;
+	const layout = config.theme?.ui?.layout;
+	const themeSwitch = resolveApiReferenceThemeSwitch(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;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(ApiReferenceColorStyle, { colors }),
+		/* @__PURE__ */ jsx(ApiReferenceTypographyStyle, { typography }),
+		/* @__PURE__ */ jsx(ApiReferenceLayoutStyle, { layout }),
+		forcedTheme ? /* @__PURE__ */ jsx(ApiReferenceForcedThemeScript, { theme: forcedTheme }) : null
+	] });
+}
+function SwitcherOption({ href, kind, title, description, current, config }) {
 	const theme = getApiReferenceSwitcherTheme(config);
-	return /* @__PURE__ */ jsxs("a", {
+	return /* @__PURE__ */ jsxs(Link, {
 		href,
+		prefetch: true,
 		style: {
 			display: "grid",
-			gridTemplateColumns: "20px 1fr 14px",
+			gridTemplateColumns: "22px minmax(0, 1fr)",
 			gap: 12,
 			alignItems: "start",
 			padding: "11px 12px",
-			borderRadius: theme.cardRadius,
+			borderRadius: "0.625rem",
 			textDecoration: "none",
 			color: "inherit",
-			background: current ? "color-mix(in srgb, var(--color-fd-primary, #3a7) 10%, transparent)" : "transparent",
-			backgroundImage: !current ? theme.backgroundImage : void 0
+			background: current ? "linear-gradient(90deg, color-mix(in srgb, var(--color-fd-primary, #facc15) 20%, transparent), color-mix(in srgb, var(--color-fd-primary, #facc15) 14%, transparent))" : "transparent",
+			backgroundImage: current ? theme.backgroundImage : void 0
 		},
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				style: {
-					display: "inline-flex",
-					width: 20,
-					height: 20,
-					alignItems: "center",
-					justifyContent: "center",
-					borderRadius: theme.iconRadius,
-					border: "1px solid color-mix(in srgb, var(--color-fd-border, #2a2a2a) 100%, transparent)",
-					color: current ? "var(--color-fd-primary, currentColor)" : "var(--color-fd-muted-foreground, rgba(255,255,255,0.62))",
-					background: "color-mix(in srgb, var(--color-fd-card, #161616) 92%, transparent)",
-					boxShadow: "0 0 0 1px color-mix(in srgb, var(--color-fd-border, #2a2a2a) 32%, transparent)",
-					fontSize: 9,
-					fontWeight: 700
-				},
-				children: title === "API Reference" ? "</>" : "▣"
-			}),
-			/* @__PURE__ */ jsxs("span", {
+		children: [/* @__PURE__ */ jsx("span", {
+			style: {
+				display: "inline-flex",
+				alignSelf: "start",
+				paddingTop: 1
+			},
+			children: /* @__PURE__ */ jsx(SwitcherGlyph, {
+				kind,
+				radius: theme.iconRadius,
+				active: current
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				minWidth: 0,
+				flexDirection: "column",
+				gap: 3
+			},
+			children: [/* @__PURE__ */ jsx("span", {
 				style: {
-					display: "flex",
-					flexDirection: "column",
-					gap: 4
+					fontWeight: 600,
+					lineHeight: 1.2,
+					...theme.titleStyle
 				},
-				children: [/* @__PURE__ */ jsx("span", {
-					style: {
-						fontWeight: 600,
-						lineHeight: 1.25,
-						...theme.titleStyle
-					},
-					children: title
-				}), /* @__PURE__ */ jsx("span", {
-					style: {
-						lineHeight: 1.4,
-						...theme.descriptionStyle
-					},
-					children: description
-				})]
-			}),
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
+				children: title
+			}), /* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: 12,
-					opacity: current ? 1 : 0,
-					color: "var(--color-fd-primary, currentColor)",
-					paddingTop: 2
+					lineHeight: 1.4,
+					...theme.descriptionStyle
 				},
-				children: "✓"
-			})
-		]
+				children: description
+			})]
+		})]
 	});
 }
 function ApiReferenceSwitcher({ docsUrl, apiUrl, current, config }) {
@@ -365,59 +549,59 @@ function ApiReferenceSwitcher({ docsUrl, apiUrl, current, config }) {
 				justifyContent: "space-between",
 				gap: 10,
 				cursor: "pointer",
-				padding: "11px 13px",
-				background: "color-mix(in srgb, var(--color-fd-card, #202020) 96%, transparent)",
-				borderBottom: "1px solid color-mix(in srgb, var(--color-fd-border, #2a2a2a) 100%, transparent)"
+				padding: "10px 13px",
+				background: "color-mix(in srgb, var(--color-fd-card, #202020) 96%, transparent)"
 			},
 			children: [/* @__PURE__ */ jsxs("span", {
 				style: {
 					display: "flex",
+					minWidth: 0,
 					alignItems: "center",
 					gap: 10
 				},
-				children: [/* @__PURE__ */ jsx(DropdownIcon, {
-					current,
-					radius: theme.iconRadius
+				children: [/* @__PURE__ */ jsx(SwitcherGlyph, {
+					kind: current,
+					radius: theme.iconRadius,
+					active: true
 				}), /* @__PURE__ */ jsx("span", {
 					style: {
 						fontWeight: 600,
+						lineHeight: 1.2,
 						...theme.titleStyle
 					},
 					children: currentLabel
 				})]
-			}), /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				style: {
-					fontSize: 11,
-					opacity: .56,
-					transform: "translateY(1px)"
-				},
-				children: "▿"
-			})]
+			}), /* @__PURE__ */ jsx(ChevronStack, {})]
 		}), /* @__PURE__ */ jsxs("div", {
 			style: {
 				display: "flex",
 				flexDirection: "column",
 				gap: 2,
-				padding: 8,
+				padding: "8px 8px 9px",
 				background: "color-mix(in srgb, var(--color-fd-card, #151515) 96%, transparent)"
 			},
 			children: [/* @__PURE__ */ jsx(SwitcherOption, {
 				href: docsUrl,
+				kind: "docs",
 				title: "Documentation",
-				description: "Markdown pages, guides, and concepts",
+				description: "Guides & concepts",
 				current: current === "docs",
 				config
 			}), /* @__PURE__ */ jsx(SwitcherOption, {
 				href: apiUrl,
+				kind: "api",
 				title: "API Reference",
-				description: "Scalar-powered route handler reference",
+				description: "Endpoints & examples",
 				current: current === "api",
 				config
 			})]
 		})]
 	});
 }
+function getExistingSidebarBanner(config) {
+	if (!config.sidebar || config.sidebar === true) return void 0;
+	return config.sidebar.banner;
+}
 function mergeBanner(existing, next) {
 	if (!existing) return next;
 	return /* @__PURE__ */ jsxs("div", {
@@ -439,25 +623,27 @@ function withNextApiReferenceBanner(config) {
 		current: "docs",
 		config
 	});
+	const banner = mergeBanner(getExistingSidebarBanner(config), switcher);
 	if (!config.sidebar || config.sidebar === true) return {
 		...config,
-		sidebar: { banner: switcher }
+		sidebar: { banner }
 	};
 	return {
 		...config,
 		sidebar: {
 			...config.sidebar,
-			banner: mergeBanner(config.sidebar.banner, switcher)
+			banner
 		}
 	};
 }
 function createNextApiReference(config) {
 	const apiReference = resolveApiReferenceConfig(config.apiReference);
-	return async () => {
+	return async (request) => {
 		if (!apiReference.enabled) return new Response("Not Found", { status: 404 });
 		const document = await buildApiReferenceOpenApiDocumentAsync(config, {
 			framework: "next",
-			rootDir: process.cwd()
+			rootDir: process.cwd(),
+			baseUrl: getOriginFromRequest(request)
 		});
 		return ApiReference({
 			pageTitle: buildApiReferencePageTitle(config, "API Reference"),
@@ -483,6 +669,161 @@ function createNextApiReference(config) {
 		})();
 	};
 }
+function getOpenApiInfo(document) {
+	const info = document.info && typeof document.info === "object" && !Array.isArray(document.info) ? document.info : {};
+	return {
+		title: typeof info.title === "string" && info.title.trim() ? info.title : "API Reference",
+		description: typeof info.description === "string" && info.description.trim() ? info.description : void 0
+	};
+}
+function createNextApiReferencePage(config) {
+	return async function NextApiReferencePage(props) {
+		const [{ createAPIPage }, { DocsBody, DocsDescription, DocsPage, DocsTitle }] = await Promise.all([import("fumadocs-openapi/ui"), import("fumadocs-ui/layouts/notebook/page")]);
+		const { info, pages, server, source } = await getNextApiReferenceSourceState(config);
+		const slug = (props?.params ? await props.params : void 0)?.slug ?? [];
+		if (pages.length === 0) return /* @__PURE__ */ jsxs(DocsPage, {
+			full: true,
+			children: [
+				/* @__PURE__ */ jsx(DocsTitle, { children: info.title }),
+				/* @__PURE__ */ jsx(DocsDescription, { children: info.description }),
+				/* @__PURE__ */ jsx(DocsBody, { children: /* @__PURE__ */ jsx("div", {
+					className: "rounded-xl border border-fd-border bg-fd-card p-6 text-sm text-fd-muted-foreground",
+					children: "No operations were found in the OpenAPI document."
+				}) })
+			]
+		});
+		const page = slug.length === 0 ? pages[0] : source.getPage(slug);
+		if (!page || typeof page.data?.getAPIPageProps !== "function") notFound();
+		const APIPage = createAPIPage(server);
+		const currentPageIndex = slug.length === 0 ? 0 : pages.findIndex((entry) => entry.url === page.url);
+		const previousPage = currentPageIndex > 0 ? pages[currentPageIndex - 1] : void 0;
+		const nextPage = currentPageIndex >= 0 && currentPageIndex < pages.length - 1 ? pages[currentPageIndex + 1] : void 0;
+		return /* @__PURE__ */ jsxs(DocsPage, {
+			toc: page.data.toc,
+			full: true,
+			footer: { enabled: false },
+			className: "fd-api-reference-page",
+			children: [
+				/* @__PURE__ */ jsx(DocsTitle, { children: page.data.title ?? info.title }),
+				/* @__PURE__ */ jsx(DocsDescription, { children: typeof page.data.description === "string" && page.data.description.trim() ? page.data.description : info.description }),
+				/* @__PURE__ */ jsx(DocsBody, { children: /* @__PURE__ */ jsx(APIPage, { ...page.data.getAPIPageProps() }) }),
+				previousPage || nextPage ? /* @__PURE__ */ jsxs("nav", {
+					className: "fd-api-reference-pagination",
+					"aria-label": "API reference pagination",
+					children: [previousPage ? /* @__PURE__ */ jsxs(Link, {
+						href: previousPage.url,
+						prefetch: true,
+						className: "fd-api-reference-pagination-item",
+						"data-direction": "previous",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "fd-api-reference-pagination-label",
+								children: "Previous"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "fd-api-reference-pagination-title",
+								children: previousPage.data?.title ?? previousPage.url
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "fd-api-reference-pagination-description",
+								children: previousPage.data?.description ?? "Previous API operation"
+							})
+						]
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "fd-api-reference-pagination-spacer",
+						"aria-hidden": "true"
+					}), nextPage ? /* @__PURE__ */ jsxs(Link, {
+						href: nextPage.url,
+						prefetch: true,
+						className: "fd-api-reference-pagination-item",
+						"data-direction": "next",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "fd-api-reference-pagination-label",
+								children: "Next"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "fd-api-reference-pagination-title",
+								children: nextPage.data?.title ?? nextPage.url
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "fd-api-reference-pagination-description",
+								children: nextPage.data?.description ?? "Next API operation"
+							})
+						]
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "fd-api-reference-pagination-spacer",
+						"aria-hidden": "true"
+					})]
+				}) : null
+			]
+		});
+	};
+}
+function createNextApiReferenceLayout(config) {
+	return async function NextApiReferenceLayout(props) {
+		const { DocsLayout } = await import("fumadocs-ui/layouts/notebook");
+		const { apiReference, source } = await getNextApiReferenceSourceState(config);
+		const docsUrl = getDocsUrl(config);
+		const apiUrl = `/${apiReference.path}`;
+		const themeSwitch = resolveApiReferenceThemeSwitch(config.themeToggle);
+		const banner = mergeBanner(getExistingSidebarBanner(config), /* @__PURE__ */ jsx(ApiReferenceSwitcher, {
+			docsUrl,
+			apiUrl,
+			current: "api",
+			config
+		}));
+		return /* @__PURE__ */ jsxs("div", {
+			className: "fd-api-reference-route",
+			"data-api-reference": "",
+			children: [/* @__PURE__ */ jsx(DocsClientCallbacks, {}), /* @__PURE__ */ jsxs(DocsLayout, {
+				tree: source.getPageTree(),
+				sidebar: { banner },
+				themeSwitch,
+				nav: {
+					title: config.nav?.title ?? "Docs",
+					url: getDocsUrl(config)
+				},
+				children: [/* @__PURE__ */ jsx(ApiReferenceThemeBridge, { config }), props.children]
+			})]
+		});
+	};
+}
+async function getNextApiReferenceSourceState(config) {
+	const apiReference = resolveApiReferenceConfig(config.apiReference);
+	const [{ createOpenAPI, openapiPlugin, openapiSource }, { loader }] = await Promise.all([import("fumadocs-openapi/server"), import("fumadocs-core/source")]);
+	const baseUrl = await getOriginFromNextHeaders();
+	const document = await buildApiReferenceOpenApiDocumentAsync(config, {
+		framework: "next",
+		rootDir: process.cwd(),
+		baseUrl
+	});
+	const server = createOpenAPI({ input: async () => ({ main: document }) });
+	const info = getOpenApiInfo(document);
+	const source = loader(await openapiSource(server, {
+		per: "operation",
+		groupBy: "tag",
+		name(output, dereferenced) {
+			if (output.type !== "operation") return slugifyApiReferencePageName(output.item.name);
+			const operation = (dereferenced.paths?.[output.item.path])?.[output.item.method];
+			return slugifyApiReferencePageName(typeof operation?.summary === "string" && operation.summary.trim() ? operation.summary : typeof operation?.operationId === "string" && operation.operationId.trim() ? operation.operationId : `${output.item.method} ${output.item.path}`);
+		}
+	}), {
+		baseUrl: `/${apiReference.path}`,
+		plugins: [openapiPlugin()]
+	});
+	return {
+		apiReference,
+		document,
+		info,
+		pages: source.getPages(),
+		server,
+		source
+	};
+}
+function getNextApiReferenceMode(config) {
+	return resolveApiReferenceRenderer(config.apiReference, "next");
+}
 
 //#endregion
-export { buildNextOpenApiDocument, createNextApiReference, resolveApiReferenceConfig, withNextApiReferenceBanner };
+export { buildNextOpenApiDocument, createNextApiReference, createNextApiReferenceLayout, createNextApiReferencePage, getNextApiReferenceMode, getNextApiReferenceSourceState, resolveApiReferenceConfig, withNextApiReferenceBanner };

package/dist/client-callbacks.mjs

@@ -1,8 +1,8 @@
 "use client";
 
-import { jsx } from "react/jsx-runtime";
 import docsConfig from "@farming-labs/next-internal-docs-config";
 import { DocsClientHooks } from "@farming-labs/theme/client-hooks";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/client-callbacks.tsx
 function DocsClientCallbacks() {

package/dist/config.mjs

@@ -1,5 +1,6 @@
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, join } from "node:path";
+import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, isAbsolute, join, relative } from "node:path";
+import { fileURLToPath } from "node:url";
 import createMDX from "@next/mdx";
 
 //#region src/config.ts
@@ -103,6 +104,28 @@ export const GET = createNextApiReference(docsConfig);
 
 export const revalidate = false;
 `;
+const API_REFERENCE_PAGE_TEMPLATE = `\
+${GENERATED_BANNER}
+import "@farming-labs/next/api-reference.css";
+import docsConfig from "@/docs.config";
+import { createNextApiReferencePage } from "@farming-labs/next/api-reference";
+
+const ApiReferencePage = createNextApiReferencePage(docsConfig);
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+export default ApiReferencePage;
+`;
+const API_REFERENCE_LAYOUT_TEMPLATE = `\
+${GENERATED_BANNER}
+import docsConfig from "@/docs.config";
+import { createNextApiReferenceLayout } from "@farming-labs/next/api-reference";
+
+const ApiReferenceLayout = createNextApiReferenceLayout(docsConfig);
+
+export default ApiReferenceLayout;
+`;
 const FILE_EXTS = [
 	"tsx",
 	"ts",
@@ -110,6 +133,29 @@ const FILE_EXTS = [
 	"js"
 ];
 const INTERNAL_DOCS_CONFIG_ALIAS = "@farming-labs/next-internal-docs-config";
+const NEXT_PACKAGE_ROOT = fileURLToPath(new URL("..", import.meta.url));
+function resolvePackageAlias(packageName, fallbacks = []) {
+	return [join(NEXT_PACKAGE_ROOT, "node_modules", packageName), ...fallbacks.map((value) => join(NEXT_PACKAGE_ROOT, value))].find((value) => existsSync(value));
+}
+function resolvePackageSubpath(packageDir, relativePath) {
+	if (!isAbsolute(packageDir)) return `${packageDir}/${relativePath.replace(/^dist\//, "").replace(/\/index\.js$/, "")}`;
+	return join(packageDir, relativePath);
+}
+function toTurbopackAliasPath(root, value) {
+	if (!isAbsolute(value)) return value;
+	const relativePath = relative(root, value);
+	return relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
+}
+const FUMADOCS_OPENAPI_PACKAGE_ALIAS = resolvePackageAlias("fumadocs-openapi") ?? "fumadocs-openapi";
+const FUMADOCS_CORE_PACKAGE_ALIAS = resolvePackageAlias("fumadocs-core") ?? "fumadocs-core";
+const FUMADOCS_UI_PACKAGE_ALIAS = resolvePackageAlias("fumadocs-ui", ["node_modules/fumadocs-openapi/node_modules/fumadocs-ui", "../node_modules/fumadocs-ui"]) ?? "fumadocs-ui";
+const FUMADOCS_OPENAPI_UI_ALIAS = resolvePackageSubpath(FUMADOCS_OPENAPI_PACKAGE_ALIAS, "dist/ui/index.js");
+const FUMADOCS_OPENAPI_SERVER_ALIAS = resolvePackageSubpath(FUMADOCS_OPENAPI_PACKAGE_ALIAS, "dist/server/index.js");
+const FUMADOCS_CORE_FRAMEWORK_ALIAS = resolvePackageSubpath(FUMADOCS_CORE_PACKAGE_ALIAS, "dist/framework/index.js");
+const FUMADOCS_CORE_FRAMEWORK_NEXT_ALIAS = resolvePackageSubpath(FUMADOCS_CORE_PACKAGE_ALIAS, "dist/framework/next.js");
+const FUMADOCS_UI_NOTEBOOK_ALIAS = resolvePackageSubpath(FUMADOCS_UI_PACKAGE_ALIAS, "dist/layouts/notebook/index.js");
+const FUMADOCS_UI_NOTEBOOK_PAGE_ALIAS = resolvePackageSubpath(FUMADOCS_UI_PACKAGE_ALIAS, "dist/layouts/notebook/page/index.js");
+const FUMADOCS_UI_PROVIDER_NEXT_ALIAS = resolvePackageSubpath(FUMADOCS_UI_PACKAGE_ALIAS, "dist/provider/next.js");
 function isDocsWorkspaceRoot(root) {
 	return existsSync(join(root, "packages", "docs", "src", "index.ts")) && existsSync(join(root, "packages", "fumadocs", "src", "index.ts")) && existsSync(join(root, "packages", "next", "src", "config.ts"));
 }
@@ -201,27 +247,32 @@ function readApiReferenceConfig(root) {
 			if (content.match(/apiReference\s*:\s*false/)) return {
 				enabled: false,
 				path: "api-reference",
+				renderer: "fumadocs",
 				routeRoot: "api"
 			};
 			if (content.match(/apiReference\s*:\s*true/)) return {
 				enabled: true,
 				path: "api-reference",
+				renderer: "fumadocs",
 				routeRoot: "api"
 			};
 			const block = extractObjectLiteral(content, "apiReference");
 			if (!block) continue;
 			const enabledMatch = block.match(/enabled\s*:\s*(true|false)/);
 			const pathMatch = block.match(/path\s*:\s*["']([^"']+)["']/);
+			const rendererMatch = block.match(/renderer\s*:\s*["'](fumadocs|scalar)["']/);
 			const routeRootMatch = block.match(/routeRoot\s*:\s*["']([^"']+)["']/);
 			return {
 				enabled: enabledMatch ? enabledMatch[1] !== "false" : true,
 				path: pathMatch?.[1]?.replace(/^\/+|\/+$/g, "") || "api-reference",
+				renderer: rendererMatch?.[1] ?? "fumadocs",
 				routeRoot: routeRootMatch?.[1]?.replace(/^\/+|\/+$/g, "") || "api"
 			};
 		} catch {
 			return {
 				enabled: false,
 				path: "api-reference",
+				renderer: "fumadocs",
 				routeRoot: "api"
 			};
 		}
@@ -229,6 +280,7 @@ function readApiReferenceConfig(root) {
 	return {
 		enabled: false,
 		path: "api-reference",
+		renderer: "fumadocs",
 		routeRoot: "api"
 	};
 }
@@ -249,6 +301,9 @@ function extractObjectLiteral(content, key) {
 		if (depth === 0) return content.slice(braceStart + 1, index);
 	}
 }
+function removeManagedFile(filePath) {
+	if (isManagedGeneratedFile(filePath)) rmSync(filePath, { force: true });
+}
 function readMcpConfig(root) {
 	for (const ext of FILE_EXTS) {
 		const configPath = join(root, `docs.config.${ext}`);
@@ -316,10 +371,31 @@ function withDocs(nextConfig = {}) {
 	}
 	const apiReference = readApiReferenceConfig(root);
 	if (apiReference.enabled && !isStaticExport) {
-		const apiReferenceRouteDir = join(root, appDir, ...apiReference.path.split("/"), "[[...slug]]");
-		if (!hasFile(apiReferenceRouteDir, "route")) {
-			mkdirSync(apiReferenceRouteDir, { recursive: true });
-			writeFileSync(join(apiReferenceRouteDir, "route.ts"), API_REFERENCE_ROUTE_TEMPLATE);
+		const apiReferenceBaseDir = join(root, appDir, ...apiReference.path.split("/"));
+		const apiReferencePageDir = join(apiReferenceBaseDir, "[[...slug]]");
+		const apiReferencePagePath = join(apiReferencePageDir, "page.tsx");
+		const apiReferenceLayoutPath = join(apiReferenceBaseDir, "layout.tsx");
+		const apiReferenceRouteDir = join(apiReferenceBaseDir, "[[...slug]]");
+		const apiReferenceRoutePath = join(apiReferenceRouteDir, "route.ts");
+		const legacyApiReferencePagePath = join(apiReferenceBaseDir, "page.tsx");
+		if (apiReference.renderer === "fumadocs") {
+			removeManagedFile(apiReferenceRoutePath);
+			removeManagedFile(legacyApiReferencePagePath);
+			if (!hasFile(apiReferenceBaseDir, "layout") || isManagedGeneratedFile(apiReferenceLayoutPath)) {
+				mkdirSync(apiReferenceBaseDir, { recursive: true });
+				writeFileSync(apiReferenceLayoutPath, API_REFERENCE_LAYOUT_TEMPLATE);
+			}
+			if (!hasFile(apiReferencePageDir, "page") || isManagedGeneratedFile(apiReferencePagePath)) {
+				mkdirSync(apiReferencePageDir, { recursive: true });
+				writeFileSync(apiReferencePagePath, API_REFERENCE_PAGE_TEMPLATE);
+			}
+		} else {
+			removeManagedFile(apiReferenceLayoutPath);
+			removeManagedFile(apiReferencePagePath);
+			if (!hasFile(apiReferenceRouteDir, "route") || isManagedGeneratedFile(apiReferenceRoutePath)) {
+				mkdirSync(apiReferenceRouteDir, { recursive: true });
+				writeFileSync(apiReferenceRoutePath, API_REFERENCE_ROUTE_TEMPLATE);
+			}
 		}
 	}
 	const ogEndpoint = readOgEndpoint(root);
@@ -356,7 +432,17 @@ function withDocs(nextConfig = {}) {
 		resolveAlias: {
 			...workspaceRoot ? createDocsWorkspaceAliases() : {},
 			...existingResolveAlias,
-			[INTERNAL_DOCS_CONFIG_ALIAS]: docsConfigRelativeAlias
+			[INTERNAL_DOCS_CONFIG_ALIAS]: docsConfigRelativeAlias,
+			"fumadocs-openapi": toTurbopackAliasPath(root, FUMADOCS_OPENAPI_PACKAGE_ALIAS),
+			"fumadocs-openapi/ui": toTurbopackAliasPath(root, FUMADOCS_OPENAPI_UI_ALIAS),
+			"fumadocs-openapi/server": toTurbopackAliasPath(root, FUMADOCS_OPENAPI_SERVER_ALIAS),
+			"fumadocs-core": toTurbopackAliasPath(root, FUMADOCS_CORE_PACKAGE_ALIAS),
+			"fumadocs-core/framework": toTurbopackAliasPath(root, FUMADOCS_CORE_FRAMEWORK_ALIAS),
+			"fumadocs-core/framework/next": toTurbopackAliasPath(root, FUMADOCS_CORE_FRAMEWORK_NEXT_ALIAS),
+			"fumadocs-ui": toTurbopackAliasPath(root, FUMADOCS_UI_PACKAGE_ALIAS),
+			"fumadocs-ui/layouts/notebook": toTurbopackAliasPath(root, FUMADOCS_UI_NOTEBOOK_ALIAS),
+			"fumadocs-ui/layouts/notebook/page": toTurbopackAliasPath(root, FUMADOCS_UI_NOTEBOOK_PAGE_ALIAS),
+			"fumadocs-ui/provider/next": toTurbopackAliasPath(root, FUMADOCS_UI_PROVIDER_NEXT_ALIAS)
 		}
 	};
 	const userWebpack = nextConfig.webpack;
@@ -365,6 +451,16 @@ function withDocs(nextConfig = {}) {
 		resolvedConfig.resolve ??= {};
 		resolvedConfig.resolve.alias ??= {};
 		resolvedConfig.resolve.alias[INTERNAL_DOCS_CONFIG_ALIAS] = docsConfigAbsolutePath;
+		resolvedConfig.resolve.alias["fumadocs-openapi"] = FUMADOCS_OPENAPI_PACKAGE_ALIAS;
+		resolvedConfig.resolve.alias["fumadocs-openapi/ui"] = FUMADOCS_OPENAPI_UI_ALIAS;
+		resolvedConfig.resolve.alias["fumadocs-openapi/server"] = FUMADOCS_OPENAPI_SERVER_ALIAS;
+		resolvedConfig.resolve.alias["fumadocs-core"] = FUMADOCS_CORE_PACKAGE_ALIAS;
+		resolvedConfig.resolve.alias["fumadocs-core/framework"] = FUMADOCS_CORE_FRAMEWORK_ALIAS;
+		resolvedConfig.resolve.alias["fumadocs-core/framework/next"] = FUMADOCS_CORE_FRAMEWORK_NEXT_ALIAS;
+		resolvedConfig.resolve.alias["fumadocs-ui"] = FUMADOCS_UI_PACKAGE_ALIAS;
+		resolvedConfig.resolve.alias["fumadocs-ui/layouts/notebook"] = FUMADOCS_UI_NOTEBOOK_ALIAS;
+		resolvedConfig.resolve.alias["fumadocs-ui/layouts/notebook/page"] = FUMADOCS_UI_NOTEBOOK_PAGE_ALIAS;
+		resolvedConfig.resolve.alias["fumadocs-ui/provider/next"] = FUMADOCS_UI_PROVIDER_NEXT_ALIAS;
 		return resolvedConfig;
 	};
 	const existingTracingIncludes = nextConfig.outputFileTracingIncludes ?? {};

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { buildNextOpenApiDocument, createNextApiReference, resolveApiReferenceConfig, withNextApiReferenceBanner } from "./api-reference.mjs";
+import { buildNextOpenApiDocument, createNextApiReference, createNextApiReferenceLayout, createNextApiReferencePage, getNextApiReferenceMode, getNextApiReferenceSourceState, resolveApiReferenceConfig, withNextApiReferenceBanner } from "./api-reference.mjs";
 import { createDocsAPI, createDocsMCPAPI } from "./api.mjs";
 import { withDocs } from "./config.mjs";
-export { buildNextOpenApiDocument, createDocsAPI, createDocsMCPAPI, createNextApiReference, resolveApiReferenceConfig, withDocs, withNextApiReferenceBanner };
+export { buildNextOpenApiDocument, createDocsAPI, createDocsMCPAPI, createNextApiReference, createNextApiReferenceLayout, createNextApiReferencePage, getNextApiReferenceMode, getNextApiReferenceSourceState, resolveApiReferenceConfig, withDocs, withNextApiReferenceBanner };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { withDocs } from "./config.mjs";
 import { createDocsAPI, createDocsMCPAPI } from "./api.mjs";
-import { buildNextOpenApiDocument, createNextApiReference, resolveApiReferenceConfig, withNextApiReferenceBanner } from "./api-reference.mjs";
+import { buildNextOpenApiDocument, createNextApiReference, createNextApiReferenceLayout, createNextApiReferencePage, getNextApiReferenceMode, getNextApiReferenceSourceState, resolveApiReferenceConfig, withNextApiReferenceBanner } from "./api-reference.mjs";
 
-export { buildNextOpenApiDocument, createDocsAPI, createDocsMCPAPI, createNextApiReference, resolveApiReferenceConfig, withDocs, withNextApiReferenceBanner };
+export { buildNextOpenApiDocument, createDocsAPI, createDocsMCPAPI, createNextApiReference, createNextApiReferenceLayout, createNextApiReferencePage, getNextApiReferenceMode, getNextApiReferenceSourceState, resolveApiReferenceConfig, withDocs, withNextApiReferenceBanner };

package/dist/layout.mjs

@@ -1,5 +1,5 @@
-import { withNextApiReferenceBanner } from "./api-reference.mjs";
 import DocsClientCallbacks from "./client-callbacks.mjs";
+import { withNextApiReferenceBanner } from "./api-reference.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createDocsLayout, createDocsMetadata } from "@farming-labs/theme";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/next",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Next.js adapter for @farming-labs/docs — MDX config wrapper",
   "keywords": [
     "docs",
@@ -11,7 +11,8 @@
   "license": "MIT",
   "author": "Farming Labs",
   "files": [
-    "dist"
+    "dist",
+    "styles"
   ],
   "type": "module",
   "main": "./dist/index.mjs",
@@ -27,6 +28,7 @@
       "import": "./dist/api-reference.mjs",
       "default": "./dist/api-reference.mjs"
     },
+    "./api-reference.css": "./styles/api-reference.css",
     "./api": {
       "types": "./dist/api.d.mts",
       "import": "./dist/api.mjs",
@@ -73,7 +75,9 @@
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^16.1.6",
     "@scalar/nextjs-api-reference": "0.10.3",
+    "fumadocs-openapi": "^10.7.0",
     "fumadocs-core": "^16.6.1",
+    "fumadocs-ui": "^16.6.1",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-mdx-frontmatter": "^5.0.0"
@@ -81,11 +85,12 @@
   "devDependencies": {
     "@types/node": "^22.10.0",
     "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@farming-labs/docs": "0.1.10",
-    "@farming-labs/theme": "0.1.10"
+    "@farming-labs/docs": "0.1.12",
+    "@farming-labs/theme": "0.1.12"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/api-reference.css

@@ -0,0 +1,128 @@
+@import "tailwindcss";
+@import "fumadocs-ui/css/preset.css";
+@import "fumadocs-openapi/css/preset.css";
+
+@theme inline {
+  --color-fd-background: var(--color-fd-background);
+  --color-fd-foreground: var(--color-fd-foreground);
+  --color-fd-muted: var(--color-fd-muted);
+  --color-fd-muted-foreground: var(--color-fd-muted-foreground);
+  --color-fd-popover: var(--color-fd-popover);
+  --color-fd-popover-foreground: var(--color-fd-popover-foreground);
+  --color-fd-card: var(--color-fd-card);
+  --color-fd-card-foreground: var(--color-fd-card-foreground);
+  --color-fd-border: var(--color-fd-border);
+  --color-fd-primary: var(--color-fd-primary);
+  --color-fd-primary-foreground: var(--color-fd-primary-foreground);
+  --color-fd-secondary: var(--color-fd-secondary);
+  --color-fd-secondary-foreground: var(--color-fd-secondary-foreground);
+  --color-fd-accent: var(--color-fd-accent);
+  --color-fd-accent-foreground: var(--color-fd-accent-foreground);
+  --color-fd-ring: var(--color-fd-ring);
+  --color-fd-overlay: var(--color-fd-overlay);
+}
+
+@theme static {
+  --color-fd-info: oklch(62.3% 0.214 259.815);
+  --color-fd-warning: oklch(76.9% 0.188 70.08);
+  --color-fd-error: oklch(63.7% 0.237 25.331);
+  --color-fd-success: oklch(72.3% 0.219 149.579);
+  --color-fd-idea: oklch(70.5% 0.209 60.849);
+  --color-fd-diff-remove: rgba(200, 10, 100, 0.12);
+  --color-fd-diff-remove-symbol: rgb(230, 10, 100);
+  --color-fd-diff-add: rgba(14, 180, 100, 0.1);
+  --color-fd-diff-add-symbol: rgb(10, 200, 100);
+}
+
+:root,
+.dark {
+  --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+.fd-api-reference-route #nd-subnav {
+  display: none;
+}
+
+.fd-api-reference-route #nd-page.fd-api-reference-page > * {
+  width: 100%;
+  max-width: 1180px;
+}
+
+.fd-api-reference-route #nd-page.fd-api-reference-page > .prose {
+  max-width: 1180px;
+}
+
+.fd-api-reference-pagination {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.fd-api-reference-pagination-item {
+  display: flex;
+  min-height: 8.5rem;
+  flex-direction: column;
+  gap: 0.45rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 1rem;
+  background: var(--color-fd-card);
+  padding: 1.1rem 1.25rem;
+  text-decoration: none;
+  color: inherit;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    transform 150ms ease;
+}
+
+.fd-api-reference-pagination-item:hover {
+  border-color: color-mix(in srgb, var(--color-fd-primary) 30%, var(--color-fd-border));
+  background: color-mix(in srgb, var(--color-fd-accent) 45%, var(--color-fd-card));
+  transform: translateY(-1px);
+}
+
+.fd-api-reference-pagination-item[data-direction="next"] {
+  text-align: right;
+}
+
+.fd-api-reference-pagination-label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-fd-muted-foreground);
+}
+
+.fd-api-reference-pagination-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--color-fd-foreground);
+}
+
+.fd-api-reference-pagination-description {
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.92rem;
+  line-height: 1.5;
+}
+
+.fd-api-reference-pagination-spacer {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .fd-api-reference-route #nd-notebook-layout #nd-page {
+    padding-inline: 1.5rem;
+    padding-top: 2rem;
+  }
+
+  .fd-api-reference-route #nd-notebook-layout #nd-page::before {
+    display: none;
+  }
+}
+
+@media (max-width: 1023px) {
+  .fd-api-reference-pagination {
+    grid-template-columns: 1fr;
+  }
+}