@clarify-labs/renderer 0.4.0 → 0.6.0

package/output/preview.cjs

@@ -0,0 +1,734 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_shell = require("./shell-_MyLsMUI.cjs");
+const require_OpenApiOperation = require("./OpenApiOperation-mhoi-s4N.cjs");
+let react = require("react");
+let react_router_dom = require("react-router-dom");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region source/preview/openapi.tsx
+function schemaFromType(type) {
+	if (type.endsWith("[]")) return {
+		type: "array",
+		items: schemaFromType(type.slice(0, -2))
+	};
+	if (type === "number" || type === "integer" || type === "boolean" || type === "object") return { type };
+	return { type: "string" };
+}
+function parseResponseExample(endpoint) {
+	if (typeof endpoint.responseExample !== "undefined") return endpoint.responseExample;
+	if (!endpoint.response) return void 0;
+	try {
+		return JSON.parse(endpoint.response);
+	} catch {
+		return endpoint.response;
+	}
+}
+function inferSchemaFromExample(example) {
+	if (Array.isArray(example)) return {
+		type: "array",
+		items: inferSchemaFromExample(example[0]) ?? { type: "object" }
+	};
+	if (typeof example === "object" && example !== null) return {
+		type: "object",
+		properties: Object.fromEntries(Object.entries(example).map(([key, value]) => [key, inferSchemaFromExample(value)]))
+	};
+	if (typeof example === "number") return { type: Number.isInteger(example) ? "integer" : "number" };
+	if (typeof example === "boolean") return { type: "boolean" };
+	return typeof example === "undefined" ? void 0 : { type: "string" };
+}
+function normalizeParameterLocation(location) {
+	return location === "route" ? "path" : location;
+}
+function toOpenApiParameter(parameter) {
+	return {
+		name: parameter.name,
+		in: normalizeParameterLocation(parameter.in),
+		required: parameter.required,
+		description: parameter.description,
+		schema: parameter.schema ?? schemaFromType(parameter.type)
+	};
+}
+function createPreviewOpenApi(endpoint) {
+	const method = endpoint.method.toLowerCase();
+	const parameters = (endpoint.parameters ?? []).map(toOpenApiParameter);
+	const responseExample = parseResponseExample(endpoint);
+	const responseSchema = endpoint.responseSchema ?? inferSchemaFromExample(responseExample);
+	const requestSchema = endpoint.requestSchema ?? inferSchemaFromExample(endpoint.requestExample);
+	const operation = {
+		summary: endpoint.summary,
+		description: endpoint.description,
+		parameters,
+		requestBody: requestSchema ? {
+			description: endpoint.requestDescription,
+			required: true,
+			content: { "application/json": {
+				schema: requestSchema,
+				example: endpoint.requestExample
+			} }
+		} : void 0,
+		responses: { [endpoint.responseStatus ?? "200"]: {
+			description: endpoint.responseDescription ?? "OK",
+			content: { "application/json": {
+				schema: responseSchema,
+				example: responseExample
+			} }
+		} }
+	};
+	return {
+		operation,
+		spec: {
+			openapi: "3.1.0",
+			info: {
+				title: "Clarify Build API",
+				version: "2026-06-20",
+				description: "API reference generated from OpenAPI and rendered as static documentation."
+			},
+			servers: [{
+				url: "https://server",
+				description: "Production"
+			}, {
+				url: "https://test-server",
+				description: "Test"
+			}],
+			components: { securitySchemes: { bearerAuth: {
+				type: "http",
+				scheme: "bearer",
+				bearerFormat: "JWT"
+			} } },
+			security: [{ bearerAuth: [] }],
+			paths: { [endpoint.path]: { [method]: operation } }
+		},
+		parameters
+	};
+}
+function OpenApiExamplesPreview(arg0) {
+	const { endpoint } = arg0;
+	const { operation, spec, parameters } = createPreviewOpenApi(endpoint);
+	const method = endpoint.method.toUpperCase();
+	const requestContents = require_OpenApiOperation.getMediaTypeEntries(require_OpenApiOperation.getRequestBody(spec, operation)?.content, spec);
+	const [selectedRequestMediaType, setSelectedRequestMediaType] = (0, react.useState)(requestContents[0]?.mediaType ?? "");
+	const selectedRequestContent = requestContents.find((content) => content.mediaType === selectedRequestMediaType) ?? requestContents[0];
+	const servers = require_OpenApiOperation.getServers(spec, operation, endpoint.path);
+	const [selectedServerKey, setSelectedServerKey] = (0, react.useState)(require_OpenApiOperation.getServerKey(servers[0], 0));
+	const selectedServer = servers.find((server, index) => require_OpenApiOperation.getServerKey(server, index) === selectedServerKey) ?? servers[0];
+	const [serverVariables, setServerVariables] = (0, react.useState)(require_OpenApiOperation.defaultServerVariables(selectedServer));
+	const [serverOpen, setServerOpen] = (0, react.useState)(false);
+	const authOptions = require_OpenApiOperation.getAuthOptions(spec, operation);
+	const [selectedAuthName, setSelectedAuthName] = (0, react.useState)(authOptions[0]?.name ?? "");
+	const selectedAuth = authOptions.find((option) => option.name === selectedAuthName);
+	const [authValues, setAuthValues] = (0, react.useState)({});
+	const [authOpen, setAuthOpen] = (0, react.useState)(false);
+	const authInput = selectedAuth ? {
+		name: selectedAuth.name,
+		scheme: selectedAuth.scheme,
+		value: authValues[selectedAuth.name] ?? require_OpenApiOperation.authPlaceholder(selectedAuth)
+	} : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OpenApiOperation.EndpointIdentity, {
+			method,
+			path: endpoint.path,
+			servers,
+			selectedServerKey,
+			selectedServer,
+			serverVariables,
+			serverOpen,
+			authOptions,
+			selectedAuthName,
+			selectedAuth,
+			authValues,
+			authOpen,
+			onSelectServer: (value) => {
+				const nextServer = servers.find((server, index) => require_OpenApiOperation.getServerKey(server, index) === value) ?? servers[0];
+				setSelectedServerKey(value);
+				setServerVariables(require_OpenApiOperation.defaultServerVariables(nextServer));
+			},
+			onChangeServerVariable: (name, value) => setServerVariables((current) => ({
+				...current,
+				[name]: value
+			})),
+			onToggleServer: () => {
+				setServerOpen((current) => !current);
+				setAuthOpen(false);
+			},
+			onToggleAuth: () => {
+				setAuthOpen((current) => !current);
+				setServerOpen(false);
+			},
+			onSelectAuth: setSelectedAuthName,
+			onChangeAuthValue: (name, value) => setAuthValues((current) => ({
+				...current,
+				[name]: value
+			}))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "grid min-w-0 gap-4 lg:grid-cols-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OpenApiOperation.RequestExamplesPanel, {
+				spec,
+				path: endpoint.path,
+				method,
+				parameters,
+				requestContents,
+				selectedMediaType: selectedRequestContent?.mediaType ?? "",
+				onSelectMediaType: setSelectedRequestMediaType,
+				selectedServer,
+				serverVariables,
+				auth: authInput
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OpenApiOperation.ResponseExamplesPanel, {
+				operation,
+				spec
+			})]
+		})]
+	});
+}
+//#endregion
+//#region source/preview.tsx
+var embeddedEndpoint = {
+	method: "GET",
+	path: "/examples/basic-request",
+	summary: "Basic request",
+	description: "Rendered from api.openapi.json inside the MDX guide.",
+	parameters: [
+		{
+			name: "cursor",
+			in: "query",
+			type: "string",
+			description: "Start after this cursor."
+		},
+		{
+			name: "limit",
+			in: "query",
+			type: "integer",
+			description: "Max items to return."
+		},
+		{
+			name: "X-Trace-Id",
+			in: "header",
+			type: "string",
+			description: "Optional request trace."
+		}
+	],
+	responseDescription: "A page of example records.",
+	responseSchema: {
+		type: "object",
+		required: ["items"],
+		properties: {
+			items: {
+				type: "array",
+				items: { type: "object" }
+			},
+			next: { type: "string" }
+		}
+	},
+	responseExample: {
+		items: [],
+		next: "cursor_2"
+	}
+};
+var embeddedGuide = {
+	label: "source/en-US/openapi/embedding.mdx",
+	title: "Embed OpenAPI in MDX",
+	body: "Use MDX for workflow context, then render the exact operation from the spec.",
+	embed: "<OpenApiOperation specPath=\"/api\" path=\"/examples/basic-request\" method=\"get\" />",
+	outputs: [
+		"/openapi/embedding",
+		"/api",
+		"/api.openapi.json",
+		"/llms.txt"
+	]
+};
+var staticOutputEndpoint = {
+	method: "POST",
+	path: "/api/{id}/path",
+	summary: "Create static build",
+	description: "Build static docs from MDX and OpenAPI sources.",
+	parameters: [{
+		name: "id",
+		in: "path",
+		type: "string",
+		required: true,
+		description: "Project ID."
+	}],
+	responseDescription: "Build metadata and static outputs.",
+	responseSchema: {
+		type: "object",
+		required: [
+			"id",
+			"status",
+			"outputs"
+		],
+		properties: {
+			id: {
+				type: "string",
+				description: "Build identifier."
+			},
+			status: {
+				type: "string",
+				enum: [
+					"queued",
+					"running",
+					"ready"
+				],
+				description: "Current build state."
+			},
+			outputs: {
+				type: "array",
+				description: "Generated static artifacts.",
+				items: {
+					type: "object",
+					required: ["path", "kind"],
+					properties: {
+						path: { type: "string" },
+						kind: {
+							type: "string",
+							enum: [
+								"html",
+								"asset",
+								"openapi",
+								"llms"
+							]
+						}
+					}
+				}
+			}
+		}
+	},
+	requestDescription: "Static build options.",
+	requestSchema: {
+		type: "object",
+		required: ["source", "output"],
+		properties: {
+			source: {
+				type: "string",
+				description: "MDX source root."
+			},
+			output: {
+				type: "string",
+				description: "Static output root."
+			},
+			includeSearchIndex: {
+				type: "boolean",
+				description: "Generate search data."
+			}
+		}
+	},
+	requestExample: {
+		source: "source",
+		output: "output",
+		includeSearchIndex: true
+	},
+	responseExample: {
+		id: "build_01HY",
+		status: "ready",
+		outputs: [
+			{
+				path: "/openapi/index.html",
+				kind: "html"
+			},
+			{
+				path: "/api.openapi.json",
+				kind: "openapi"
+			},
+			{
+				path: "/llms.txt",
+				kind: "llms"
+			}
+		]
+	}
+};
+var previewConfig = {
+	title: "Clarify preview",
+	description: "Renderer preview environment",
+	rootDirectory: "source",
+	routePrefix: "/",
+	outputDirectory: "output",
+	theme: {
+		preset: "default",
+		tokens: {
+			colors: {
+				primary: "#2563eb",
+				accent: "#60a5fa",
+				background: "#ffffff",
+				foreground: "#18181b",
+				surface: "#ffffff",
+				muted: "#71717a",
+				border: "rgb(24 24 27 / 0.1)",
+				codeBackground: "#f4f4f5"
+			},
+			radius: {
+				sm: "0.375rem",
+				md: "0.5rem",
+				lg: "0.75rem",
+				xl: "1rem"
+			}
+		},
+		layout: { maxWidth: "88rem" }
+	},
+	i18n: {
+		defaultLocale: "en",
+		missing: "fallback",
+		locales: [{
+			code: "en",
+			label: "English"
+		}]
+	}
+};
+var methodStyles = {
+	GET: "bg-emerald-400/15 text-emerald-600 dark:bg-emerald-400/20 dark:text-emerald-300",
+	POST: "bg-sky-400/15 text-sky-600 dark:bg-sky-400/20 dark:text-sky-300",
+	PUT: "bg-amber-400/15 text-amber-600 dark:bg-amber-400/20 dark:text-amber-300",
+	PATCH: "bg-amber-400/15 text-amber-600 dark:bg-amber-400/20 dark:text-amber-300",
+	DELETE: "bg-rose-400/15 text-rose-600 dark:bg-rose-400/20 dark:text-rose-300"
+};
+var mainPreviewPath = "/openapi/embedding";
+var mainPreviewSections = [{
+	id: "overview",
+	title: "Overview"
+}, {
+	id: "request-example",
+	title: "Request example"
+}];
+function PreviewEnvironment(arg0) {
+	const { children, initialEntry = "/preview", sections = [] } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.MemoryRouter, {
+		initialEntries: [initialEntry],
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.ClarifyConfigContext.Provider, {
+			value: previewConfig,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.ClarifyLocaleContext.Provider, {
+				value: previewConfig.i18n.defaultLocale,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.OpenApisContext.Provider, {
+					value: {},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.SectionProvider, {
+						sections,
+						children
+					})
+				})
+			})
+		})
+	});
+}
+function Chrome(arg0) {
+	const { title, status, children } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "clarify-app clarify-preview h-full overflow-hidden bg-(--clarify-theme-tokens-colors-background) text-(--clarify-ui-text) shadow-2xl ring-1 ring-(--clarify-theme-tokens-colors-border) dark:bg-zinc-950 dark:text-white dark:ring-white/10",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-3 border-b border-(--clarify-theme-tokens-colors-border) px-4 py-3 text-xs/6 text-(--clarify-ui-text-faint) dark:border-white/10",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "size-2 rounded-full bg-rose-400" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "size-2 rounded-full bg-amber-400" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "size-2 rounded-full bg-emerald-400" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "ml-2 truncate font-medium text-(--clarify-ui-text-soft)",
+					children: title
+				}),
+				status ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "ml-auto hidden rounded-full bg-emerald-400/15 px-2 py-0.5 font-medium text-emerald-700 sm:inline dark:text-emerald-300",
+					children: status
+				}) : null
+			]
+		}), children]
+	});
+}
+function MethodBadge(arg0) {
+	const method = arg0.method.toUpperCase();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: `rounded-md px-2.5 py-0.5 text-xs/6 font-black tracking-wide ${methodStyles[method] ?? "bg-(--clarify-ui-subtle-background) text-(--clarify-ui-text-soft)"}`,
+		children: method
+	});
+}
+function createPreviewNavigation(arg0) {
+	const { endpoint, guide, outputs } = arg0;
+	return [
+		{
+			title: "Guides",
+			path: "/guides",
+			icon: "BookOpenText",
+			children: [{
+				title: guide?.title ?? "MDX guide",
+				path: mainPreviewPath,
+				icon: "FileText"
+			}, {
+				title: "Getting started",
+				path: "/getting-started",
+				icon: "Rocket"
+			}]
+		},
+		{
+			title: "API Reference",
+			path: "/api",
+			icon: "Braces",
+			children: [{
+				title: endpoint.summary,
+				path: endpoint.path,
+				icon: "Cable"
+			}, {
+				title: "Generate static output",
+				path: staticOutputEndpoint.path,
+				icon: "UploadCloud"
+			}]
+		},
+		{
+			title: "Build Output",
+			path: "/output",
+			icon: "PackageCheck",
+			children: [{
+				title: `Routes (${outputs.length})`,
+				path: "/output/routes",
+				icon: "ListTree"
+			}]
+		}
+	];
+}
+function PreviewNavigation(arg0) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_shell.Navigation, {
+		navigation: createPreviewNavigation(arg0),
+		className: "px-2"
+	});
+}
+function PreviewMetricGrid(arg0) {
+	const { metrics } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "grid grid-cols-3 gap-2",
+		children: metrics.map((metric) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "rounded-xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-2.5 shadow-sm dark:border-white/10 dark:bg-zinc-900/50",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-xs/5 text-(--clarify-ui-text-faint)",
+					children: metric.label
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-base/6 font-semibold text-(--clarify-ui-text-strong)",
+					children: metric.value
+				}),
+				metric.hint ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-xs/5 text-(--clarify-ui-text-faint)",
+					children: metric.hint
+				}) : null
+			]
+		}, metric.label))
+	});
+}
+function PreviewLabel(arg0) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "text-xs/5 font-semibold uppercase tracking-wider text-(--clarify-ui-text-faint)",
+		children: arg0.children
+	});
+}
+function GuideSummaryPreview(arg0) {
+	const { guide } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+		className: "border-b border-(--clarify-theme-tokens-colors-border) pb-4 dark:border-white/10",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreviewLabel, { children: guide.label }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "mt-1 text-xl/7 font-semibold tracking-tight text-(--clarify-ui-text-strong)",
+				children: guide.title
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-2 max-w-2xl text-sm/6 text-(--clarify-ui-text-soft)",
+				children: guide.body
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+				className: "mt-3 overflow-hidden rounded-xl bg-zinc-950 px-3 py-2 text-xs/5 whitespace-pre-wrap text-zinc-300",
+				children: guide.embed
+			})
+		]
+	});
+}
+function EndpointSummaryPreview(arg0) {
+	const { endpoint } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MethodBadge, { method: endpoint.method }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+					className: "text-sm font-medium text-(--clarify-ui-text)",
+					children: endpoint.path
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "mt-3 text-lg/7 font-semibold tracking-tight text-(--clarify-ui-text-strong)",
+				children: endpoint.summary
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-1 text-sm/6 text-(--clarify-ui-text-soft)",
+				children: endpoint.description
+			})
+		]
+	});
+}
+function EmbeddedApiPreview(arg0) {
+	const { endpoint } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "clarify-preview-api-frame min-w-0 overflow-hidden border-t border-(--clarify-theme-tokens-colors-border) pt-4 dark:border-white/10",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "clarify-preview-api-content clarify-preview-api-content-embedded",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiExamplesPreview, { endpoint })
+		})
+	});
+}
+function OutputListPreview(arg0) {
+	const { outputs } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-t border-(--clarify-theme-tokens-colors-border) pt-4 dark:border-white/10",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreviewLabel, { children: "Static output" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mt-3 grid gap-2 sm:grid-cols-2 xl:grid-cols-4",
+			children: outputs.map((output) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2 rounded-lg bg-(--clarify-ui-subtle-background) px-3 py-2 text-xs/5 text-(--clarify-ui-text-soft) dark:bg-white/5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "size-1.5 rounded-full bg-emerald-400" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate font-mono",
+					children: output
+				})]
+			}, output))
+		})]
+	});
+}
+function MainContentPreview() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		className: "min-w-0 bg-(--clarify-theme-tokens-colors-background) px-5 py-4 dark:bg-zinc-950",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "clarify-preview-content-window overflow-hidden",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GuideSummaryPreview, { guide: embeddedGuide }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreviewMetricGrid, { metrics: [
+						{
+							label: "MDX",
+							value: "Guide",
+							hint: "context"
+						},
+						{
+							label: "Spec",
+							value: "OpenAPI",
+							hint: "source"
+						},
+						{
+							label: "Out",
+							value: "Static",
+							hint: "CDN"
+						}
+					] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "clarify-preview-endpoint-grid grid gap-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointSummaryPreview, { endpoint: embeddedEndpoint }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmbeddedApiPreview, { endpoint: embeddedEndpoint })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OutputListPreview, { outputs: embeddedGuide.outputs ?? [] })
+				]
+			})
+		})
+	});
+}
+function MainPreview() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreviewEnvironment, {
+		initialEntry: mainPreviewPath,
+		sections: mainPreviewSections,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chrome, {
+			title: "source/en-US/openapi/embedding.mdx",
+			status: "Rendered from OpenAPI + MDX",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "clarify-preview-shell grid",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+					className: "border-r border-(--clarify-theme-tokens-colors-border) px-1 py-4 text-sm/7 dark:border-white/10 dark:bg-white/5",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreviewNavigation, {
+						endpoint: embeddedEndpoint,
+						guide: embeddedGuide,
+						outputs: embeddedGuide.outputs ?? []
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MainContentPreview, {})]
+			})
+		})
+	});
+}
+function MdxPreview() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreviewEnvironment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chrome, {
+		title: "source/started/index.mdx",
+		status: "Rendered by renderer",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "clarify-preview-body overflow-hidden bg-(--clarify-theme-tokens-colors-background) p-5 dark:bg-zinc-950",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+				className: "max-w-3xl text-sm/7 text-(--clarify-ui-text-soft)",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "inline-flex rounded-full bg-(--clarify-ui-accent-background) px-3 py-1 text-xs/5 font-semibold text-(--clarify-ui-accent-text)",
+						children: "MDX page"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: "mt-3 text-2xl/8 font-semibold tracking-tight text-(--clarify-ui-text-strong)",
+						children: "Get Started"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mt-3",
+						children: "Write pages in source/. Clarify turns MDX, config, and OpenAPI files into routes."
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-5 rounded-2xl border border-(--clarify-ui-accent-border) bg-(--clarify-ui-accent-background) p-4 text-sm/6 text-(--clarify-ui-text-strong)",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "font-semibold text-(--clarify-ui-text-strong)",
+							children: "Static output ready"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "mt-1",
+							children: "output/ is plain static files."
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-5 grid gap-4 sm:grid-cols-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-5 shadow-sm dark:border-white/10 dark:bg-zinc-900/50",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "text-base/6 font-semibold text-(--clarify-ui-text-strong)",
+								children: "MDX pages"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mt-2 text-sm/6",
+								children: "Guides live beside code."
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-5 shadow-sm dark:border-white/10 dark:bg-zinc-900/50",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "text-base/6 font-semibold text-(--clarify-ui-text-strong)",
+								children: "API embeds"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mt-2 text-sm/6",
+								children: "Specs render inline."
+							})]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-5 rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) p-5 shadow-sm dark:border-white/10 dark:bg-zinc-900/50",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MethodBadge, { method: embeddedEndpoint.method }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+								className: "text-sm font-medium text-(--clarify-ui-text)",
+								children: embeddedEndpoint.path
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "mt-3 text-sm/6",
+							children: embeddedEndpoint.description
+						})]
+					})
+				]
+			})
+		})
+	}) });
+}
+function OpenApiPreview() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreviewEnvironment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chrome, {
+		title: "source/api.openapi.json",
+		status: "Endpoint + examples",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "clarify-preview-openapi-window overflow-hidden bg-(--clarify-theme-tokens-colors-background) px-4 py-4 dark:bg-zinc-950",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "clarify-preview-openapi-mask h-full overflow-hidden",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "clarify-preview-api-content clarify-preview-api-content-openapi origin-top pb-10",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenApiExamplesPreview, { endpoint: staticOutputEndpoint })
+				})
+			})
+		})
+	}) });
+}
+//#endregion
+exports.MainPreview = MainPreview;
+exports.MdxPreview = MdxPreview;
+exports.OpenApiPreview = OpenApiPreview;
+
+//# sourceMappingURL=preview.cjs.map