@farming-labs/next 0.1.59 → 0.1.60

package/dist/api-reference.d.mts

@@ -10,6 +10,7 @@ interface NextApiReferenceSourceState {
     title: string;
     description?: string;
   };
+  primaryServerUrl?: string;
   pages: Array<{
     url: string;
   } & Record<string, any>>;
@@ -21,6 +22,7 @@ interface NextApiReferenceSourceState {
   };
 }
 declare function buildNextOpenApiDocument(config: DocsConfig): Record<string, unknown>;
+declare function flattenApiReferencePageTreeForSidebar(tree: any): any;
 declare function withNextApiReferenceBanner(config: DocsConfig): DocsConfig;
 declare function createNextApiReference(config: DocsConfig): (request?: Request) => Promise<Response>;
 declare function createNextApiReferencePage(config: DocsConfig): (props?: {
@@ -36,4 +38,4 @@ declare function createNextApiReferenceLayout(config: DocsConfig): (props: {
 declare function getNextApiReferenceSourceState(config: DocsConfig): Promise<NextApiReferenceSourceState>;
 declare function getNextApiReferenceMode(config: DocsConfig): "fumadocs" | "scalar";
 //#endregion
-export { NextApiReferenceSourceState, buildNextOpenApiDocument, createNextApiReference, createNextApiReferenceLayout, createNextApiReferencePage, getNextApiReferenceMode, getNextApiReferenceSourceState, resolveApiReferenceConfig, withNextApiReferenceBanner };
+export { NextApiReferenceSourceState, buildNextOpenApiDocument, createNextApiReference, createNextApiReferenceLayout, createNextApiReferencePage, flattenApiReferencePageTreeForSidebar, getNextApiReferenceMode, getNextApiReferenceSourceState, resolveApiReferenceConfig, withNextApiReferenceBanner };

package/dist/api-reference.mjs

@@ -115,11 +115,21 @@ function getForwardedHeaderValue(value) {
 	if (!value) return void 0;
 	return value.split(",").map((entry) => entry.trim()).find(Boolean) || void 0;
 }
+function getOriginFromHeaderUrl(value) {
+	if (!value) return void 0;
+	try {
+		return new URL(value).origin;
+	} catch {
+		return;
+	}
+}
 async function getOriginFromNextHeaders() {
 	const { headers } = await import("next/headers");
 	const headerList = await headers();
+	const hintedOrigin = getOriginFromHeaderUrl(headerList.get("origin")) ?? getOriginFromHeaderUrl(headerList.get("referer"));
+	if (hintedOrigin) return hintedOrigin;
 	const host = getForwardedHeaderValue(headerList.get("x-forwarded-host")) ?? getForwardedHeaderValue(headerList.get("host"));
-	if (!host) return void 0;
+	if (!host || host === "loading") return process.env.FARMING_LABS_DOCS_DEV_ORIGIN;
 	return `${getForwardedHeaderValue(headerList.get("x-forwarded-proto")) ?? "https"}://${host}`;
 }
 function buildPathParameters(fsSegments) {
@@ -255,6 +265,8 @@ function buildNextOpenApiDocument(config) {
 function SwitcherGlyph({ kind, radius, active }) {
 	const isApi = kind === "api";
 	return /* @__PURE__ */ jsx("span", {
+		className: "fd-api-reference-switcher-glyph",
+		"data-active": active ? "true" : "false",
 		"aria-hidden": "true",
 		style: {
 			display: "inline-flex",
@@ -262,11 +274,8 @@ function SwitcherGlyph({ kind, radius, active }) {
 			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: 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)"
+			color: active ? "var(--color-fd-primary, currentColor)" : "var(--fd-api-switcher-muted, var(--color-fd-muted-foreground, rgba(255,255,255,0.72)))",
+			borderRadius: radius
 		},
 		children: isApi ? /* @__PURE__ */ jsx("svg", {
 			width: "13",
@@ -296,12 +305,12 @@ function SwitcherGlyph({ kind, radius, active }) {
 }
 function ChevronStack() {
 	return /* @__PURE__ */ jsxs("span", {
+		className: "fd-api-reference-switcher-chevron",
 		"aria-hidden": "true",
 		style: {
 			display: "inline-flex",
 			flexDirection: "column",
-			gap: 2,
-			color: "var(--color-fd-muted-foreground, rgba(255,255,255,0.65))"
+			gap: 2
 		},
 		children: [/* @__PURE__ */ jsx("svg", {
 			width: "11",
@@ -475,9 +484,42 @@ function ApiReferenceThemeBridge({ config }) {
 		forcedTheme ? /* @__PURE__ */ jsx(ApiReferenceForcedThemeScript, { theme: forcedTheme }) : null
 	] });
 }
+function ApiReferenceServerUrlPatchScript({ serverUrl }) {
+	if (!serverUrl) return null;
+	return /* @__PURE__ */ jsx("script", {
+		id: "fd-api-reference-server-url-patch",
+		dangerouslySetInnerHTML: { __html: `(function () {
+    var raw = ${JSON.stringify(serverUrl)};
+    var resolve = function () {
+      try {
+        return new URL(raw, window.location.origin).toString();
+      } catch {
+        return window.location.origin;
+      }
+    };
+    var apply = function () {
+      var label = resolve();
+      document
+        .querySelectorAll('.fd-api-reference-route button[aria-haspopup="dialog"] code.truncate')
+        .forEach(function (node) {
+          if (node.textContent && node.textContent.trim() === 'loading...') {
+            node.textContent = label;
+          }
+        });
+    };
+
+    apply();
+    window.requestAnimationFrame(apply);
+    window.setTimeout(apply, 200);
+    window.setTimeout(apply, 1200);
+  })();` }
+	});
+}
 function SwitcherOption({ href, kind, title, description, current, config }) {
 	const theme = getApiReferenceSwitcherTheme(config);
 	return /* @__PURE__ */ jsxs(Link, {
+		className: "fd-api-reference-switcher-option",
+		"data-current": current ? "true" : "false",
 		href,
 		prefetch: true,
 		style: {
@@ -489,7 +531,6 @@ function SwitcherOption({ href, kind, title, description, current, config }) {
 			borderRadius: "0.625rem",
 			textDecoration: "none",
 			color: "inherit",
-			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", {
@@ -530,27 +571,30 @@ function SwitcherOption({ href, kind, title, description, current, config }) {
 function ApiReferenceSwitcher({ docsUrl, apiUrl, current, config }) {
 	const currentLabel = current === "api" ? "API Reference" : "Documentation";
 	const theme = getApiReferenceSwitcherTheme(config);
+	const themeStyle = resolveApiReferenceThemeStyle(config);
+	const switcherStyle = {
+		position: "relative",
+		marginBottom: 16,
+		overflow: "hidden",
+		backgroundImage: theme.backgroundImage,
+		boxShadow: theme.boxShadow,
+		["--fd-api-switcher-card-radius"]: theme.cardRadius,
+		["--fd-api-switcher-icon-radius"]: theme.iconRadius,
+		["--fd-api-switcher-shadow"]: theme.boxShadow
+	};
 	return /* @__PURE__ */ jsxs("details", {
-		style: {
-			position: "relative",
-			marginBottom: 16,
-			borderRadius: theme.cardRadius,
-			border: "1px solid color-mix(in srgb, var(--color-fd-border, #2a2a2a) 100%, transparent)",
-			background: "color-mix(in srgb, var(--color-fd-card, #141414) 94%, transparent)",
-			boxShadow: theme.boxShadow,
-			overflow: "hidden",
-			backgroundImage: theme.backgroundImage
-		},
+		className: "fd-api-reference-switcher",
+		"data-theme-style": themeStyle,
+		style: switcherStyle,
 		children: [/* @__PURE__ */ jsxs("summary", {
+			className: "fd-api-reference-switcher-summary",
 			style: {
-				listStyle: "none",
 				display: "flex",
 				alignItems: "center",
 				justifyContent: "space-between",
 				gap: 10,
 				cursor: "pointer",
-				padding: "10px 13px",
-				background: "color-mix(in srgb, var(--color-fd-card, #202020) 96%, transparent)"
+				padding: "10px 13px"
 			},
 			children: [/* @__PURE__ */ jsxs("span", {
 				style: {
@@ -573,12 +617,12 @@ function ApiReferenceSwitcher({ docsUrl, apiUrl, current, config }) {
 				})]
 			}), /* @__PURE__ */ jsx(ChevronStack, {})]
 		}), /* @__PURE__ */ jsxs("div", {
+			className: "fd-api-reference-switcher-options",
 			style: {
 				display: "flex",
 				flexDirection: "column",
 				gap: 2,
-				padding: "8px 8px 9px",
-				background: "color-mix(in srgb, var(--color-fd-card, #151515) 96%, transparent)"
+				padding: "8px 8px 9px"
 			},
 			children: [/* @__PURE__ */ jsx(SwitcherOption, {
 				href: docsUrl,
@@ -602,6 +646,9 @@ function getExistingSidebarBanner(config) {
 	if (!config.sidebar || config.sidebar === true) return void 0;
 	return config.sidebar.banner;
 }
+function resolveApiReferenceThemeStyle(config) {
+	if ((config.theme?.name?.toLowerCase() ?? "").includes("colorful")) return "colorful";
+}
 function mergeBanner(existing, next) {
 	if (!existing) return next;
 	return /* @__PURE__ */ jsxs("div", {
@@ -613,6 +660,45 @@ function mergeBanner(existing, next) {
 		children: [existing, next]
 	});
 }
+function flattenApiReferencePageTreeForSidebar(tree) {
+	if (!tree || typeof tree !== "object") return tree;
+	const root = tree;
+	if (!Array.isArray(root.children) || root.children.length !== 1) return tree;
+	const [onlyChild] = root.children;
+	if (!onlyChild || typeof onlyChild !== "object") return tree;
+	const folder = onlyChild;
+	if (folder.type !== "folder" || !Array.isArray(folder.children)) return tree;
+	const nextChildren = [...folder.index ? [folder.index] : [], ...folder.children];
+	if (nextChildren.length === 0) return tree;
+	return {
+		...root,
+		children: nextChildren
+	};
+}
+function renderApiReferenceOperationLayout(slots) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fd-api-reference-operation",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "fd-api-reference-operation-main",
+			children: [
+				slots.header,
+				slots.apiPlayground,
+				slots.description ? /* @__PURE__ */ jsx("div", {
+					className: "fd-api-reference-operation-description",
+					children: slots.description
+				}) : null,
+				slots.authSchemes,
+				slots.parameters,
+				slots.body,
+				slots.responses,
+				slots.callbacks
+			]
+		}), slots.apiExample ? /* @__PURE__ */ jsx("div", {
+			className: "fd-api-reference-operation-example",
+			children: slots.apiExample
+		}) : null]
+	});
+}
 function withNextApiReferenceBanner(config) {
 	const apiReference = resolveApiReferenceConfig(config.apiReference);
 	if (!apiReference.enabled) return config;
@@ -678,7 +764,7 @@ function getOpenApiInfo(document) {
 }
 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 [{ createAPIPage }, { 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, {
@@ -686,15 +772,18 @@ function createNextApiReferencePage(config) {
 			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."
-				}) })
+				/* @__PURE__ */ jsx("div", {
+					className: "fd-api-reference-body",
+					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 APIPage = createAPIPage(server, { content: { renderOperationLayout: renderApiReferenceOperationLayout } });
 		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;
@@ -706,7 +795,10 @@ function createNextApiReferencePage(config) {
 			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() }) }),
+				/* @__PURE__ */ jsx("div", {
+					className: "fd-api-reference-body",
+					children: /* @__PURE__ */ jsx(APIPage, { ...page.data.getAPIPageProps() })
+				}),
 				previousPage || nextPage ? /* @__PURE__ */ jsxs("nav", {
 					className: "fd-api-reference-pagination",
 					"aria-label": "API reference pagination",
@@ -763,10 +855,12 @@ function createNextApiReferencePage(config) {
 function createNextApiReferenceLayout(config) {
 	return async function NextApiReferenceLayout(props) {
 		const { DocsLayout } = await import("fumadocs-ui/layouts/notebook");
-		const { apiReference, source } = await getNextApiReferenceSourceState(config);
+		const { apiReference, primaryServerUrl, source } = await getNextApiReferenceSourceState(config);
+		const sidebarTree = flattenApiReferencePageTreeForSidebar(source.getPageTree());
 		const docsUrl = getDocsUrl(config);
 		const apiUrl = `/${apiReference.path}`;
 		const themeSwitch = resolveApiReferenceThemeSwitch(config.themeToggle);
+		const themeStyle = resolveApiReferenceThemeStyle(config);
 		const banner = mergeBanner(getExistingSidebarBanner(config), /* @__PURE__ */ jsx(ApiReferenceSwitcher, {
 			docsUrl,
 			apiUrl,
@@ -776,15 +870,20 @@ function createNextApiReferenceLayout(config) {
 		return /* @__PURE__ */ jsxs("div", {
 			className: "fd-api-reference-route",
 			"data-api-reference": "",
-			children: [/* @__PURE__ */ jsx(DocsClientCallbacks, {}), /* @__PURE__ */ jsxs(DocsLayout, {
-				tree: source.getPageTree(),
+			"data-theme-style": themeStyle,
+			children: [/* @__PURE__ */ jsx(DocsClientCallbacks, { apiReferencePrimaryServerUrl: primaryServerUrl }), /* @__PURE__ */ jsxs(DocsLayout, {
+				tree: sidebarTree,
 				sidebar: { banner },
 				themeSwitch,
 				nav: {
 					title: config.nav?.title ?? "Docs",
 					url: getDocsUrl(config)
 				},
-				children: [/* @__PURE__ */ jsx(ApiReferenceThemeBridge, { config }), props.children]
+				children: [
+					/* @__PURE__ */ jsx(ApiReferenceThemeBridge, { config }),
+					/* @__PURE__ */ jsx(ApiReferenceServerUrlPatchScript, { serverUrl: primaryServerUrl }),
+					props.children
+				]
 			})]
 		});
 	};
@@ -816,6 +915,7 @@ async function getNextApiReferenceSourceState(config) {
 		apiReference,
 		document,
 		info,
+		primaryServerUrl: Array.isArray(document.servers) && typeof document.servers?.[0]?.url === "string" ? document.servers?.[0]?.url ?? void 0 : void 0,
 		pages: source.getPages(),
 		server,
 		source
@@ -826,4 +926,4 @@ function getNextApiReferenceMode(config) {
 }
 
 //#endregion
-export { buildNextOpenApiDocument, createNextApiReference, createNextApiReferenceLayout, createNextApiReferencePage, getNextApiReferenceMode, getNextApiReferenceSourceState, resolveApiReferenceConfig, withNextApiReferenceBanner };
+export { buildNextOpenApiDocument, createNextApiReference, createNextApiReferenceLayout, createNextApiReferencePage, flattenApiReferencePageTreeForSidebar, getNextApiReferenceMode, getNextApiReferenceSourceState, resolveApiReferenceConfig, withNextApiReferenceBanner };

package/dist/changelog-rail-search.d.mts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/changelog-rail-search.d.ts
 interface ChangelogDirectoryEntry {

package/dist/changelog-rail-search.mjs

@@ -1,8 +1,8 @@
 "use client";
 
 import Link from "next/link";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/changelog-rail-search.tsx
 const MAGIC_PROSE = "fd-changelog-prose prose dark:prose-invert max-w-none min-w-0 prose-headings:scroll-mt-8 prose-headings:font-semibold prose-a:no-underline prose-headings:tracking-tight prose-headings:text-balance prose-p:tracking-tight prose-p:text-balance";

package/dist/changelog.d.mts

@@ -1,7 +1,7 @@
+import { ComponentType } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { DocsConfig } from "@farming-labs/theme";
 import { ChangelogFrontmatter } from "@farming-labs/docs";
-import { ComponentType } from "react";
 import { Metadata } from "next";
 
 //#region src/changelog.d.ts

package/dist/changelog.mjs

@@ -3,10 +3,10 @@ import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import { createElement, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPageMetadata } from "@farming-labs/theme";
 import { resolveChangelogConfig } from "@farming-labs/docs";
-import { createElement, isValidElement } from "react";
 
 //#region src/changelog.tsx
 function formatDisplayDate(value) {

package/dist/client-callbacks.d.mts

@@ -1,6 +1,8 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client-callbacks.d.ts
-declare function DocsClientCallbacks(): react_jsx_runtime0.JSX.Element;
+declare function DocsClientCallbacks(props?: {
+  apiReferencePrimaryServerUrl?: string;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DocsClientCallbacks as default };

package/dist/client-callbacks.mjs

@@ -1,11 +1,36 @@
 "use client";
 
+import { useEffect } from "react";
 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() {
+function resolveApiReferenceServerLabel(url) {
+	if (!url) return window.location.origin;
+	try {
+		return new URL(url, window.location.origin).toString();
+	} catch {
+		return window.location.origin;
+	}
+}
+function DocsClientCallbacks(props) {
+	useEffect(() => {
+		if (!props?.apiReferencePrimaryServerUrl) return;
+		const nextLabel = resolveApiReferenceServerLabel(props.apiReferencePrimaryServerUrl);
+		const timers = [
+			0,
+			200,
+			1e3
+		].map((delay) => window.setTimeout(() => {
+			document.querySelectorAll(".fd-api-reference-route button[aria-haspopup=\"dialog\"] code.truncate").forEach((node) => {
+				if (node.textContent?.trim() === "loading...") node.textContent = nextLabel;
+			});
+		}, delay));
+		return () => {
+			timers.forEach((timer) => window.clearTimeout(timer));
+		};
+	}, [props?.apiReferencePrimaryServerUrl]);
 	return /* @__PURE__ */ jsx(DocsClientHooks, {
 		onCopyClick: docsConfig.onCopyClick,
 		onFeedback: docsConfig.feedback && typeof docsConfig.feedback === "object" ? docsConfig.feedback.onFeedback : void 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/next",
-  "version": "0.1.59",
+  "version": "0.1.60",
   "description": "Next.js adapter for @farming-labs/docs — MDX config wrapper",
   "keywords": [
     "docs",
@@ -95,8 +95,8 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@farming-labs/docs": "0.1.59",
-    "@farming-labs/theme": "0.1.59"
+    "@farming-labs/docs": "0.1.60",
+    "@farming-labs/theme": "0.1.60"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/api-reference.css

@@ -39,17 +39,238 @@
   --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
 }
 
+.fd-api-reference-switcher {
+  --fd-api-switcher-card-radius: var(--radius, 0.75rem);
+  --fd-api-switcher-icon-radius: var(--radius, 0.75rem);
+  --fd-api-switcher-shadow: none;
+  --fd-api-switcher-surface: var(--color-fd-card);
+  --fd-api-switcher-summary-surface: color-mix(
+    in srgb,
+    var(--color-fd-secondary) 72%,
+    var(--color-fd-card) 28%
+  );
+  --fd-api-switcher-border: color-mix(in srgb, var(--color-fd-border) 92%, transparent);
+  --fd-api-switcher-muted: rgb(71 85 105 / 0.84);
+  --fd-api-switcher-current-surface: color-mix(
+    in srgb,
+    var(--color-fd-primary, rgb(214 145 0)) 12%,
+    var(--color-fd-card) 88%
+  );
+  --fd-api-switcher-current-border: color-mix(
+    in srgb,
+    var(--color-fd-primary, rgb(214 145 0)) 22%,
+    transparent
+  );
+  --fd-api-switcher-glyph-surface: color-mix(
+    in srgb,
+    var(--color-fd-secondary) 64%,
+    var(--color-fd-card) 36%
+  );
+}
+
+.dark .fd-api-reference-switcher {
+  --fd-api-switcher-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
+  --fd-api-switcher-surface: color-mix(in srgb, rgb(20 20 20) 94%, transparent);
+  --fd-api-switcher-summary-surface: color-mix(in srgb, rgb(28 28 28) 96%, transparent);
+  --fd-api-switcher-border: rgb(255 255 255 / 0.08);
+  --fd-api-switcher-muted: rgb(255 255 255 / 0.68);
+  --fd-api-switcher-current-surface: color-mix(
+    in srgb,
+    var(--color-fd-primary, rgb(250 204 21)) 18%,
+    transparent
+  );
+  --fd-api-switcher-current-border: color-mix(
+    in srgb,
+    var(--color-fd-primary, rgb(250 204 21)) 22%,
+    rgb(255 255 255 / 0.08)
+  );
+  --fd-api-switcher-glyph-surface: color-mix(in srgb, rgb(28 28 28) 94%, transparent);
+}
+
+.fd-api-reference-switcher {
+  border: 1px solid var(--fd-api-switcher-border);
+  border-radius: var(--fd-api-switcher-card-radius);
+  background: var(--fd-api-switcher-surface);
+  box-shadow: var(--fd-api-switcher-shadow);
+}
+
+.fd-api-reference-switcher-summary {
+  list-style: none;
+  background: var(--fd-api-switcher-summary-surface);
+  border-radius: calc(var(--fd-api-switcher-card-radius) - 1px);
+  color: inherit;
+  border-bottom: 1px solid color-mix(in srgb, var(--fd-api-switcher-border) 72%, transparent);
+}
+
+.fd-api-reference-switcher-summary::-webkit-details-marker {
+  display: none;
+}
+
+.fd-api-reference-switcher-options {
+  background: var(--fd-api-switcher-surface);
+}
+
+.fd-api-reference-switcher-option {
+  border: 1px solid transparent;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+.fd-api-reference-switcher-option:hover {
+  background: color-mix(in srgb, var(--color-fd-accent) 55%, transparent);
+}
+
+.fd-api-reference-switcher-option[data-current="true"] {
+  background: var(--fd-api-switcher-current-surface);
+  border-color: var(--fd-api-switcher-current-border);
+}
+
+.fd-api-reference-switcher-glyph {
+  border: 1px solid var(--fd-api-switcher-border);
+  border-radius: var(--fd-api-switcher-icon-radius);
+  background: var(--fd-api-switcher-glyph-surface);
+  box-shadow: var(--fd-api-switcher-shadow);
+}
+
+.fd-api-reference-switcher-glyph[data-active="false"] {
+  color: var(--fd-api-switcher-muted);
+}
+
+.fd-api-reference-switcher-chevron {
+  color: var(--fd-api-switcher-muted);
+}
+
+.light .fd-api-reference-switcher {
+  --fd-api-switcher-surface: var(--color-fd-card);
+  --fd-api-switcher-summary-surface: color-mix(
+    in srgb,
+    var(--color-fd-primary) 12%,
+    var(--color-fd-card) 88%
+  );
+  --fd-api-switcher-current-surface: color-mix(
+    in srgb,
+    var(--color-fd-primary) 14%,
+    var(--color-fd-card) 86%
+  );
+  --fd-api-switcher-glyph-surface: color-mix(
+    in srgb,
+    var(--color-fd-primary) 10%,
+    var(--color-fd-card) 90%
+  );
+}
+
+.light .fd-api-reference-route article .border,
+.light .fd-api-reference-route article [class*=" border"],
+.light .fd-api-reference-route article [class^="border"] {
+  border-color: rgb(15 23 42 / 0.12);
+}
+
+.light .fd-api-reference-route article .bg-fd-card,
+.light .fd-api-reference-route article .bg-fd-background {
+  background: color-mix(in srgb, rgb(255 255 255) 95%, rgb(245 241 232) 5%);
+}
+
+.light .fd-api-reference-route article .shadow-md,
+.light .fd-api-reference-route article .shadow-sm {
+  box-shadow:
+    0 1px 2px rgb(15 23 42 / 0.05),
+    0 10px 30px rgb(15 23 42 / 0.04);
+}
+
+.light .fd-api-reference-route article .text-fd-muted-foreground {
+  color: rgb(71 85 105 / 0.9);
+}
+
+.light .fd-api-reference-switcher[data-theme-style="colorful"] .fd-api-reference-switcher-summary {
+  background: color-mix(in srgb, var(--color-fd-primary) 18%, white 82%);
+  color: var(--color-fd-primary);
+}
+
+.light .fd-api-reference-switcher[data-theme-style="colorful"] {
+  border-color: color-mix(in srgb, var(--color-fd-primary) 28%, var(--color-fd-border));
+  background: var(--color-fd-card);
+  box-shadow: none;
+}
+
+.light
+  .fd-api-reference-switcher[data-theme-style="colorful"]
+  .fd-api-reference-switcher-summary
+  .fd-api-reference-switcher-chevron {
+  color: color-mix(in srgb, var(--color-fd-primary) 78%, black 22%);
+}
+
+.light
+  .fd-api-reference-switcher[data-theme-style="colorful"]
+  .fd-api-reference-switcher-summary
+  .fd-api-reference-switcher-glyph {
+  background: color-mix(in srgb, var(--color-fd-primary) 24%, white 76%);
+  border-color: color-mix(in srgb, var(--color-fd-primary) 38%, var(--color-fd-border));
+  color: var(--color-fd-primary);
+}
+
+.light .fd-api-reference-switcher[data-theme-style="colorful"] .fd-api-reference-switcher-options {
+  background: var(--color-fd-card);
+}
+
+.light
+  .fd-api-reference-switcher[data-theme-style="colorful"]
+  .fd-api-reference-switcher-option[data-current="true"] {
+  background: color-mix(in srgb, var(--color-fd-primary) 18%, white 82%);
+  border-color: color-mix(in srgb, var(--color-fd-primary) 32%, var(--color-fd-border));
+}
+
+.light
+  .fd-api-reference-route[data-theme-style="colorful"]
+  .fd-api-reference-pagination-item:hover {
+  border-color: color-mix(in srgb, var(--color-fd-primary) 36%, var(--color-fd-border));
+  background: color-mix(in srgb, var(--color-fd-card) 88%, var(--color-fd-primary) 12%);
+}
+
 .fd-api-reference-route #nd-subnav {
   display: none;
 }
 
 .fd-api-reference-route #nd-page.fd-api-reference-page > * {
   width: 100%;
-  max-width: 1180px;
+  max-width: 1285px;
+}
+
+.fd-api-reference-route #nd-page.fd-api-reference-page > .fd-api-reference-body {
+  width: 100%;
+  max-width: none;
 }
 
-.fd-api-reference-route #nd-page.fd-api-reference-page > .prose {
-  max-width: 1180px;
+.fd-api-reference-route
+  #nd-page.fd-api-reference-page
+  > .fd-api-reference-body
+  > .flex.flex-col.gap-24.text-sm {
+  width: 100%;
+}
+
+.fd-api-reference-operation {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem 1.5rem;
+}
+
+.fd-api-reference-operation-main {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.fd-api-reference-operation-description {
+  margin-top: 0.9rem;
+  color: var(--color-fd-muted-foreground);
+}
+
+.fd-api-reference-operation-description > * {
+  margin: 0;
+}
+
+.fd-api-reference-operation-example {
+  min-width: 0;
 }
 
 .fd-api-reference-pagination {
@@ -121,6 +342,21 @@
   }
 }
 
+@media (min-width: 960px) {
+  .fd-api-reference-operation {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem);
+    align-items: start;
+  }
+
+  .fd-api-reference-operation-example {
+    position: sticky;
+    top: calc(var(--fd-docs-row-1, 2rem) + 1rem);
+    width: min(100%, 25rem);
+    justify-self: end;
+  }
+}
+
 @media (max-width: 1023px) {
   .fd-api-reference-pagination {
     grid-template-columns: 1fr;