fumadocs-openapi 10.10.3 → 11.0.1

package/dist/playground/client.js

@@ -1,45 +1,49 @@
 "use client";
-import { getPreferredType } from "../utils/schema/index.js";
-import { joinURL, resolveRequestData, resolveServerUrl, withBase } from "../utils/url.js";
-import { useStorageKey } from "../ui/client/storage-key.js";
-import { useApiContext, useServerContext } from "../ui/contexts/api.js";
-import { useTranslations } from "../ui/client/i18n.js";
+import { getPreferredType } from "../utils/schema.js";
+import { useStorageKey } from "../utils/storage-key.js";
+import { useRenderContext, useServerContext } from "../ui/contexts/api.js";
 import { cn } from "../utils/cn.js";
 import { DefaultResultDisplay } from "./components/result-display.js";
+import { pathnameFromRequest } from "../requests/generators/index.js";
 import { MethodLabel } from "../ui/components/method-label.js";
 import { useQuery } from "../utils/use-query.js";
 import { encodeRequestData } from "../requests/media/encode.js";
-import { dereferenceSwallow } from "../utils/schema/dereference.js";
-import { SchemaProvider, anyFields, useResolvedSchema } from "./schema.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/components/select.js";
-import { labelVariants } from "../ui/components/input.js";
 import ServerSelect from "./components/server-select.js";
-import { FieldInput, FieldSet, JsonInput, ObjectInput } from "./components/inputs.js";
-import { useOperationContext } from "../ui/operation/client.js";
+import { useOperationContext } from "../ui/operation/context.js";
 import { useAuth } from "./auth.js";
 import { OAuthDialog, OAuthDialogContent, OAuthDialogTrigger } from "./components/oauth-dialog.js";
-import { Spinner } from "./components/spinner.js";
+import { dereferenceShallow } from "@fumadocs/api-docs/schema/dereference";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, LoaderCircle } from "lucide-react";
+import { useTranslations } from "@fuma-translate/react";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "fumadocs-ui/components/ui/collapsible";
+import { SchemaProvider, anyFields, useResolvedSchema } from "@fumadocs/api-docs/components/playground/schema";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@fumadocs/api-docs/components/select";
+import { labelVariants } from "@fumadocs/api-docs/components/input";
 import { StfProvider, useDataEngine, useFieldValue, useListener, useStf } from "@fumari/stf";
+import { joinURL, resolveServerUrl } from "@fumadocs/api-docs/utils/url";
 import { arrayStartsWith, objectGet, objectSet, stringifyFieldKey } from "@fumari/stf/lib/utils";
+import { FieldInput, FieldSet, JsonInput, ObjectInput } from "@fumadocs/api-docs/components/playground/inputs";
 import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { Spinner } from "@fumadocs/api-docs/components/spinner";
 //#region src/playground/client.tsx
-function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly, readOnly, deprecated, ...rest }) {
-	const t = useTranslations();
+function PlaygroundClient({ route, method, operation, pathItem, writeOnly, readOnly, ...rest }) {
+	const t = useTranslations({ note: "playground" });
+	const ctx = useRenderContext();
+	const { bundled, dereferenced } = ctx.schema;
 	const { parameters, body } = useMemo(() => {
-		const operation = doc.paths[route][method];
-		const parameters = operation.parameters?.map((param) => dereferenceSwallow(param, doc)) ?? [];
+		const parameters = [];
+		if (operation.parameters) for (const p of operation.parameters) parameters.push(dereferenceShallow(p, bundled));
+		if (pathItem.parameters) for (const p of pathItem.parameters) parameters.push(dereferenceShallow(p, bundled));
 		let body;
 		if (operation.requestBody) {
-			const content = dereferenceSwallow(operation.requestBody, doc).content;
+			const content = dereferenceShallow(operation.requestBody, bundled).content;
 			const mediaType = content ? getPreferredType(content) : void 0;
 			if (content && mediaType) body = {
 				mediaType,
-				schema: dereferenceSwallow(content[mediaType], doc).schema ?? true
+				schema: dereferenceShallow(content[mediaType], bundled).schema ?? true
 			};
 		}
 		return {
@@ -47,13 +51,27 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 			parameters
 		};
 	}, [
-		doc,
-		route,
-		method
+		bundled,
+		operation,
+		pathItem
 	]);
+	const securityEntries = useMemo(() => {
+		const result = [];
+		const security = operation.security ?? dereferenced.security ?? [];
+		if (security.length === 0) return result;
+		for (const map of security) {
+			const list = [];
+			for (const [key, scopes] of Object.entries(map)) list.push({
+				id: key,
+				scopes
+			});
+			if (list.length > 0) result.push(list);
+		}
+		return result;
+	}, [dereferenced, operation.security]);
 	const { example: exampleId, examples, setExampleData } = useOperationContext();
 	const { server } = useServerContext();
-	const { mediaAdapters, client: { playground: { components: { ResultDisplay = DefaultResultDisplay, CollapsiblePanel = DefaultCollapsiblePanel } = {}, requestTimeout, fetchOptions = { requestTimeout }, renderBodyField } = {} } } = useApiContext();
+	const { mediaAdapters, playground: { components: { ResultDisplay = DefaultResultDisplay, CollapsiblePanel = DefaultCollapsiblePanel } = {}, fetchOptions, renderBodyField } = {} } = useRenderContext();
 	const defaultValues = useMemo(() => {
 		const requestData = examples.find((example) => example.id === exampleId)?.data;
 		return {
@@ -65,10 +83,10 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 		};
 	}, [examples, exampleId]);
 	const stf = useStf({ defaultValues });
-	const { inputs, requirementId, setRequirementId, mapInputs, initAuthInputs } = useAuthInputs(stf.dataEngine, securities);
+	const { inputs, requirementId, setRequirementId, mapInputs, initAuthInputs } = useAuthInputs(stf.dataEngine, securityEntries);
 	const testQuery = useQuery(async (input) => {
 		const fetcher = await import("./fetcher.js").then((mod) => mod.createBrowserFetcher(mediaAdapters, {
-			proxyUrl,
+			proxyUrl: ctx.proxyUrl,
 			...fetchOptions
 		}));
 		const encoded = encodeRequestData({
@@ -76,7 +94,7 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 			method,
 			bodyMediaType: body?.mediaType
 		}, mediaAdapters, parameters);
-		return fetcher.fetch(joinURL(withBase(server ? resolveServerUrl(server.url, server.variables) : "/", window.location.origin), resolveRequestData(route, encoded)), encoded);
+		return fetcher.fetch(joinURL(new URL(server ? resolveServerUrl(server.url, server.variables) : "/", window.location.origin).href, pathnameFromRequest(route, encoded)), encoded);
 	});
 	const timerRef = useRef(null);
 	const stfSync = useRef(false);
@@ -112,7 +130,7 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 	return /* @__PURE__ */ jsx(StfProvider, {
 		value: stf,
 		children: /* @__PURE__ */ jsx(SchemaProvider, {
-			doc,
+			docRoot: bundled,
 			writeOnly,
 			readOnly,
 			children: /* @__PURE__ */ jsxs("form", {
@@ -130,7 +148,7 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 							/* @__PURE__ */ jsx(MethodLabel, { children: method }),
 							/* @__PURE__ */ jsx(Route, {
 								route,
-								className: cn("flex-1", deprecated && "line-through")
+								className: cn("flex-1", operation.deprecated && "line-through")
 							}),
 							/* @__PURE__ */ jsx("button", {
 								type: "submit",
@@ -139,7 +157,7 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 									size: "sm"
 								}), "w-14 py-1.5"),
 								disabled: testQuery.isLoading,
-								children: testQuery.isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin" }) : t.send
+								children: testQuery.isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin" }) : t("Send")
 							})
 						]
 					}),
@@ -147,8 +165,8 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 						data: testQuery.data,
 						reset: testQuery.reset
 					}) : null,
-					securities.length > 0 && /* @__PURE__ */ jsx(SecurityRequirements, {
-						securities,
+					securityEntries.length > 0 && /* @__PURE__ */ jsx(SecurityRequirements, {
+						securities: securityEntries,
 						securityId: requirementId,
 						setSecurityId: setRequirementId,
 						children: inputs.map((input) => /* @__PURE__ */ jsx(Fragment, { children: input.children }, stringifyFieldKey(input.fieldName)))
@@ -156,7 +174,7 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 					/* @__PURE__ */ jsx(ParametersForm, { parameters }),
 					body && /* @__PURE__ */ jsx(CollapsiblePanel, {
 						"data-type": "body",
-						title: t.body,
+						title: t("Body"),
 						children: renderBodyField ? renderBodyField("body", body) : /* @__PURE__ */ jsx(BodyInput, { field: body.schema })
 					})
 				]
@@ -165,21 +183,21 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 	});
 }
 function SecurityRequirements({ securities, setSecurityId, securityId, children }) {
-	const t = useTranslations();
+	const t = useTranslations({ note: "playground" });
 	const { isLoading, error } = useAuth();
 	const defaultOpen = isLoading || error != null;
 	const [open, setOpen] = useState(defaultOpen);
-	const { CollapsiblePanel = DefaultCollapsiblePanel } = useApiContext().client.playground?.components ?? {};
+	const { CollapsiblePanel = DefaultCollapsiblePanel } = useRenderContext().playground?.components ?? {};
 	useOnChange(defaultOpen, () => {
 		if (defaultOpen) setOpen(true);
 	});
 	return /* @__PURE__ */ jsxs(CollapsiblePanel, {
-		title: /* @__PURE__ */ jsxs(Fragment$1, { children: [t.authorization, isLoading && /* @__PURE__ */ jsxs("span", {
+		title: /* @__PURE__ */ jsxs(Fragment$1, { children: [t("Authorization"), isLoading && /* @__PURE__ */ jsxs("span", {
 			className: "border-s ps-2 inline-flex items-center gap-1.5 text-fd-muted-foreground text-xs font-mono",
 			children: [
 				/* @__PURE__ */ jsx(Spinner, {}),
 				" ",
-				t.fetchingToken
+				t("Fetching token...")
 			]
 		})] }),
 		"data-type": "authorization",
@@ -190,7 +208,7 @@ function SecurityRequirements({ securities, setSecurityId, securityId, children
 				className: "p-2 border rounded-lg bg-fd-secondary",
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-fd-muted-foreground font-medium mb-1",
-					children: t.fetchTokenError
+					children: t("Failed to fetch token")
 				}), /* @__PURE__ */ jsx("p", { children: String(error) })]
 			}),
 			/* @__PURE__ */ jsxs(Select, {
@@ -206,11 +224,12 @@ function SecurityRequirements({ securities, setSecurityId, securityId, children
 	});
 }
 function SecurityRequirement({ requirement }) {
-	const { schemes } = useApiContext();
+	const schemes = useRenderContext().schema.dereferenced.components?.securitySchemes;
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col gap-2 max-w-[600px]",
 		children: requirement.map((item) => {
-			const scheme = schemes[item.id];
+			const scheme = schemes?.[item.id];
+			if (!scheme) return;
 			return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 				className: cn("font-mono font-medium", scheme.deprecated && "text-fd-muted-foreground line-through"),
 				children: item.id
@@ -228,7 +247,7 @@ const ParamTypes = [
 	"query"
 ];
 function ParameterItem({ type, parameters }) {
-	const { renderParameterField } = useApiContext().client.playground ?? {};
+	const { renderParameterField } = useRenderContext().playground ?? {};
 	return parameters.map((field) => {
 		const fieldName = [type, field.name];
 		if (renderParameterField) return renderParameterField(fieldName, field);
@@ -243,13 +262,13 @@ function ParameterItem({ type, parameters }) {
 	});
 }
 function ParametersForm({ parameters }) {
-	const { components: { CollapsiblePanel = DefaultCollapsiblePanel } = {} } = useApiContext().client.playground ?? {};
-	const t = useTranslations();
+	const { components: { CollapsiblePanel = DefaultCollapsiblePanel } = {} } = useRenderContext().playground ?? {};
+	const t = useTranslations({ note: "playground" });
 	const displayNames = {
-		header: t.header,
-		cookie: t.cookies,
-		query: t.query,
-		path: t.path
+		header: t("Header"),
+		cookie: t("Cookies"),
+		query: t("Query"),
+		path: t("Path")
 	};
 	return ParamTypes.map((type) => {
 		const items = parameters.filter((v) => v.in === type);
@@ -267,7 +286,7 @@ function ParametersForm({ parameters }) {
 function BodyInput({ field: _field }) {
 	const field = useResolvedSchema(_field);
 	const [isJson, setIsJson] = useState(false);
-	const t = useTranslations();
+	const t = useTranslations({ note: "playground" });
 	if (field.format === "binary") return /* @__PURE__ */ jsx(FieldSet, {
 		field,
 		fieldName: ["body"],
@@ -281,7 +300,7 @@ function BodyInput({ field: _field }) {
 		})),
 		onClick: () => setIsJson(false),
 		type: "button",
-		children: t.closeJsonEditor
+		children: t("Close JSON Editor")
 	}), /* @__PURE__ */ jsx(JsonInput, { fieldName: ["body"] })] });
 	return /* @__PURE__ */ jsx(FieldSet, {
 		field,
@@ -296,25 +315,27 @@ function BodyInput({ field: _field }) {
 				className: "p-2"
 			})),
 			onClick: () => setIsJson(true),
-			children: t.openJsonEditor
+			children: t("Open JSON Editor")
 		})
 	});
 }
 function useAuthInputs(engine, requirements) {
 	const authCtx = useAuth();
 	const storageKeys = useStorageKey();
-	const t = useTranslations();
-	const { schemes, client: { playground: { transformAuthInputs } = {} } } = useApiContext();
+	const t = useTranslations({ note: "playground" });
+	const ctx = useRenderContext();
+	const schemes = ctx.schema.dereferenced.components?.securitySchemes;
+	const { transformAuthInputs } = ctx.playground ?? {};
 	const [requirementId, setRequirementId] = useState(() => {
-		if (requirements.length === 0) return -1;
+		if (!schemes || requirements.length === 0) return -1;
 		const idx = requirements.findIndex((s) => s.every((item) => !schemes[item.id].deprecated));
 		return idx !== -1 ? idx : 0;
 	});
 	const requirement = requirementId === -1 ? null : requirements[requirementId];
 	let inputs = useMemo(() => {
-		if (!requirement) return [];
+		if (!requirement || !schemes) return [];
 		return requirement.map((item) => {
-			const scheme = schemes[item.id];
+			const scheme = schemes?.[item.id];
 			if (scheme.type === "http" && scheme.scheme === "basic") {
 				const fieldName = ["header", "Authorization"];
 				return {
@@ -365,7 +386,7 @@ function useAuthInputs(engine, requirements) {
 					storageKey: storageKeys.AuthField(item.id),
 					defaultValue: "Bearer ",
 					children: /* @__PURE__ */ jsx(FieldSet, {
-						name: `${t.authorization} (${t.header})`,
+						name: `${t("Authorization")} (${t("Header")})`,
 						fieldName,
 						field: { type: "string" }
 					})
@@ -392,12 +413,12 @@ function useAuthInputs(engine, requirements) {
 				defaultValue: "",
 				storageKey: storageKeys.AuthField(item.id),
 				children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldSet, {
-					name: `${t.authorization} (${t.header})`,
+					name: `${t("Authorization")} (${t("Header")})`,
 					fieldName,
 					field: { type: "string" }
 				}), /* @__PURE__ */ jsx("p", {
 					className: "text-fd-muted-foreground text-xs",
-					children: t.openIdUnsupported
+					children: t("OpenID Connect is not supported at the moment, you can still set an access token here.")
 				})] })
 			};
 		});
@@ -466,13 +487,13 @@ function useAuthInputs(engine, requirements) {
 function OAuth2Input({ fieldName, security }) {
 	const [open, setOpen] = useState(false);
 	const engine = useDataEngine();
-	const t = useTranslations();
+	const t = useTranslations({ note: "playground" });
 	return /* @__PURE__ */ jsxs("fieldset", {
 		className: "flex flex-col gap-2",
 		children: [/* @__PURE__ */ jsx("label", {
 			htmlFor: stringifyFieldKey(fieldName),
 			className: cn(labelVariants()),
-			children: t.accessToken
+			children: t("Access Token")
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-2",
 			children: [/* @__PURE__ */ jsx(FieldInput, {
@@ -488,7 +509,7 @@ function OAuth2Input({ fieldName, security }) {
 						size: "sm",
 						color: "secondary"
 					})),
-					children: t.authorize
+					children: t("Authorize")
 				}), /* @__PURE__ */ jsx(OAuthDialogContent, {
 					setOpen,
 					schemeId: security.id,

package/dist/playground/components/oauth-dialog.js

@@ -1,53 +1,53 @@
-import { useApiContext } from "../../ui/contexts/api.js";
-import { useTranslations } from "../../ui/client/i18n.js";
+import { useRenderContext } from "../../ui/contexts/api.js";
 import { cn } from "../../utils/cn.js";
 import { useQuery } from "../../utils/use-query.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/components/select.js";
-import { Input, labelVariants } from "../../ui/components/input.js";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../../ui/components/dialog.js";
 import { useAuth } from "../auth.js";
 import { useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "@fuma-translate/react";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@fumadocs/api-docs/components/select";
+import { Input, labelVariants } from "@fumadocs/api-docs/components/input";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@fumadocs/api-docs/components/dialog";
 //#region src/playground/components/oauth-dialog.tsx
 const OAuthDialog = Dialog;
 function OAuthDialogContent(props) {
-	const t = useTranslations();
-	return /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t.authorization }), /* @__PURE__ */ jsx(DialogDescription, { children: t.obtainAccessToken })] }), /* @__PURE__ */ jsx(Content, { ...props })] });
+	const t = useTranslations({ note: "OAuth dialog" });
+	return /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t("Authorization") }), /* @__PURE__ */ jsx(DialogDescription, { children: t("Obtain the access token for API.") })] }), /* @__PURE__ */ jsx(Content, { ...props })] });
 }
 function Content({ schemeId, scopes, setToken, setOpen }) {
-	const { schemes } = useApiContext();
+	const schemes = useRenderContext().schema.dereferenced.components?.securitySchemes;
 	const tokenInfo = useAuth().store[schemeId];
-	const scheme = schemes[schemeId];
+	const scheme = schemes?.[schemeId];
 	if (!scheme || scheme.type !== "oauth2") throw new Error("unexpected schemaId: must be type oauth2");
 	const [type, setType] = useState(() => {
 		return Object.keys(scheme.flows)[0];
 	});
-	const t = useTranslations();
+	const t = useTranslations({ note: "OAuth dialog" });
 	const allFlows = useMemo(() => ({
 		password: {
-			name: t.resourceOwnerPassword,
-			description: t.resourceOwnerPasswordDesc,
+			name: t("Resource Owner Password Flow"),
+			description: t("Authenticate using username and password."),
 			supported: true
 		},
 		clientCredentials: {
-			name: t.clientCredentials,
-			description: t.clientCredentialsDesc,
+			name: t("Client Credentials"),
+			description: t("Intended for the server-to-server authentication."),
 			supported: true
 		},
 		authorizationCode: {
-			name: t.authorizationCode,
-			description: t.authorizationCodeDesc,
+			name: t("Authorization code"),
+			description: t("Authenticate with 3rd party services"),
 			supported: true
 		},
 		implicit: {
-			name: t.implicit,
-			description: t.implicitDesc,
+			name: t("Implicit"),
+			description: t("Retrieve the access token directly."),
 			supported: true
 		},
 		deviceAuthorization: {
-			name: t.deviceAuthorization,
-			description: t.deviceAuthorizationDesc,
+			name: t("Device Authorization"),
+			description: t("Authenticate with device."),
 			supported: false
 		}
 	}), [t]);
@@ -138,7 +138,7 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 			/* @__PURE__ */ jsxs(Select, {
 				value: type ?? "",
 				onValueChange: setType,
-				children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t.oauthFlowPlaceholder }) }), /* @__PURE__ */ jsx(SelectContent, { children: Object.keys(scheme.flows).map((key) => {
+				children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("Select a flow") }) }), /* @__PURE__ */ jsx(SelectContent, { children: Object.keys(scheme.flows).map((key) => {
 					const { name, description } = allFlows[key];
 					return /* @__PURE__ */ jsxs(SelectItem, {
 						value: key,
@@ -158,16 +158,16 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 					/* @__PURE__ */ jsx("label", {
 						htmlFor: "client_id",
 						className: cn(labelVariants()),
-						children: t.clientId
+						children: t("Client ID")
 					}),
 					/* @__PURE__ */ jsx("p", {
 						className: "text-fd-muted-foreground text-sm",
-						children: t.clientIdHint
+						children: t("The client ID of your OAuth application.")
 					}),
 					/* @__PURE__ */ jsx(Input, {
 						id: "client_id",
 						name: "clientId",
-						placeholder: t.inputPlaceholder,
+						placeholder: t("Enter value"),
 						type: "text",
 						autoComplete: "off",
 						disabled: isLoading,
@@ -182,16 +182,16 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 					/* @__PURE__ */ jsx("label", {
 						htmlFor: "client_secret",
 						className: cn(labelVariants()),
-						children: t.clientSecret
+						children: t("Client Secret")
 					}),
 					/* @__PURE__ */ jsx("p", {
 						className: "text-fd-muted-foreground text-sm",
-						children: t.clientSecretHint
+						children: t("The client secret of your OAuth application.")
 					}),
 					/* @__PURE__ */ jsx(Input, {
 						id: "client_secret",
 						name: "clientSecret",
-						placeholder: t.inputPlaceholder,
+						placeholder: t("Enter value"),
 						type: "password",
 						autoComplete: "off",
 						disabled: isLoading,
@@ -205,11 +205,11 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 				children: [/* @__PURE__ */ jsx("label", {
 					htmlFor: "username",
 					className: cn(labelVariants()),
-					children: t.usernameField
+					children: t("Username")
 				}), /* @__PURE__ */ jsx(Input, {
 					id: "username",
 					name: "username",
-					placeholder: t.inputPlaceholder,
+					placeholder: t("Enter value"),
 					type: "text",
 					autoComplete: "off",
 					disabled: isLoading,
@@ -221,11 +221,11 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 				children: [/* @__PURE__ */ jsx("label", {
 					htmlFor: "password",
 					className: cn(labelVariants()),
-					children: t.clientSecret
+					children: t("Password")
 				}), /* @__PURE__ */ jsx(Input, {
 					id: "password",
 					name: "password",
-					placeholder: t.inputPlaceholder,
+					placeholder: t("Enter value"),
 					type: "password",
 					autoComplete: "off",
 					disabled: isLoading,
@@ -239,10 +239,10 @@ function Content({ schemeId, scopes, setToken, setOpen }) {
 			}) : null, /* @__PURE__ */ jsx("button", {
 				type: "submit",
 				className: cn(buttonVariants({ color: "primary" })),
-				children: t.submit
+				children: t("Submit")
 			})] }) : /* @__PURE__ */ jsx("p", {
 				className: "text-fd-muted-foreground bg-fd-muted p-2 rounded-lg border",
-				children: t.unsupported
+				children: t("Unsupported")
 			})
 		]
 	});

package/dist/playground/components/result-display.d.ts

@@ -1,6 +1,5 @@
 import { FetchResult } from "../fetcher.js";
 import { ComponentProps } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/playground/components/result-display.d.ts
 interface ResultDisplayProps extends ComponentProps<'div'> {
@@ -11,6 +10,6 @@ declare function DefaultResultDisplay({
   data,
   reset,
   ...rest
-}: ResultDisplayProps): _$react_jsx_runtime0.JSX.Element;
+}: ResultDisplayProps): import("react").JSX.Element;
 //#endregion
 export { DefaultResultDisplay, ResultDisplayProps };

package/dist/playground/components/result-display.js

@@ -1,5 +1,4 @@
 "use client";
-import { useTranslations } from "../../ui/client/i18n.js";
 import { useStatusInfo } from "../status-info.js";
 import { cn } from "../../utils/cn.js";
 import { ClientCodeBlock } from "../../ui/components/codeblock.js";
@@ -7,14 +6,14 @@ import { require_fast_content_type_parse } from "../../node_modules/.pnpm/fast-c
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleX } from "lucide-react";
-import { renderTranslation } from "fumadocs-core/i18n";
+import { useTranslations } from "@fuma-translate/react";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
 import { cva } from "class-variance-authority";
 //#region src/playground/components/result-display.tsx
 var import_fast_content_type_parse = require_fast_content_type_parse();
 const panelVariants = cva("flex flex-col gap-2 mt-2 px-3 py-2 border-y bg-fd-secondary text-fd-secondary-foreground");
 function DefaultResultDisplay({ data, reset, ...rest }) {
-	const t = useTranslations();
+	const t = useTranslations({ note: "playground result display" });
 	if (data.type === "client_error") return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		className: cn(panelVariants(), rest.className),
@@ -24,7 +23,7 @@ function DefaultResultDisplay({ data, reset, ...rest }) {
 				/* @__PURE__ */ jsx(CircleX, { className: "size-4 text-red-500" }),
 				/* @__PURE__ */ jsx("p", {
 					className: "text-sm font-medium me-auto",
-					children: t.statusClientError
+					children: t("Client Error")
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
@@ -33,7 +32,7 @@ function DefaultResultDisplay({ data, reset, ...rest }) {
 						variant: "outline"
 					})),
 					onClick: () => reset(),
-					children: t.close
+					children: t("Close")
 				})
 			]
 		}), /* @__PURE__ */ jsx("p", { children: data.message })]
@@ -60,7 +59,7 @@ function getTextFormat(mime) {
 	return null;
 }
 function ResponseResult({ data, reset, ...rest }) {
-	const t = useTranslations();
+	const t = useTranslations({ note: "playground result display" });
 	const statusInfo = useStatusInfo(data.status);
 	const { parameters, type } = useMemo(() => (0, import_fast_content_type_parse.safeParse)(data.headers.get("Content-Type") ?? "text/plain"), [data.headers]);
 	let content;
@@ -77,7 +76,7 @@ function ResponseResult({ data, reset, ...rest }) {
 		});
 		else content = /* @__PURE__ */ jsx("p", {
 			className: "p-2 border rounded-lg bg-fd-card text-fd-card-foreground",
-			children: renderTranslation(t.statusBinaryBody, { length: String(data.body.byteLength) })
+			children: t("Binary response body, {length} bytes", { variables: { length: String(data.body.byteLength) } })
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
@@ -106,7 +105,7 @@ function ResponseResult({ data, reset, ...rest }) {
 						variant: "outline"
 					})),
 					onClick: () => reset(),
-					children: t.close
+					children: t("Close")
 				})
 			]
 		}), content]

package/dist/playground/components/server-select.js

@@ -1,21 +1,21 @@
 "use client";
-import { resolveServerUrl, withBase } from "../../utils/url.js";
 import { useServerContext } from "../../ui/contexts/api.js";
-import { useTranslations } from "../../ui/client/i18n.js";
 import { cn } from "../../utils/cn.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/components/select.js";
-import { Input, labelVariants } from "../../ui/components/input.js";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "../../ui/components/dialog.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { EditIcon } from "lucide-react";
+import { useTranslations } from "@fuma-translate/react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@fumadocs/api-docs/components/select";
+import { Input, labelVariants } from "@fumadocs/api-docs/components/input";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@fumadocs/api-docs/components/dialog";
 import { StfProvider, useFieldValue, useListener, useStf } from "@fumari/stf";
+import { resolveServerUrl } from "@fumadocs/api-docs/utils/url";
 //#region src/playground/components/server-select.tsx
 function ServerSelect(props) {
 	const { servers, server, setServer, setServerVariables } = useServerContext();
 	const [open, setOpen] = useState(false);
 	const [isMounted, setIsMounted] = useState(false);
-	const t = useTranslations();
+	const t = useTranslations({ note: "playground server select" });
 	useEffect(() => {
 		setIsMounted(true);
 	}, []);
@@ -30,16 +30,16 @@ function ServerSelect(props) {
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					className: "px-2 py-0.5 -ms-2 font-medium rounded-lg border bg-fd-secondary text-fd-secondary-foreground shadow-sm",
-					children: server?.name ?? t.serverUrl
+					children: server?.name ?? t("Server URL")
 				}),
 				/* @__PURE__ */ jsx("code", {
 					className: "truncate min-w-0 flex-1",
-					children: isMounted ? withBase(server ? resolveServerUrl(server.url, server.variables) : "/", window.location.origin) : t.loading
+					children: isMounted ? new URL(server ? resolveServerUrl(server.url, server.variables) : "/", window.location.origin).href : t("loading...")
 				}),
 				/* @__PURE__ */ jsx(EditIcon, { className: "size-4" })
 			]
 		}), /* @__PURE__ */ jsxs(DialogContent, { children: [
-			/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t.serverUrl }), /* @__PURE__ */ jsx(DialogDescription, { children: t.serverUrlDescription })] }),
+			/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t("Server URL") }), /* @__PURE__ */ jsx(DialogDescription, { children: t("The base URL of your API endpoint.") })] }),
 			/* @__PURE__ */ jsxs(Select, {
 				value: server?.url,
 				onValueChange: setServer,
@@ -100,7 +100,7 @@ function ServerSelectContent({ defaultValues, onChange, schema }) {
 	});
 }
 function Field({ fieldName, variable }) {
-	const t = useTranslations();
+	const t = useTranslations({ note: "playground server select" });
 	const [value, setValue] = useFieldValue([fieldName], { compute(currentValue) {
 		return typeof currentValue === "string" ? currentValue : void 0;
 	} });
@@ -119,7 +119,7 @@ function Field({ fieldName, variable }) {
 		id: fieldName,
 		value,
 		onChange: (e) => setValue(e.target.value),
-		placeholder: t.serverUrlFieldPlaceholder
+		placeholder: t("Enter Value")
 	});
 }
 //#endregion