@farming-labs/next 0.0.60 → 0.0.62

package/dist/api-reference.d.mts

@@ -1,9 +1,9 @@
-import { ApiReferenceConfig, DocsConfig } from "@farming-labs/docs";
+import { resolveApiReferenceConfig } from "@farming-labs/docs/server";
+import { DocsConfig } from "@farming-labs/docs";
 
 //#region src/api-reference.d.ts
-declare function resolveApiReferenceConfig(value: DocsConfig["apiReference"]): Required<ApiReferenceConfig>;
 declare function buildNextOpenApiDocument(config: DocsConfig): Record<string, unknown>;
 declare function withNextApiReferenceBanner(config: DocsConfig): DocsConfig;
-declare function createNextApiReference(config: DocsConfig): () => Response;
+declare function createNextApiReference(config: DocsConfig): () => Promise<Response>;
 //#endregion
 export { buildNextOpenApiDocument, createNextApiReference, resolveApiReferenceConfig, withNextApiReferenceBanner };

package/dist/api-reference.mjs

@@ -1,194 +1,22 @@
 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";
 
 //#region src/api-reference.tsx
 const ROUTE_FILE_RE = /^route\.(ts|tsx|js|jsx)$/;
 const METHOD_RE = /export\s+(?:async\s+function|function|const)\s+(GET|POST|PUT|PATCH|DELETE|OPTIONS|HEAD)\b/g;
-function resolveTheme(config) {
-	return config.theme;
-}
-function buildScalarCustomCss(config) {
-	const theme = resolveTheme(config);
-	const colors = theme?.ui?.colors;
-	const typography = theme?.ui?.typography?.font?.style;
-	const layout = theme?.ui?.layout;
-	const primary = colors?.primary ?? "#6366f1";
-	const border = colors?.border ?? "#2a2a2a";
-	const muted = colors?.muted ?? "#64748b";
-	const background = colors?.background ?? "#ffffff";
-	const card = colors?.card ?? background;
-	const foreground = colors?.foreground ?? "#1b1b1b";
-	const sidebarWidth = layout?.sidebarWidth ?? 280;
-	return `
-:root {
-  --scalar-font: ${typography?.sans ?? "\"Geist\", \"Inter\", \"Segoe UI\", sans-serif"};
-  --scalar-font-code: ${typography?.mono ?? "\"Geist Mono\", \"SFMono-Regular\", \"Menlo\", monospace"};
-  --scalar-theme-primary: ${primary};
-  --scalar-theme-border: ${border};
-  --scalar-theme-muted: ${muted};
-  --scalar-theme-background: ${background};
-  --scalar-theme-card: ${card};
-  --scalar-theme-foreground: ${foreground};
-}
-
-.dark-mode {
-  --scalar-background-1: color-mix(in srgb, #0b0c0b 98%, var(--scalar-theme-primary) 2%);
-  --scalar-background-2: color-mix(in srgb, #111311 96%, var(--scalar-theme-primary) 4%);
-  --scalar-background-3: color-mix(in srgb, #171917 95%, var(--scalar-theme-primary) 5%);
-  --scalar-color-1: rgba(255, 255, 255, 0.96);
-  --scalar-color-2: rgba(255, 255, 255, 0.72);
-  --scalar-color-3: rgba(255, 255, 255, 0.5);
-  --scalar-color-accent: var(--scalar-theme-primary);
-  --scalar-sidebar-color-active: var(--scalar-theme-primary);
-  --scalar-sidebar-item-active-background: color-mix(
-    in srgb,
-    var(--scalar-theme-primary) 7%,
-    transparent
-  );
-  --scalar-border-color: color-mix(
-    in srgb,
-    var(--scalar-theme-border) 22%,
-    rgba(255, 255, 255, 0.032)
-  );
-  --scalar-button-1: var(--scalar-theme-primary);
-  --scalar-button-1-color: #ffffff;
-  --scalar-button-1-hover: color-mix(in srgb, var(--scalar-theme-primary) 88%, white 12%);
-}
-
-.light-mode {
-  --scalar-background-1: var(--scalar-theme-background);
-  --scalar-background-2: color-mix(in srgb, var(--scalar-theme-card) 92%, white 8%);
-  --scalar-background-3: color-mix(in srgb, var(--scalar-theme-card) 84%, black 4%);
-  --scalar-color-1: var(--scalar-theme-foreground);
-  --scalar-color-2: var(--scalar-theme-muted);
-  --scalar-color-3: color-mix(in srgb, var(--scalar-theme-muted) 78%, white 22%);
-  --scalar-color-accent: var(--scalar-theme-primary);
-  --scalar-sidebar-color-active: var(--scalar-theme-primary);
-  --scalar-sidebar-item-active-background: color-mix(
-    in srgb,
-    var(--scalar-theme-primary) 5%,
-    transparent
-  );
-  --scalar-border-color: color-mix(in srgb, var(--scalar-theme-border) 42%, white 58%);
-  --scalar-button-1: var(--scalar-theme-primary);
-  --scalar-button-1-color: #ffffff;
-  --scalar-button-1-hover: color-mix(in srgb, var(--scalar-theme-primary) 88%, black 12%);
-}
-
-body {
-  background: var(--scalar-background-1);
-}
-
-.t-doc__sidebar {
-  width: min(${sidebarWidth}px, 100vw);
-  border-right: 1px solid var(--scalar-border-color);
-}
-
-.scalar-card,
-.t-doc__sidebar,
-.references-layout .reference-layout__content .request-card,
-.references-layout .reference-layout__content .response-card,
-.references-layout .reference-layout__content .scalar-card-header,
-.references-layout .reference-layout__content .scalar-card-footer,
-.references-layout .reference-layout__content .section,
-.references-layout .reference-layout__content .section-container {
-  border-color: var(--scalar-border-color) !important;
-}
-
-.t-doc__sidebar,
-.t-doc__sidebar * {
-  font-family: var(--scalar-font);
-}
-
-.t-doc__sidebar .sidebar-search {
-  margin: 0.5rem 0 1rem;
-}
-
-.t-doc__sidebar .sidebar-search input {
-  border-radius: 14px;
-}
-
-.t-doc__sidebar .sidebar-item,
-.t-doc__sidebar .sidebar-heading {
-  border-radius: 14px;
-}
-
-.t-doc__sidebar .sidebar-group-label {
-  font-size: 0.72rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--scalar-color-3);
-}
-
-.t-doc__sidebar .sidebar-item--active {
-  font-weight: 600;
-}
-
-.scalar-card,
-.references-layout .reference-layout__content .request-card,
-.references-layout .reference-layout__content .response-card {
-  border-radius: 18px;
-}
-
-.references-layout .reference-layout__content {
-  padding-top: 1.5rem;
-}
-
-.references-layout .section-content,
-.references-layout .section-flare {
-  background: transparent;
-}
-
-.references-layout .reference-layout__content,
-.references-layout .reference-layout__content * {
-  font-family: var(--scalar-font);
-}
-
-.references-layout code,
-.references-layout pre,
-.references-layout .scalar-codeblock {
-  font-family: var(--scalar-font-code);
-}
-`;
-}
 function getNextAppDir(root) {
 	if (existsSync(join(root, "src", "app"))) return "src/app";
 	return "app";
 }
-function resolveApiReferenceConfig(value) {
-	if (value === true) return {
-		enabled: true,
-		path: "api-reference",
-		routeRoot: "api",
-		exclude: []
-	};
-	if (!value) return {
-		enabled: false,
-		path: "api-reference",
-		routeRoot: "api",
-		exclude: []
-	};
-	return {
-		enabled: value.enabled !== false,
-		path: normalizePathSegment(value.path ?? "api-reference"),
-		routeRoot: normalizeRouteRoot(value.routeRoot ?? "api"),
-		exclude: normalizeApiReferenceExcludes(value.exclude)
-	};
-}
-function normalizePathSegment(value) {
-	return value.replace(/^\/+|\/+$/g, "") || "api-reference";
-}
 function normalizeRouteRoot(value) {
 	return value.replace(/^\/+|\/+$/g, "") || "api";
 }
 function normalizeExcludeMatcher(value) {
 	return value.replace(/\\/g, "/").replace(/^\/+|\/+$/g, "").replace(/\.(ts|tsx|js|jsx)$/i, "").replace(/\/route$/i, "");
 }
-function normalizeApiReferenceExcludes(values) {
-	return (values ?? []).map(normalizeExcludeMatcher).filter(Boolean);
-}
 function getRoutePathBase(config) {
 	const routeRoot = normalizeRouteRoot(config.routeRoot);
 	if (routeRoot === "app" || routeRoot === "src/app") return "";
@@ -258,11 +86,6 @@ function getDocsUrl(config) {
 	if (typeof config.nav?.url === "string") return config.nav.url;
 	return `/${config.entry ?? "docs"}`;
 }
-function applyTitleTemplate(config, title) {
-	const template = config.metadata?.titleTemplate;
-	if (!template) return title;
-	return template.replace("%s", title);
-}
 function getForcedMode(config) {
 	const toggle = config.themeToggle;
 	if (!toggle || typeof toggle !== "object") return void 0;
@@ -376,6 +199,17 @@ function buildOpenApiPaths(routes) {
 	return paths;
 }
 function buildNextOpenApiDocument(config) {
+	if (resolveApiReferenceConfig(config.apiReference).specUrl) return {
+		openapi: "3.1.0",
+		info: {
+			title: "API Reference",
+			description: "Remote OpenAPI specs are resolved at request time through createNextApiReference().",
+			version: "0.0.0"
+		},
+		servers: [{ url: "/" }],
+		tags: [],
+		paths: {}
+	};
 	const routes = buildApiReferenceRoutes(config);
 	const tags = Array.from(new Set(routes.map((route) => route.tag))).map((name) => ({
 		name,
@@ -393,7 +227,7 @@ function buildNextOpenApiDocument(config) {
 		paths: buildOpenApiPaths(routes)
 	};
 }
-function DropdownIcon({ current }) {
+function DropdownIcon({ current, radius }) {
 	const label = current === "api" ? "</>" : "▣";
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
@@ -403,7 +237,7 @@ function DropdownIcon({ current }) {
 			height: 20,
 			alignItems: "center",
 			justifyContent: "center",
-			borderRadius: 6,
+			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)",
@@ -414,7 +248,34 @@ function DropdownIcon({ current }) {
 		children: label
 	});
 }
-function SwitcherOption({ href, title, description, current }) {
+function getApiReferenceSwitcherTheme(config) {
+	const themeName = config.theme?.name?.toLowerCase() ?? "";
+	const isPixelBorder = themeName.includes("pixel-border");
+	const isDarksharp = themeName.includes("darksharp");
+	const isShiny = themeName.includes("shiny");
+	const radius = config.theme?.ui?.radius ?? (isPixelBorder || isDarksharp ? "0px" : "var(--radius, 0.75rem)");
+	return {
+		cardRadius: radius,
+		iconRadius: radius,
+		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,
+			textTransform: isPixelBorder ? "uppercase" : void 0,
+			letterSpacing: isPixelBorder ? "0.08em" : void 0,
+			fontSize: isPixelBorder ? 12 : 14
+		},
+		descriptionStyle: {
+			fontFamily: isPixelBorder ? "var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace))" : void 0,
+			textTransform: isPixelBorder ? "uppercase" : void 0,
+			letterSpacing: isPixelBorder ? "0.04em" : void 0,
+			fontSize: isPixelBorder ? 11 : 12,
+			opacity: isPixelBorder ? .74 : .62
+		}
+	};
+}
+function SwitcherOption({ href, title, description, current, config }) {
+	const theme = getApiReferenceSwitcherTheme(config);
 	return /* @__PURE__ */ jsxs("a", {
 		href,
 		style: {
@@ -423,10 +284,11 @@ function SwitcherOption({ href, title, description, current }) {
 			gap: 12,
 			alignItems: "start",
 			padding: "11px 12px",
-			borderRadius: 12,
+			borderRadius: theme.cardRadius,
 			textDecoration: "none",
 			color: "inherit",
-			background: current ? "color-mix(in srgb, var(--color-fd-primary, #3a7) 10%, transparent)" : "transparent"
+			background: current ? "color-mix(in srgb, var(--color-fd-primary, #3a7) 10%, transparent)" : "transparent",
+			backgroundImage: !current ? theme.backgroundImage : void 0
 		},
 		children: [
 			/* @__PURE__ */ jsx("span", {
@@ -437,7 +299,7 @@ function SwitcherOption({ href, title, description, current }) {
 					height: 20,
 					alignItems: "center",
 					justifyContent: "center",
-					borderRadius: 6,
+					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)",
@@ -455,16 +317,15 @@ function SwitcherOption({ href, title, description, current }) {
 				},
 				children: [/* @__PURE__ */ jsx("span", {
 					style: {
-						fontSize: 13,
 						fontWeight: 600,
-						lineHeight: 1.25
+						lineHeight: 1.25,
+						...theme.titleStyle
 					},
 					children: title
 				}), /* @__PURE__ */ jsx("span", {
 					style: {
-						fontSize: 12,
-						opacity: .62,
-						lineHeight: 1.4
+						lineHeight: 1.4,
+						...theme.descriptionStyle
 					},
 					children: description
 				})]
@@ -482,16 +343,19 @@ function SwitcherOption({ href, title, description, current }) {
 		]
 	});
 }
-function ApiReferenceSwitcher({ docsUrl, apiUrl, current }) {
+function ApiReferenceSwitcher({ docsUrl, apiUrl, current, config }) {
+	const currentLabel = current === "api" ? "API Reference" : "Documentation";
+	const theme = getApiReferenceSwitcherTheme(config);
 	return /* @__PURE__ */ jsxs("details", {
 		style: {
 			position: "relative",
 			marginBottom: 16,
-			borderRadius: 14,
+			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: "0 0 0 1px color-mix(in srgb, var(--color-fd-border, #2a2a2a) 32%, transparent)",
-			overflow: "hidden"
+			boxShadow: theme.boxShadow,
+			overflow: "hidden",
+			backgroundImage: theme.backgroundImage
 		},
 		children: [/* @__PURE__ */ jsxs("summary", {
 			style: {
@@ -511,12 +375,15 @@ function ApiReferenceSwitcher({ docsUrl, apiUrl, current }) {
 					alignItems: "center",
 					gap: 10
 				},
-				children: [/* @__PURE__ */ jsx(DropdownIcon, { current }), /* @__PURE__ */ jsx("span", {
+				children: [/* @__PURE__ */ jsx(DropdownIcon, {
+					current,
+					radius: theme.iconRadius
+				}), /* @__PURE__ */ jsx("span", {
 					style: {
-						fontSize: 14,
-						fontWeight: 600
+						fontWeight: 600,
+						...theme.titleStyle
 					},
-					children: current === "api" ? "API Reference" : "Documentation"
+					children: currentLabel
 				})]
 			}), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
@@ -539,12 +406,14 @@ function ApiReferenceSwitcher({ docsUrl, apiUrl, current }) {
 				href: docsUrl,
 				title: "Documentation",
 				description: "Markdown pages, guides, and concepts",
-				current: current === "docs"
+				current: current === "docs",
+				config
 			}), /* @__PURE__ */ jsx(SwitcherOption, {
 				href: apiUrl,
 				title: "API Reference",
 				description: "Scalar-powered route handler reference",
-				current: current === "api"
+				current: current === "api",
+				config
 			})]
 		})]
 	});
@@ -567,7 +436,8 @@ function withNextApiReferenceBanner(config) {
 	const switcher = /* @__PURE__ */ jsx(ApiReferenceSwitcher, {
 		docsUrl: getDocsUrl(config),
 		apiUrl: `/${apiReference.path}`,
-		current: "docs"
+		current: "docs",
+		config
 	});
 	if (!config.sidebar || config.sidebar === true) return {
 		...config,
@@ -583,28 +453,35 @@ function withNextApiReferenceBanner(config) {
 }
 function createNextApiReference(config) {
 	const apiReference = resolveApiReferenceConfig(config.apiReference);
-	return ApiReference({
-		pageTitle: applyTitleTemplate(config, "API Reference"),
-		title: "API Reference",
-		content: () => buildNextOpenApiDocument(config),
-		theme: "deepSpace",
-		layout: "modern",
-		darkMode: getForcedMode(config) === "dark" ? true : void 0,
-		forceDarkModeState: getForcedMode(config),
-		hideDarkModeToggle: isThemeToggleHidden(config),
-		customCss: buildScalarCustomCss(config),
-		pathRouting: { basePath: `/${apiReference.path}` },
-		showSidebar: true,
-		defaultOpenFirstTag: true,
-		tagsSorter: "alpha",
-		operationsSorter: "alpha",
-		operationTitleSource: "summary",
-		defaultHttpClient: {
-			targetKey: "shell",
-			clientKey: "curl"
-		},
-		documentDownloadType: "json"
-	});
+	return async () => {
+		if (!apiReference.enabled) return new Response("Not Found", { status: 404 });
+		const document = await buildApiReferenceOpenApiDocumentAsync(config, {
+			framework: "next",
+			rootDir: process.cwd()
+		});
+		return ApiReference({
+			pageTitle: buildApiReferencePageTitle(config, "API Reference"),
+			title: "API Reference",
+			content: document,
+			theme: "deepSpace",
+			layout: "modern",
+			darkMode: getForcedMode(config) === "dark" ? true : void 0,
+			forceDarkModeState: getForcedMode(config),
+			hideDarkModeToggle: isThemeToggleHidden(config),
+			customCss: buildApiReferenceScalarCss(config),
+			pathRouting: { basePath: `/${apiReference.path}` },
+			showSidebar: true,
+			defaultOpenFirstTag: true,
+			tagsSorter: "alpha",
+			operationsSorter: "alpha",
+			operationTitleSource: "summary",
+			defaultHttpClient: {
+				targetKey: "shell",
+				clientKey: "curl"
+			},
+			documentDownloadType: "json"
+		})();
+	};
 }
 
 //#endregion

package/package.json

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