@clarify-labs/renderer 0.9.2 → 0.9.4

package/output/{OpenApiOperation-CP_fxT_F.cjs → OpenApiOperation-CyyPlZL6.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-DakpK96I.cjs");
-const require_PageActions = require("./PageActions-B08cDCzq.cjs");
+const require_PageActions = require("./PageActions-CTn2XkPg.cjs");
 const require_remark = require("./remark-Dv3owbSH.cjs");
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx, 1);
@@ -906,6 +906,44 @@ function Prose(arg0) {
 	});
 }
 //#endregion
+//#region source/components/Tabs.tsx
+function Tabs(arg0) {
+	const { items, selectedIndex, onChange, className, listClassName, panelsClassName } = arg0;
+	const [internalIndex, setInternalIndex] = (0, react.useState)(0);
+	const resolvedIndex = typeof selectedIndex === "number" ? selectedIndex : internalIndex;
+	const indicatorLayoutId = (0, react.useId)();
+	const handleChange = (index) => {
+		if (typeof selectedIndex !== "number") setInternalIndex(index);
+		onChange?.(index);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.TabGroup, {
+		selectedIndex: resolvedIndex,
+		onChange: handleChange,
+		className,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabList, {
+			className: (0, clsx.default)("flex flex-wrap items-center gap-6 border-b border-(--clarify-theme-tokens-colors-border) pb-0", listClassName),
+			children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.Tab, {
+				className: ({ selected }) => (0, clsx.default)("clarify-ui-tab relative inline-flex h-10 shrink-0 items-center px-0 py-0 text-sm font-medium transition focus:outline-none", selected && "clarify-ui-tab-active"),
+				children: ({ selected }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label }), selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
+					layoutId: indicatorLayoutId,
+					className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-(--clarify-theme-tokens-colors-foreground)",
+					transition: {
+						type: "tween",
+						duration: .16,
+						ease: "easeOut"
+					}
+				}) : null] })
+			}, item.id))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanels, {
+			className: (0, clsx.default)("mt-4", panelsClassName),
+			children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.TabPanel, {
+				className: "focus:outline-none",
+				children: item.panel
+			}, item.id))
+		})]
+	});
+}
+//#endregion
 //#region source/components/WebFrame.tsx
 function WebFrame(arg0) {
 	const { src, title = "Embedded content", children, showWindow = true, className, iframeClassName, height = 420, style, ...props } = arg0;
@@ -1265,10 +1303,10 @@ function schemaToType(schema) {
 	if (!isRecord(schema)) return void 0;
 	if (isReference(schema)) return resolveReferenceName(schema.$ref);
 	if (typeof schema.const !== "undefined") return JSON.stringify(schema.const);
-	if (Array.isArray(schema.enum)) return schema.enum.map(String).join(" | ");
+	if (Array.isArray(schema.enum)) return "enum";
 	const oneOf = schema.oneOf ?? schema.anyOf;
-	if (Array.isArray(oneOf)) return oneOf.map(schemaToType).filter(Boolean).join(" | ");
-	if (Array.isArray(schema.allOf)) return schema.allOf.map(schemaToType).filter(Boolean).join(" & ");
+	if (Array.isArray(oneOf)) return oneOf.map((branch) => schemaToType(branch)).filter(Boolean).join(" | ");
+	if (Array.isArray(schema.allOf)) return schema.allOf.map((branch) => schemaToType(branch)).filter(Boolean).join(" & ");
 	if (schemaHasType(schema, "array")) return `${schemaToType(schema.items) ?? "unknown"}[]`;
 	const type = Array.isArray(schema.type) ? schema.type.map(String).join(" | ") : schema.type;
 	return typeof type === "string" ? [type, typeof schema.format === "string" ? `<${schema.format}>` : void 0].filter(Boolean).join("") : void 0;
@@ -2077,19 +2115,36 @@ function firstExampleKeyForResponseContent(content) {
 	return getExampleEntries(content?.value)[0]?.key ?? "";
 }
 function useResponseExamplesState(arg0) {
-	const { operation, spec, sharedExampleKey, onSelectExampleKey } = arg0;
-	const responses = getResponseEntries(operation, spec).filter(({ response }) => getMediaTypeEntries(response.content, spec).length > 0);
-	const [selectedStatus, setSelectedStatus] = (0, react.useState)(responses.find(({ status }) => status.startsWith("2"))?.status ?? responses[0]?.status ?? "");
-	const selectedResponse = responses.find(({ status }) => status === selectedStatus) ?? responses[0];
+	const { operation, spec, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus } = arg0;
+	const orderedResponses = [...getResponseEntries(operation, spec).filter(({ response }) => getMediaTypeEntries(response.content, spec).length > 0)].sort((left, right) => {
+		if (left.status === "default") return -1;
+		if (right.status === "default") return 1;
+		const leftCode = Number(left.status);
+		const rightCode = Number(right.status);
+		if (!Number.isNaN(leftCode) && !Number.isNaN(rightCode)) return leftCode - rightCode;
+		return left.status.localeCompare(right.status);
+	});
+	const [internalSelectedStatus, setInternalSelectedStatus] = (0, react.useState)(orderedResponses.find(({ status }) => status === "default")?.status ?? orderedResponses.find(({ status }) => status.startsWith("2"))?.status ?? orderedResponses[0]?.status ?? "");
+	const activeStatus = selectedStatus ?? internalSelectedStatus;
+	const selectedResponse = orderedResponses.find(({ status }) => status === activeStatus) ?? orderedResponses[0];
 	const responseContents = getMediaTypeEntries(selectedResponse?.response.content, spec);
-	const [selectedMediaType, setSelectedMediaType] = (0, react.useState)(responseContents[0]?.mediaType ?? "");
-	const selectedContent = responseContents.find((content) => content.mediaType === selectedMediaType) ?? responseContents[0];
+	const [selection, setSelection] = (0, react.useState)(() => ({
+		status: activeStatus,
+		mediaType: responseContents[0]?.mediaType ?? "",
+		exampleKey: firstExampleKeyForResponseContent(responseContents[0])
+	}));
+	const resolvedSelection = selection.status === activeStatus ? selection : {
+		status: activeStatus,
+		mediaType: responseContents[0]?.mediaType ?? "",
+		exampleKey: firstExampleKeyForResponseContent(responseContents[0])
+	};
+	const selectedContent = responseContents.find((content) => content.mediaType === resolvedSelection.mediaType) ?? responseContents[0];
 	const examples = getExampleEntries(selectedContent?.value);
-	const [selectedExampleKey, setSelectedExampleKey] = (0, react.useState)(examples[0]?.key ?? "");
+	const selectedExampleKey = examples.some((example) => example.key === resolvedSelection.exampleKey) ? resolvedSelection.exampleKey : examples[0]?.key ?? "";
 	const currentExampleKey = (sharedExampleKey && examples.some((example) => example.key === sharedExampleKey) ? sharedExampleKey : void 0) ?? selectedExampleKey;
 	const selectedExample = examples.find((example) => example.key === currentExampleKey) ?? examples[0];
 	return {
-		responses,
+		responses: orderedResponses,
 		selectedResponse,
 		responseContents,
 		selectedContent,
@@ -2097,29 +2152,42 @@ function useResponseExamplesState(arg0) {
 		selectedExample,
 		responseCode: stringifyExample(selectedExample?.value),
 		onSelectStatus: (value) => {
-			const nextContents = getMediaTypeEntries(responses.find(({ status }) => status === value)?.response.content, spec);
-			setSelectedStatus(value);
-			setSelectedMediaType(nextContents[0]?.mediaType ?? "");
-			setSelectedExampleKey(firstExampleKeyForResponseContent(nextContents[0]));
+			const nextContents = getMediaTypeEntries(orderedResponses.find(({ status }) => status === value)?.response.content, spec);
+			if (typeof selectedStatus === "undefined") setInternalSelectedStatus(value);
+			onSelectStatus?.(value);
+			setSelection({
+				status: value,
+				mediaType: nextContents[0]?.mediaType ?? "",
+				exampleKey: firstExampleKeyForResponseContent(nextContents[0])
+			});
 		},
 		onSelectMediaType: (value) => {
-			setSelectedMediaType(value);
-			setSelectedExampleKey(firstExampleKeyForResponseContent(responseContents.find((content) => content.mediaType === value)));
+			const nextContent = responseContents.find((content) => content.mediaType === value);
+			setSelection((current) => ({
+				...current,
+				mediaType: value,
+				exampleKey: firstExampleKeyForResponseContent(nextContent)
+			}));
 		},
 		onSelectExample: (value) => {
-			setSelectedExampleKey(value);
+			setSelection((current) => ({
+				...current,
+				exampleKey: value
+			}));
 			onSelectExampleKey?.(value);
 		}
 	};
 }
 function ResponseExamplesPanel(arg0) {
-	const { operation, spec, sharedExampleKey, onSelectExampleKey } = arg0;
+	const { operation, spec, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus } = arg0;
 	const t = require_PageActions.useBuiltInText();
 	const state = useResponseExamplesState({
 		operation,
 		spec,
 		sharedExampleKey,
-		onSelectExampleKey
+		onSelectExampleKey,
+		selectedStatus,
+		onSelectStatus
 	});
 	if (!state.selectedResponse || !state.selectedContent || !state.responseCode) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApiExampleCodeGroup, {
@@ -2140,9 +2208,17 @@ function ResponseExamplesPanel(arg0) {
 }
 //#endregion
 //#region source/openapi/components/SchemaProperties.tsx
+function getEnumDescriptions(schema) {
+	const descriptions = schema["x-enumDescriptions"];
+	if (Array.isArray(descriptions)) return descriptions.map((value) => typeof value === "string" ? value : void 0);
+	if (isRecord(descriptions)) return Array.isArray(schema.enum) ? schema.enum.map((value) => {
+		const description = descriptions[String(value)];
+		return typeof description === "string" ? description : void 0;
+	}) : [];
+	return [];
+}
 function getSchemaDetails(schema) {
 	const details = [
-		Array.isArray(schema.enum) ? `enum: ${schema.enum.map(String).join(", ")}` : void 0,
 		typeof schema.const !== "undefined" ? `const: ${String(schema.const)}` : void 0,
 		typeof schema.default !== "undefined" ? `default: ${String(schema.default)}` : void 0,
 		typeof schema.pattern === "string" ? `pattern: ${schema.pattern}` : void 0,
@@ -2155,6 +2231,21 @@ function getSchemaDetails(schema) {
 function getSchemaDescription(schema) {
 	return typeof schema.description === "string" ? schema.description : void 0;
 }
+function getSchemaNodeType(schema) {
+	return schemaToType(schema);
+}
+function getEnumChildren(schema, path) {
+	if (!Array.isArray(schema.enum) || schema.enum.length === 0) return [];
+	const descriptions = getEnumDescriptions(schema);
+	return schema.enum.map((value, index) => ({
+		key: `${path || "root"}.enum[${index}]`,
+		name: String(value),
+		kind: "enum",
+		description: descriptions[index],
+		required: false,
+		children: []
+	}));
+}
 function getComposedBranches(schema) {
 	const entries = [];
 	for (const key of [
@@ -2172,7 +2263,7 @@ function getComposedBranches(schema) {
 	return entries;
 }
 function getSchemaChildren(arg0) {
-	const { spec, schema, path, required = [], depth = 0, seen = /* @__PURE__ */ new Set() } = arg0;
+	const { spec, path, schema, depth = 0, required = [], seen = /* @__PURE__ */ new Set(), defaultExpanded } = arg0;
 	if (depth > 12) return [];
 	if (isReference(schema)) {
 		if (seen.has(schema.$ref)) return [];
@@ -2182,7 +2273,8 @@ function getSchemaChildren(arg0) {
 			path,
 			required,
 			depth,
-			seen: new Set([...seen, schema.$ref])
+			seen: new Set([...seen, schema.$ref]),
+			defaultExpanded
 		});
 	}
 	if (!isRecord(schema)) return [];
@@ -2191,9 +2283,11 @@ function getSchemaChildren(arg0) {
 		schema: schema.items,
 		path: `${path}[]`,
 		depth: depth + 1,
-		seen
+		seen,
+		defaultExpanded
 	}) : [];
 	const objectRequired = Array.isArray(schema.required) ? schema.required.map(String) : required;
+	const enumChildren = getEnumChildren(schema, path);
 	const properties = isRecord(schema.properties) ? schema.properties : {};
 	const propertyChildren = Object.entries(properties).map(([name, propertySchema]) => {
 		const resolvedProperty = resolveSchema(spec, propertySchema);
@@ -2205,31 +2299,38 @@ function getSchemaChildren(arg0) {
 			schema: isArray ? property.items : propertySchema,
 			path: isArray ? `${childPath}[]` : childPath,
 			depth: depth + 1,
-			seen
+			seen,
+			defaultExpanded
 		});
+		const hasEnumValues = Array.isArray(property.enum) && property.enum.length > 0;
 		return {
 			key: childPath,
 			name,
-			type: schemaToType(propertySchema),
+			kind: "property",
+			type: getSchemaNodeType(property),
 			description: getSchemaDescription(property),
 			details: getSchemaDetails(property),
 			required: objectRequired.includes(name),
+			defaultExpanded: hasEnumValues ? defaultExpanded === true : defaultExpanded ?? depth < 1,
 			children
 		};
 	});
 	const additionalPropertyChildren = isRecord(schema.additionalProperties) ? [{
 		key: `${path || "root"}.*`,
 		name: "*",
-		type: schemaToType(schema.additionalProperties),
+		kind: "property",
+		type: getSchemaNodeType(schema.additionalProperties),
 		description: getSchemaDescription(schema.additionalProperties),
 		details: getSchemaDetails(schema.additionalProperties),
 		required: false,
+		defaultExpanded: defaultExpanded ?? depth < 1,
 		children: getSchemaChildren({
 			spec,
 			schema: schema.additionalProperties,
 			path: `${path || "root"}.*`,
 			depth: depth + 1,
-			seen
+			seen,
+			defaultExpanded
 		})
 	}] : [];
 	const composedChildren = getComposedBranches(schema).map(({ label, schema: branchSchema }) => {
@@ -2238,35 +2339,40 @@ function getSchemaChildren(arg0) {
 		return {
 			key: `${path || "root"}.${label}`,
 			name: label,
-			type: schemaToType(branchSchema),
+			kind: "property",
+			type: getSchemaNodeType(branch),
 			description: branch ? getSchemaDescription(branch) : void 0,
 			details: branch ? getSchemaDetails(branch) : void 0,
 			required: false,
+			defaultExpanded: defaultExpanded ?? depth < 1,
 			children: getSchemaChildren({
 				spec,
 				schema: branchSchema,
 				path: `${path || "root"}.${label}`,
 				required: objectRequired,
 				depth: depth + 1,
-				seen
+				seen,
+				defaultExpanded
 			})
 		};
 	});
 	return [
 		...arrayChildren,
+		...enumChildren,
 		...propertyChildren,
 		...additionalPropertyChildren,
 		...composedChildren
 	];
 }
-function getRootSchemaNode(spec, schema) {
+function getRootSchemaNode(spec, schema, defaultExpanded) {
 	if (isReference(schema)) {
 		const resolvedSchema = resolveSchema(spec, schema);
 		const resolved = isRecord(resolvedSchema) ? resolvedSchema : {};
 		return {
 			key: schema.$ref,
 			name: resolveReferenceName(schema.$ref),
-			type: schemaToType(schema),
+			kind: "property",
+			type: getSchemaNodeType(resolved),
 			description: getSchemaDescription(resolved),
 			details: getSchemaDetails(resolved),
 			required: false,
@@ -2274,7 +2380,8 @@ function getRootSchemaNode(spec, schema) {
 				spec,
 				schema: resolvedSchema,
 				path: resolveReferenceName(schema.$ref),
-				seen: new Set([schema.$ref])
+				seen: new Set([schema.$ref]),
+				defaultExpanded
 			})
 		};
 	}
@@ -2282,24 +2389,58 @@ function getRootSchemaNode(spec, schema) {
 	return {
 		key: "root",
 		name: "body",
-		type: schemaToType(schema),
+		kind: "property",
+		type: getSchemaNodeType(schema),
 		description: getSchemaDescription(schema),
 		details: getSchemaDetails(schema),
 		required: false,
 		children: getSchemaChildren({
 			spec,
 			schema,
-			path: ""
+			path: "",
+			defaultExpanded
 		})
 	};
 }
-function SchemaNode(arg0) {
+function EnumValueNode(arg0) {
 	const { node, depth = 0 } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		className: "clarify-schema-node m-0 px-0 py-2 first:pt-0 last:pb-0",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("flex min-w-0 items-start rounded py-0.5 text-left", depth > 0 ? "-mx-2 w-(--clarify-schema-row-nested-width) px-2" : "w-full px-1"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-sm/5 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+						children: node.name
+					})
+				}), node.description || node.details ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mt-0.5 text-sm/5 text-(--clarify-ui-text-soft) *:first:mt-0 *:last:mb-0",
+					children: [node.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
+						className: "*:first:mt-0 *:last:mb-0",
+						children: node.description
+					}) : null, node.details ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-xs text-(--clarify-ui-text-faint)",
+						children: node.details
+					}) : null]
+				}) : null]
+			})
+		})
+	});
+}
+function SchemaNode(arg0) {
+	const { node, depth = 0, defaultExpanded } = arg0;
 	const t = require_PageActions.useBuiltInText();
-	const [expanded, setExpanded] = (0, react.useState)(depth < 1);
+	const [expanded, setExpanded] = (0, react.useState)(defaultExpanded ?? depth < 1);
 	const hasChildren = node.children.length > 0;
+	if (node.kind === "enum") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EnumValueNode, {
+		node,
+		depth
+	});
 	const type = [node.type, node.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0;
-	const fallbackDescription = node.required ? t("openapi.required") : t("openapi.optional");
+	const fallbackDescription = hasChildren ? void 0 : node.required ? t("openapi.required") : t("openapi.optional");
 	const rowClassName = (0, clsx.default)("flex min-w-0 items-start rounded py-0.5 text-left", depth > 0 ? "-mx-2 w-(--clarify-schema-row-nested-width) px-2" : "w-full px-1");
 	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "min-w-0 flex-1",
@@ -2353,13 +2494,14 @@ function SchemaTree(arg0) {
 		className: (0, clsx.default)("m-0 list-none divide-y divide-(--clarify-theme-tokens-colors-border) p-0", depth > 0 && "mt-2 rounded-lg bg-(--clarify-ui-subtle-background) px-2 py-1"),
 		children: nodes.map((node) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaNode, {
 			node,
-			depth
+			depth,
+			defaultExpanded: node.defaultExpanded
 		}, node.key))
 	});
 }
 function SchemaProperties(arg0) {
-	const { title, schema, spec } = arg0;
-	const root = getRootSchemaNode(spec, schema);
+	const { title, schema, spec, defaultExpanded } = arg0;
+	const root = getRootSchemaNode(spec, schema, defaultExpanded);
 	if (!root || root.children.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "clarify-schema-properties my-6",
@@ -2369,97 +2511,172 @@ function SchemaProperties(arg0) {
 function ParameterList(arg0) {
 	const { title, parameters } = arg0;
 	const t = require_PageActions.useBuiltInText();
-	if (parameters.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Properties, { children: parameters.map((parameter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Property, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Properties, { children: parameters.length > 0 ? parameters.map((parameter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Property, {
 		name: parameter.name ?? t("openapi.parameter"),
 		type: [schemaToType(parameter.schema), parameter.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0,
 		children: parameter.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
 			className: "*:first:mt-0 *:last:mb-0",
 			children: parameter.description
 		}) : t("openapi.operationParameter")
-	}, `${parameter.in}-${parameter.name}`)) })] });
+	}, `${parameter.in}-${parameter.name}`)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "text-sm/5 text-(--clarify-ui-text-soft)",
+		children: t("openapi.none")
+	}) })] });
 }
 function ResponseList(arg0) {
-	const { operation, spec } = arg0;
+	const { operation, spec, selectedStatus, onSelectStatus } = arg0;
 	const t = require_PageActions.useBuiltInText();
-	const responses = getResponseEntries(operation, spec);
-	if (responses.length === 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.responses") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Properties, { children: responses.map(({ status, response }) => {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Property, {
-			name: status,
-			type: schemaToType(getJsonLikeContent(response.content, spec)?.value.schema),
-			children: response.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
-				className: "*:first:mt-0 *:last:mb-0",
-				children: response.description
-			}) : `${t("openapi.response")}.`
-		}, status);
-	}) })] });
+	const orderedResponses = [...getResponseEntries(operation, spec)].sort((left, right) => {
+		if (left.status === "default") return -1;
+		if (right.status === "default") return 1;
+		const leftCode = Number(left.status);
+		const rightCode = Number(right.status);
+		if (!Number.isNaN(leftCode) && !Number.isNaN(rightCode)) return leftCode - rightCode;
+		return left.status.localeCompare(right.status);
+	});
+	const activeStatus = selectedStatus ?? orderedResponses.find(({ status }) => status === "default")?.status ?? orderedResponses.find(({ status }) => status.startsWith("2"))?.status ?? orderedResponses[0]?.status ?? "";
+	const selectedIndex = Math.max(0, orderedResponses.findIndex(({ status }) => status === activeStatus));
+	if (orderedResponses.length === 0) return null;
+	const renderResponsePanel = ({ status, response }) => {
+		const responseSchema = getJsonLikeContent(response.content, spec)?.value.schema;
+		const type = schemaToType(responseSchema);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "rounded-(--clarify-theme-tokens-radius-xl) p-0",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-sm/5 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+						children: status
+					}), type ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-xs text-(--clarify-theme-tokens-colors-muted)",
+						children: type
+					}) : null]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mt-3 text-sm/6 text-(--clarify-ui-text-soft) *:first:mt-0 *:last:mb-0",
+					children: response.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, {
+						className: "*:first:mt-0 *:last:mb-0",
+						children: response.description
+					}) : `${t("openapi.response")}.`
+				}),
+				responseSchema && spec ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mt-4",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaProperties, {
+						title: t("openapi.responseBodyProperties"),
+						schema: responseSchema,
+						spec
+					})
+				}) : null
+			]
+		});
+	};
+	if (orderedResponses.length === 1) {
+		const [{ status, response }] = orderedResponses;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.responses") }), renderResponsePanel({
+			status,
+			response
+		})] });
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.responses") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tabs, {
+		selectedIndex,
+		onChange: (index) => {
+			onSelectStatus?.(orderedResponses[index]?.status ?? "");
+		},
+		items: orderedResponses.map(({ status, response }) => ({
+			id: status,
+			label: status,
+			panel: renderResponsePanel({
+				status,
+				response
+			})
+		})),
+		panelsClassName: "mt-4"
+	})] });
 }
 //#endregion
 //#region source/openapi/components/EndpointSections.tsx
 function EndpointRequest(arg0) {
 	const { spec, path, method, description, groupedParameters, parameters, requestBody, requestContents, requestSchema, selectedRequestMediaType, onSelectRequestMediaType, selectedServer, serverVariables, auth, sharedExampleKey, onSelectExampleKey } = arg0;
 	const t = require_PageActions.useBuiltInText();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: description }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
 		className: "relative mt-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Col, { children: [
-			description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: description }) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
-				title: t("openapi.pathParameters"),
-				parameters: groupedParameters.path
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
-				title: t("openapi.queryParameters"),
-				parameters: groupedParameters.query
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
-				title: t("openapi.headers"),
-				parameters: groupedParameters.header
-			}),
-			requestBody && requestContents.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.requestBody") }),
-				typeof requestBody.description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: requestBody.description }) : null,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaProperties, {
-					title: t("openapi.bodyProperties"),
-					schema: requestSchema,
-					spec
-				})
-			] }) : null
-		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "w-full",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
+					title: t("openapi.pathParameters"),
+					parameters: groupedParameters.path
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
+					title: t("openapi.queryParameters"),
+					parameters: groupedParameters.query
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParameterList, {
+					title: t("openapi.headers"),
+					parameters: groupedParameters.header
+				}),
+				requestBody && requestContents.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("openapi.requestBody") }),
+					typeof requestBody.description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Markdown, { children: requestBody.description }) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaProperties, {
+						title: t("openapi.bodyProperties"),
+						schema: requestSchema,
+						spec
+					})
+				] }) : null
+			]
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, {
 			sticky: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestExamplesPanel, {
-				spec,
-				path,
-				method,
-				parameters,
-				requestContents,
-				selectedMediaType: selectedRequestMediaType,
-				onSelectMediaType: onSelectRequestMediaType,
-				selectedServer,
-				serverVariables,
-				auth,
-				sharedExampleKey,
-				onSelectExampleKey
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RequestExamplesPanel, {
+					spec,
+					path,
+					method,
+					parameters,
+					requestContents,
+					selectedMediaType: selectedRequestMediaType,
+					onSelectMediaType: onSelectRequestMediaType,
+					selectedServer,
+					serverVariables,
+					auth,
+					sharedExampleKey,
+					onSelectExampleKey
+				})
 			})
 		})]
-	});
+	})] });
 }
 function EndpointResponse(arg0) {
-	const { spec, operation, sharedExampleKey, onSelectExampleKey } = arg0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
-		className: "relative mt-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseList, {
-			operation,
-			spec
-		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, {
-			sticky: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseExamplesPanel, {
-				operation,
-				spec,
-				sharedExampleKey,
-				onSelectExampleKey
-			})
-		})]
+	const { spec, operation, sharedExampleKey, onSelectExampleKey, selectedStatus, onSelectStatus } = arg0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "mt-6",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Row, {
+			className: "relative",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseList, {
+					operation,
+					spec,
+					selectedStatus,
+					onSelectStatus
+				})
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Col, {
+				sticky: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "w-full",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponseExamplesPanel, {
+						operation,
+						spec,
+						sharedExampleKey,
+						onSelectExampleKey,
+						selectedStatus,
+						onSelectStatus
+					})
+				})
+			})]
+		})
 	});
 }
 //#endregion
@@ -2554,26 +2771,30 @@ function EndpointMethodBadge(arg0) {
 	});
 }
 function EndpointPath(arg0) {
-	const { path } = arg0;
-	const segments = path.split("/").filter(Boolean);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "flex min-w-0 flex-1 items-center overflow-x-auto text-sm font-bold leading-6 whitespace-nowrap",
-		children: segments.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-(--clarify-ui-text-faint)",
-			children: "/"
-		}), segments.map((segment, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "flex items-center",
-			children: [index > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-(--clarify-ui-text-faint)",
-				children: "/"
-			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "font-bold text-(--clarify-theme-tokens-colors-foreground)",
-				children: segment
-			})]
-		}, `${segment}-${index}`))] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "font-bold text-(--clarify-theme-tokens-colors-foreground)",
-			children: "/"
-		})
+	const { path, copied = false, onCopy } = arg0;
+	const t = require_PageActions.useBuiltInText();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "min-w-0 flex-1 overflow-x-auto text-sm font-bold leading-6 whitespace-nowrap",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "select-text font-mono text-(--clarify-theme-tokens-colors-foreground)",
+				children: path || "/"
+			})
+		}), onCopy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": copied ? t("actions.copied") : t("actions.copy"),
+			title: copied ? t("actions.copied") : t("actions.copy"),
+			onClick: onCopy,
+			className: (0, clsx.default)("flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)", copied && "border-emerald-400/70 bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-200"),
+			children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, {
+				className: "h-3.5 w-3.5",
+				"aria-hidden": "true"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CopyIcon, {
+				className: "h-3.5 w-3.5",
+				"aria-hidden": "true"
+			})
+		}) : null]
 	});
 }
 function InlineListbox(arg0) {
@@ -2621,6 +2842,22 @@ function InlineListbox(arg0) {
 function getServerPreviewUrl(server, variables) {
 	return (server.url ?? "").replace(/\{([^}]+)\}/g, (_, name) => variables[name] ?? server.variables?.[name]?.default ?? `{${name}}`);
 }
+function getFullEndpointUrl(server, variables, path) {
+	const base = getServerPreviewUrl(server, variables);
+	if (!base) return path;
+	return `${base.endsWith("/") ? base.slice(0, -1) : base}${path.startsWith("/") ? path : `/${path}`}`;
+}
+function getDefaultResponseStatus(operation, spec) {
+	const orderedResponses = [...getResponseEntries(operation, spec).filter(({ response }) => getMediaTypeEntries(response.content, spec).length > 0)].sort((left, right) => {
+		if (left.status === "default") return -1;
+		if (right.status === "default") return 1;
+		const leftCode = Number(left.status);
+		const rightCode = Number(right.status);
+		if (!Number.isNaN(leftCode) && !Number.isNaN(rightCode)) return leftCode - rightCode;
+		return left.status.localeCompare(right.status);
+	});
+	return orderedResponses.find(({ status }) => status === "default")?.status ?? orderedResponses.find(({ status }) => status.startsWith("2"))?.status ?? orderedResponses[0]?.status ?? "";
+}
 function ServerUrlValue(arg0) {
 	const { server, variables, open, interactive, onToggle } = arg0;
 	const url = getServerPreviewUrl(server, variables);
@@ -2770,6 +3007,16 @@ function AuthPanel(arg0) {
 function EndpointIdentity(arg0) {
 	const { method, path, servers, selectedServerKey, selectedServer, serverVariables, serverOpen, authOptions, selectedAuthName, selectedAuth, authValues, authOpen, onSelectServer, onChangeServerVariable, onToggleServer, onToggleAuth, onSelectAuth, onChangeAuthValue } = arg0;
 	const serverInteractive = servers.length > 1 || Object.keys(selectedServer.variables ?? {}).length > 0;
+	const [copiedUrl, setCopiedUrl] = (0, react.useState)(false);
+	const fullUrl = getFullEndpointUrl(selectedServer, serverVariables, path);
+	(0, react.useEffect)(() => {
+		if (!copiedUrl) return void 0;
+		const timeout = window.setTimeout(() => setCopiedUrl(false), 1200);
+		return () => window.clearTimeout(timeout);
+	}, [copiedUrl]);
+	async function handleCopyUrl() {
+		if (await require_PageActions.copyTextToClipboard(fullUrl)) setCopiedUrl(true);
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "not-prose flex w-full flex-col overflow-hidden rounded-xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) shadow-xs",
 		children: [
@@ -2784,7 +3031,11 @@ function EndpointIdentity(arg0) {
 						interactive: serverInteractive,
 						onToggle: onToggleServer
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointPath, { path }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndpointPath, {
+						path,
+						copied: copiedUrl,
+						onCopy: handleCopyUrl
+					}),
 					authOptions.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"aria-expanded": authOpen,
@@ -2829,6 +3080,7 @@ function OpenApiOperation(arg0) {
 	const serverState = useOperationServerState(spec, operation, path);
 	const authState = useOperationAuthState(spec, operation);
 	const [linkedExampleKey, setLinkedExampleKey] = (0, react.useState)("");
+	const [selectedResponseStatus, setSelectedResponseStatus] = (0, react.useState)(() => getDefaultResponseStatus(operation, spec));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: "clarify-api-endpoint scroll-mt-24 pb-16 first:pt-0 last:pb-0",
 		"aria-labelledby": id,
@@ -2885,7 +3137,9 @@ function OpenApiOperation(arg0) {
 				spec,
 				operation,
 				sharedExampleKey: linkedExampleKey,
-				onSelectExampleKey: setLinkedExampleKey
+				onSelectExampleKey: setLinkedExampleKey,
+				selectedStatus: selectedResponseStatus,
+				onSelectStatus: setSelectedResponseStatus
 			})
 		]
 	});
@@ -3072,4 +3326,4 @@ Object.defineProperty(exports, "primitives_exports", {
 	}
 });
 
-//# sourceMappingURL=OpenApiOperation-CP_fxT_F.cjs.map
+//# sourceMappingURL=OpenApiOperation-CyyPlZL6.cjs.map