@rebasepro/studio 0.4.0 → 0.6.0

package/dist/ApiExplorer-CdIwR9Ga.js

@@ -0,0 +1,963 @@
+import { t as AuthSimulationSelector } from "./AuthSimulationSelector-iEZ-Or_1.js";
+import { useApiConfig, useAuthController, useRebaseContext } from "@rebasepro/core";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Alert, ArrowRightFromLineIcon, BookOpenIcon, Button, Chip, CircularProgress, IconButton, LoaderIcon, PlayIcon, PlusIcon, SearchBar, SendIcon, SlidersHorizontalIcon, TextField, Typography, UploadIcon, XIcon, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ApiExplorer/parseSpec.ts
+/**
+* Parse an OpenAPI 3.x spec into grouped, sorted endpoints for the sidebar.
+*/
+function parseOpenApiSpec(spec) {
+	const allEndpoints = [];
+	const tagMap = /* @__PURE__ */ new Map();
+	const tagDescriptions = /* @__PURE__ */ new Map();
+	for (const t of spec.tags ?? []) tagDescriptions.set(t.name, t.description ?? "");
+	for (const [path, methods] of Object.entries(spec.paths ?? {})) for (const [method, op] of Object.entries(methods)) {
+		if ([
+			"get",
+			"post",
+			"put",
+			"patch",
+			"delete"
+		].indexOf(method) === -1) continue;
+		const tags = op.tags?.length ? op.tags : ["Other"];
+		const shortPath = path.replace(/^\/api\/data/, "");
+		const endpoint = {
+			id: `${method}:${path}`,
+			method,
+			path,
+			shortPath: shortPath || "/",
+			summary: op.summary ?? "",
+			description: op.description ?? "",
+			tags,
+			parameters: op.parameters ?? [],
+			requestBody: op.requestBody,
+			responses: op.responses ?? {},
+			security: op.security,
+			operationId: op.operationId
+		};
+		allEndpoints.push(endpoint);
+		for (const tag of tags) {
+			if (!tagMap.has(tag)) tagMap.set(tag, []);
+			tagMap.get(tag).push(endpoint);
+		}
+	}
+	const ORDER = {
+		get: 0,
+		post: 1,
+		put: 2,
+		patch: 3,
+		delete: 4
+	};
+	const groups = [];
+	const tagOrder = (spec.tags ?? []).map((t) => t.name);
+	const sortedTags = [...tagMap.keys()].sort((a, b) => {
+		const ai = tagOrder.indexOf(a);
+		const bi = tagOrder.indexOf(b);
+		if (ai !== -1 && bi !== -1) return ai - bi;
+		if (ai !== -1) return -1;
+		if (bi !== -1) return 1;
+		return a.localeCompare(b);
+	});
+	for (const tag of sortedTags) {
+		const endpoints = tagMap.get(tag);
+		endpoints.sort((a, b) => {
+			const pa = a.path.localeCompare(b.path);
+			if (pa !== 0) return pa;
+			return (ORDER[a.method] ?? 99) - (ORDER[b.method] ?? 99);
+		});
+		groups.push({
+			tag,
+			description: tagDescriptions.get(tag),
+			endpoints
+		});
+	}
+	return {
+		groups,
+		allEndpoints
+	};
+}
+/**
+* Resolve a $ref string (e.g. "#/components/schemas/Author") to a schema name.
+*/
+function resolveRefName(ref) {
+	const parts = ref.split("/");
+	return parts[parts.length - 1];
+}
+/**
+* Resolve a $ref to its actual schema from the spec.
+*/
+function resolveRef(spec, ref) {
+	const parts = ref.replace("#/", "").split("/");
+	let current = spec;
+	for (const part of parts) current = current?.[part];
+	return current ?? {};
+}
+//#endregion
+//#region src/components/ApiExplorer/EndpointDetail.tsx
+/**
+* Renders the documentation view for a single API endpoint:
+* parameters, request body schema, response schemas.
+*/
+function EndpointDetail({ endpoint, spec }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "p-6 space-y-8 max-w-4xl",
+		children: [
+			(endpoint.summary || endpoint.description) && /* @__PURE__ */ jsxs("div", { children: [endpoint.summary && /* @__PURE__ */ jsx(Typography, {
+				variant: "h6",
+				className: "font-semibold mb-1",
+				children: endpoint.summary
+			}), endpoint.description && /* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				className: "text-text-secondary dark:text-text-secondary-dark",
+				children: endpoint.description
+			})] }),
+			endpoint.parameters.length > 0 && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(SectionHeading, {
+				icon: /* @__PURE__ */ jsx(SlidersHorizontalIcon, {
+					size: iconSize.small,
+					className: "text-text-secondary dark:text-text-secondary-dark"
+				}),
+				title: "Parameters"
+			}), /* @__PURE__ */ jsx("div", {
+				className: cls("rounded-lg border overflow-hidden", defaultBorderMixin),
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "w-full text-sm",
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+						className: "bg-surface-100 dark:bg-surface-900 text-left",
+						children: [
+							/* @__PURE__ */ jsx("th", {
+								className: "px-4 py-2 font-medium text-text-secondary dark:text-text-secondary-dark",
+								children: "Name"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "px-4 py-2 font-medium text-text-secondary dark:text-text-secondary-dark",
+								children: "In"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "px-4 py-2 font-medium text-text-secondary dark:text-text-secondary-dark",
+								children: "Type"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "px-4 py-2 font-medium text-text-secondary dark:text-text-secondary-dark",
+								children: "Description"
+							})
+						]
+					}) }), /* @__PURE__ */ jsx("tbody", { children: endpoint.parameters.map((p, i) => /* @__PURE__ */ jsxs("tr", {
+						className: cls("border-t", defaultBorderMixin),
+						children: [
+							/* @__PURE__ */ jsxs("td", {
+								className: "px-4 py-2.5",
+								children: [/* @__PURE__ */ jsx("code", {
+									className: "text-xs font-mono font-semibold",
+									children: p.name
+								}), p.required && /* @__PURE__ */ jsx("span", {
+									className: "text-red-500 ml-1 text-xs",
+									children: "*"
+								})]
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "px-4 py-2.5",
+								children: /* @__PURE__ */ jsx(Chip, {
+									size: "smallest",
+									colorScheme: p.in === "path" ? "orangeDarker" : "cyanDarker",
+									children: p.in
+								})
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "px-4 py-2.5 text-xs font-mono text-text-secondary dark:text-text-secondary-dark",
+								children: schemaTypeLabel(p.schema)
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "px-4 py-2.5 text-xs text-text-secondary dark:text-text-secondary-dark",
+								children: p.description ?? "—"
+							})
+						]
+					}, p.name + i)) })]
+				})
+			})] }),
+			endpoint.requestBody && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(SectionHeading, {
+				icon: /* @__PURE__ */ jsx(UploadIcon, {
+					size: iconSize.small,
+					className: "text-text-secondary dark:text-text-secondary-dark"
+				}),
+				title: "Request Body"
+			}), Object.entries(endpoint.requestBody.content ?? {}).map(([contentType, media]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Chip, {
+				size: "smallest",
+				colorScheme: "blueDarker",
+				className: "mb-3",
+				children: contentType
+			}), media.schema && /* @__PURE__ */ jsx(SchemaBlock, {
+				schema: media.schema,
+				spec,
+				depth: 0
+			})] }, contentType))] }),
+			/* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(SectionHeading, {
+				icon: /* @__PURE__ */ jsx(ArrowRightFromLineIcon, {
+					size: iconSize.small,
+					className: "text-text-secondary dark:text-text-secondary-dark"
+				}),
+				title: "Responses"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "space-y-3",
+				children: Object.entries(endpoint.responses).map(([code, res]) => /* @__PURE__ */ jsxs("div", {
+					className: cls("rounded-lg border overflow-hidden", defaultBorderMixin),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cls("flex items-center gap-3 px-4 py-2.5", "bg-surface-50 dark:bg-surface-900/50"),
+						children: [/* @__PURE__ */ jsx(StatusBadge, { code }), /* @__PURE__ */ jsx(Typography, {
+							variant: "body2",
+							className: "text-text-secondary dark:text-text-secondary-dark text-xs",
+							children: res.description
+						})]
+					}), res.content && Object.entries(res.content).map(([ct, media]) => media.schema && /* @__PURE__ */ jsx("div", {
+						className: cls("px-4 py-3 border-t", defaultBorderMixin),
+						children: /* @__PURE__ */ jsx(SchemaBlock, {
+							schema: media.schema,
+							spec,
+							depth: 0
+						})
+					}, ct))]
+				}, code))
+			})] })
+		]
+	});
+}
+function SchemaBlock({ schema, spec, depth }) {
+	if (schema.$ref) {
+		const name = resolveRefName(schema.$ref);
+		const resolved = resolveRef(spec, schema.$ref);
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Typography, {
+			variant: "caption",
+			className: "text-primary dark:text-primary-dark font-mono text-xs mb-2 block",
+			children: name
+		}), /* @__PURE__ */ jsx(SchemaBlock, {
+			schema: resolved,
+			spec,
+			depth
+		})] });
+	}
+	if (schema.properties) {
+		const required = new Set(schema.required ?? []);
+		return /* @__PURE__ */ jsx("div", {
+			className: cls("rounded-lg overflow-hidden", depth > 0 && `border ml-4 mt-1 ${defaultBorderMixin}`),
+			children: /* @__PURE__ */ jsx("table", {
+				className: "w-full text-xs",
+				children: /* @__PURE__ */ jsx("tbody", { children: Object.entries(schema.properties).map(([key, prop]) => /* @__PURE__ */ jsxs("tr", {
+					className: cls("border-t first:border-t-0", defaultBorderMixin),
+					children: [
+						/* @__PURE__ */ jsxs("td", {
+							className: "px-3 py-2 align-top w-36",
+							children: [
+								/* @__PURE__ */ jsx("code", {
+									className: "font-mono font-semibold text-text-primary dark:text-text-primary-dark",
+									children: key
+								}),
+								required.has(key) && /* @__PURE__ */ jsx("span", {
+									className: "text-red-500 ml-0.5",
+									children: "*"
+								}),
+								prop.readOnly && /* @__PURE__ */ jsx("span", {
+									className: "ml-1.5 text-[9px] text-text-secondary dark:text-text-secondary-dark italic",
+									children: "read-only"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: "px-3 py-2 align-top w-28",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "font-mono text-text-secondary dark:text-text-secondary-dark",
+								children: schemaTypeLabel(prop)
+							})
+						}),
+						/* @__PURE__ */ jsxs("td", {
+							className: "px-3 py-2 align-top text-text-secondary dark:text-text-secondary-dark",
+							children: [
+								prop.description ?? "",
+								prop.enum && /* @__PURE__ */ jsx("div", {
+									className: "flex flex-wrap gap-1 mt-1",
+									children: prop.enum.map((v) => /* @__PURE__ */ jsx("span", {
+										className: "px-1.5 py-0.5 rounded bg-surface-200 dark:bg-surface-800 text-[10px] font-mono",
+										children: String(v)
+									}, String(v)))
+								}),
+								prop.properties && /* @__PURE__ */ jsx(SchemaBlock, {
+									schema: prop,
+									spec,
+									depth: depth + 1
+								}),
+								prop.$ref && /* @__PURE__ */ jsx(SchemaBlock, {
+									schema: prop,
+									spec,
+									depth: depth + 1
+								})
+							]
+						})
+					]
+				}, key)) })
+			})
+		});
+	}
+	if (schema.type === "array" && schema.items) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+		className: "font-mono text-xs text-text-secondary dark:text-text-secondary-dark",
+		children: "Array of:"
+	}), /* @__PURE__ */ jsx(SchemaBlock, {
+		schema: schema.items,
+		spec,
+		depth: depth + 1
+	})] });
+	return /* @__PURE__ */ jsx("span", {
+		className: "font-mono text-xs text-text-secondary dark:text-text-secondary-dark",
+		children: schemaTypeLabel(schema)
+	});
+}
+function schemaTypeLabel(schema) {
+	if (!schema) return "any";
+	if (schema.$ref) return resolveRefName(schema.$ref);
+	if (schema.type === "array") return `${schemaTypeLabel(schema.items)}[]`;
+	if (schema.format) return `${schema.type} (${schema.format})`;
+	return schema.type ?? "object";
+}
+function SectionHeading({ icon, title }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 mb-3",
+		children: [icon, /* @__PURE__ */ jsx(Typography, {
+			variant: "subtitle2",
+			className: "font-semibold text-sm",
+			children: title
+		})]
+	});
+}
+function StatusBadge({ code }) {
+	const n = parseInt(code, 10);
+	return /* @__PURE__ */ jsx("span", {
+		className: cls("text-xs font-bold font-mono", n < 300 ? "text-emerald-600 dark:text-emerald-400" : n < 400 ? "text-blue-600 dark:text-blue-400" : n < 500 ? "text-amber-600 dark:text-amber-400" : "text-red-600 dark:text-red-400"),
+		children: code
+	});
+}
+//#endregion
+//#region src/components/ApiExplorer/TryItPanel.tsx
+/**
+* Interactive "Try It" panel that lets the user execute API requests
+* using their current JWT token directly from the Studio.
+*/
+function TryItPanel({ endpoint, apiUrl, getAuthToken, user, basePath = "" }) {
+	const storageKey = `rebase_apiexplorer_${endpoint.method}_${endpoint.path}`;
+	const [pathParams, setPathParams] = useState(() => {
+		try {
+			const v = localStorage.getItem(`${storageKey}_path`);
+			if (v) return JSON.parse(v);
+		} catch {}
+		return {};
+	});
+	const [queryParams, setQueryParams] = useState(() => {
+		try {
+			const v = localStorage.getItem(`${storageKey}_query`);
+			if (v) return JSON.parse(v);
+		} catch {}
+		return {};
+	});
+	const [customHeaders, setCustomHeaders] = useState(() => {
+		try {
+			const v = localStorage.getItem(`${storageKey}_headers`);
+			if (v) return JSON.parse(v);
+		} catch {}
+		return [{
+			key: "rebase-branch",
+			value: ""
+		}];
+	});
+	const [body, setBody] = useState(() => {
+		try {
+			const v = localStorage.getItem(`${storageKey}_body`);
+			if (v) return JSON.parse(v);
+		} catch {}
+		return buildBodyTemplate(endpoint);
+	});
+	const [response, setResponse] = useState(null);
+	const [loading, setLoading] = useState(false);
+	const [authMode, setAuthMode] = useState("jwt");
+	const [validationError, setValidationError] = useState(null);
+	const currentUser = useRebaseContext().authController?.user;
+	const users = useMemo(() => {
+		const managed = [];
+		if (currentUser) managed.push({
+			uid: currentUser.uid,
+			displayName: currentUser.displayName,
+			email: currentUser.email,
+			photoURL: currentUser.photoURL,
+			roles: currentUser.roles
+		});
+		return managed;
+	}, [currentUser]);
+	const currentSelectableUser = useMemo(() => {
+		if (!currentUser) return null;
+		return {
+			uid: currentUser.uid,
+			displayName: currentUser.displayName,
+			email: currentUser.email,
+			photoURL: currentUser.photoURL,
+			roles: currentUser.roles
+		};
+	}, [currentUser]);
+	const [selectedUser, setSelectedUser] = useState(null);
+	useEffect(() => {
+		localStorage.setItem(`${storageKey}_path`, JSON.stringify(pathParams));
+		localStorage.setItem(`${storageKey}_query`, JSON.stringify(queryParams));
+		localStorage.setItem(`${storageKey}_headers`, JSON.stringify(customHeaders));
+		localStorage.setItem(`${storageKey}_body`, JSON.stringify(body));
+	}, [
+		storageKey,
+		pathParams,
+		queryParams,
+		customHeaders,
+		body
+	]);
+	const resolvedUrl = useMemo(() => {
+		const base = basePath.startsWith("/") ? basePath : `/${basePath}`;
+		const cleanBase = base === "/" ? "" : base;
+		let url = `${apiUrl.replace(/\/+$/, "")}${cleanBase}${endpoint.path}`;
+		for (const [key, val] of Object.entries(pathParams)) url = url.replace(`{${key}}`, encodeURIComponent(val));
+		const qp = Object.entries(queryParams).filter(([, v]) => v.trim() !== "");
+		if (qp.length > 0) url += "?" + qp.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&");
+		return url;
+	}, [
+		apiUrl,
+		basePath,
+		endpoint.path,
+		pathParams,
+		queryParams
+	]);
+	const pathParamDefs = endpoint.parameters.filter((p) => p.in === "path");
+	const queryParamDefs = endpoint.parameters.filter((p) => p.in === "query");
+	const hasBody = [
+		"post",
+		"put",
+		"patch"
+	].includes(endpoint.method);
+	const execute = useCallback(async () => {
+		setValidationError(null);
+		if (hasBody && body.trim()) try {
+			JSON.parse(body);
+		} catch (err) {
+			setValidationError(`Invalid JSON: ${err instanceof Error ? err.message : String(err)}`);
+			return;
+		}
+		setLoading(true);
+		setResponse(null);
+		const start = performance.now();
+		try {
+			const headers = { "Content-Type": "application/json" };
+			for (const h of customHeaders) if (h.key.trim()) headers[h.key.trim()] = h.value;
+			if (authMode === "jwt") {
+				const token = await getAuthToken();
+				if (token) headers["Authorization"] = `Bearer ${token}`;
+				if (selectedUser && selectedUser.uid !== currentUser?.uid) headers["x-rebase-impersonate"] = selectedUser.uid;
+			}
+			const res = await fetch(resolvedUrl, {
+				method: endpoint.method.toUpperCase(),
+				headers,
+				body: hasBody && body.trim() ? body : void 0
+			});
+			const elapsed = Math.round(performance.now() - start);
+			let text;
+			const rawText = await res.text();
+			try {
+				const json = JSON.parse(rawText);
+				text = JSON.stringify(json, null, 2);
+			} catch {
+				text = rawText;
+			}
+			setResponse({
+				status: res.status,
+				statusText: res.statusText,
+				body: text,
+				time: elapsed
+			});
+		} catch (err) {
+			setResponse({
+				status: 0,
+				statusText: "Network Error",
+				body: err instanceof Error ? err.message : "Request failed",
+				time: Math.round(performance.now() - start)
+			});
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		resolvedUrl,
+		endpoint.method,
+		hasBody,
+		body,
+		authMode,
+		getAuthToken,
+		customHeaders,
+		selectedUser,
+		currentUser?.uid
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col h-full",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "p-5 space-y-5 overflow-y-auto flex-1",
+			children: [
+				/* @__PURE__ */ jsx(AuthSimulationSelector, {
+					authMode,
+					setAuthMode,
+					selectedUser,
+					setSelectedUser,
+					users,
+					loading: false,
+					currentUser: currentSelectableUser
+				}),
+				pathParamDefs.length > 0 && /* @__PURE__ */ jsx(ParamSection, {
+					title: "Path Parameters",
+					params: pathParamDefs,
+					values: pathParams,
+					onChange: (k, v) => setPathParams((prev) => ({
+						...prev,
+						[k]: v
+					}))
+				}),
+				queryParamDefs.length > 0 && /* @__PURE__ */ jsx(ParamSection, {
+					title: "Query Parameters",
+					params: queryParamDefs,
+					values: queryParams,
+					onChange: (k, v) => setQueryParams((prev) => ({
+						...prev,
+						[k]: v
+					}))
+				}),
+				/* @__PURE__ */ jsx(CustomKeyValueSection, {
+					title: "Custom Headers",
+					values: customHeaders,
+					onChange: (i, k, v) => {
+						const next = [...customHeaders];
+						next[i] = {
+							key: k,
+							value: v
+						};
+						setCustomHeaders(next);
+					},
+					onAdd: () => setCustomHeaders((prev) => [...prev, {
+						key: "",
+						value: ""
+					}]),
+					onRemove: (i) => {
+						const next = [...customHeaders];
+						next.splice(i, 1);
+						setCustomHeaders(next);
+					}
+				}),
+				hasBody && /* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						className: "text-text-secondary dark:text-text-secondary-dark text-xs font-semibold uppercase tracking-wider mb-2 block",
+						children: "Request Body"
+					}),
+					/* @__PURE__ */ jsx(TextField, {
+						multiline: true,
+						minRows: 10,
+						value: body,
+						onChange: (e) => {
+							setBody(e.target.value);
+							setValidationError(null);
+						},
+						spellCheck: false,
+						error: !!validationError,
+						className: "w-full",
+						inputClassName: "font-mono text-xs p-3 resize-y"
+					}),
+					validationError && /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						className: "text-red-500 mt-1 block text-xs",
+						children: validationError
+					})
+				] }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "rounded-lg bg-surface-100 dark:bg-surface-900 p-3",
+					children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						className: "text-text-secondary dark:text-text-secondary-dark text-[10px] uppercase tracking-wider block mb-1",
+						children: "Request URL"
+					}), /* @__PURE__ */ jsx("code", {
+						className: "text-xs font-mono text-text-primary dark:text-text-primary-dark break-all",
+						children: resolvedUrl
+					})]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "filled",
+					onClick: execute,
+					disabled: loading,
+					className: "w-full",
+					children: loading ? /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(LoaderIcon, {
+							size: iconSize.small,
+							className: "animate-spin"
+						}), "Sending…"]
+					}) : /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(SendIcon, { size: iconSize.small }), "Send Request"]
+					})
+				}),
+				response && /* @__PURE__ */ jsxs("div", {
+					className: cls("rounded-lg border overflow-hidden", defaultBorderMixin),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cls("flex items-center justify-between px-4 py-2.5", "bg-surface-50 dark:bg-surface-900/50"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ jsx(ResponseBadge, { status: response.status }), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-text-secondary dark:text-text-secondary-dark text-xs",
+								children: response.statusText
+							})]
+						}), /* @__PURE__ */ jsxs(Typography, {
+							variant: "caption",
+							className: "text-text-secondary dark:text-text-secondary-dark text-xs font-mono",
+							children: [response.time, "ms"]
+						})]
+					}), /* @__PURE__ */ jsx("pre", {
+						className: cls("p-4 text-xs font-mono overflow-auto max-h-96", "bg-surface-950 text-emerald-400", "dark:bg-surface-900 dark:text-emerald-400"),
+						children: response.body
+					})]
+				})
+			]
+		})
+	});
+}
+function ParamSection({ title, params, values, onChange }) {
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Typography, {
+		variant: "caption",
+		className: "text-text-secondary dark:text-text-secondary-dark text-xs font-semibold uppercase tracking-wider mb-2 block",
+		children: title
+	}), /* @__PURE__ */ jsx("div", {
+		className: "space-y-2",
+		children: params.map((p) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ jsxs("label", {
+				className: "w-32 shrink-0",
+				children: [/* @__PURE__ */ jsx("code", {
+					className: "text-xs font-mono font-semibold",
+					children: p.name
+				}), p.required && /* @__PURE__ */ jsx("span", {
+					className: "text-red-500 ml-0.5 text-xs",
+					children: "*"
+				})]
+			}), /* @__PURE__ */ jsx(TextField, {
+				size: "small",
+				placeholder: p.description ?? p.name,
+				value: values[p.name] ?? "",
+				onChange: (e) => onChange(p.name, e.target.value),
+				className: "flex-1",
+				inputClassName: "font-mono text-xs"
+			})]
+		}, p.name))
+	})] });
+}
+function CustomKeyValueSection({ title, values, onChange, onAdd, onRemove }) {
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between mb-2",
+		children: [/* @__PURE__ */ jsx(Typography, {
+			variant: "caption",
+			className: "text-text-secondary dark:text-text-secondary-dark text-xs font-semibold uppercase tracking-wider block",
+			children: title
+		}), /* @__PURE__ */ jsxs(Button, {
+			variant: "text",
+			size: "small",
+			color: "primary",
+			onClick: onAdd,
+			className: "text-xs p-0 min-h-0",
+			children: [/* @__PURE__ */ jsx(PlusIcon, {
+				size: iconSize.small,
+				className: "mr-1"
+			}), " Add Header"]
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [values.map((v, i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx(TextField, {
+					size: "small",
+					placeholder: "Header name",
+					value: v.key,
+					onChange: (e) => onChange(i, e.target.value, v.value),
+					className: "w-1/3",
+					inputClassName: "font-mono text-xs"
+				}),
+				/* @__PURE__ */ jsx(TextField, {
+					size: "small",
+					placeholder: "Value",
+					value: v.value,
+					onChange: (e) => onChange(i, v.key, e.target.value),
+					className: "flex-1",
+					inputClassName: "font-mono text-xs"
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					size: "small",
+					onClick: () => onRemove(i),
+					className: "text-text-secondary hover:text-red-500 shrink-0",
+					title: "Remove",
+					children: /* @__PURE__ */ jsx(XIcon, { size: iconSize.small })
+				})
+			]
+		}, i)), values.length === 0 && /* @__PURE__ */ jsx(Typography, {
+			variant: "caption",
+			className: "text-text-secondary/50 italic text-xs",
+			children: "No custom headers added."
+		})]
+	})] });
+}
+function ResponseBadge({ status }) {
+	let colorClass = "text-red-500";
+	if (status >= 200 && status < 300) colorClass = "text-emerald-500";
+	else if (status >= 300 && status < 400) colorClass = "text-blue-500";
+	else if (status >= 400 && status < 500) colorClass = "text-amber-500";
+	return /* @__PURE__ */ jsx("span", {
+		className: cls("text-xs font-bold font-mono", colorClass),
+		children: status || "ERR"
+	});
+}
+function buildBodyTemplate(endpoint) {
+	if (!endpoint.requestBody?.content) return "{\n  \n}";
+	const json = endpoint.requestBody.content["application/json"];
+	if (!json?.schema?.properties) return "{\n  \n}";
+	const props = json.schema.properties;
+	const lines = ["{"];
+	const keys = Object.keys(props);
+	keys.forEach((key, i) => {
+		const prop = props[key];
+		if (prop.readOnly) return;
+		const comma = i < keys.length - 1 ? "," : "";
+		const val = defaultValue(prop);
+		lines.push(`  "${key}": ${val}${comma}`);
+	});
+	lines.push("}");
+	return lines.join("\n");
+}
+function defaultValue(schema) {
+	if (schema.enum) return JSON.stringify(schema.enum[0]);
+	switch (schema.type) {
+		case "string": return schema.format === "date-time" ? `"${(/* @__PURE__ */ new Date()).toISOString()}"` : "\"\"";
+		case "number":
+		case "integer": return "0";
+		case "boolean": return "false";
+		case "array": return "[]";
+		default: return "null";
+	}
+}
+//#endregion
+//#region src/components/ApiExplorer/ApiExplorer.tsx
+/**
+* Custom-built API Explorer for Rebase Studio.
+* No external dependencies — renders the OpenAPI spec natively
+* with deep integration into the Rebase auth system.
+*/
+function ApiExplorer() {
+	const apiConfig = useApiConfig();
+	const authController = useAuthController();
+	const apiUrl = apiConfig?.apiUrl;
+	const [spec, setSpec] = useState(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [selectedEndpoint, setSelectedEndpoint] = useState(null);
+	const [sidebarFilter, setSidebarFilter] = useState("");
+	const [tryItOpen, setTryItOpen] = useState(false);
+	useEffect(() => {
+		if (!apiUrl) return;
+		let cancelled = false;
+		const specUrl = `${apiUrl.replace(/\/+$/, "")}/api/docs`;
+		(async () => {
+			try {
+				const res = await fetch(specUrl);
+				if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+				const data = await res.json();
+				if (!cancelled) {
+					setSpec(data);
+					setLoading(false);
+				}
+			} catch (err) {
+				if (!cancelled) {
+					setError(err instanceof Error ? err.message : "Failed to load API spec");
+					setLoading(false);
+				}
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [apiUrl]);
+	const { groups, allEndpoints } = useMemo(() => {
+		if (!spec) return {
+			groups: [],
+			allEndpoints: []
+		};
+		return parseOpenApiSpec(spec);
+	}, [spec]);
+	const filteredGroups = useMemo(() => {
+		if (!sidebarFilter.trim()) return groups;
+		const q = sidebarFilter.toLowerCase();
+		return groups.map((g) => ({
+			...g,
+			endpoints: g.endpoints.filter((e) => e.path.toLowerCase().includes(q) || e.summary.toLowerCase().includes(q) || e.method.toLowerCase().includes(q))
+		})).filter((g) => g.endpoints.length > 0);
+	}, [groups, sidebarFilter]);
+	useEffect(() => {
+		if (!selectedEndpoint && allEndpoints.length > 0) setSelectedEndpoint(allEndpoints[0]);
+	}, [allEndpoints, selectedEndpoint]);
+	if (!apiUrl) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center h-full w-full p-8",
+		children: /* @__PURE__ */ jsx(Alert, {
+			color: "warning",
+			children: /* @__PURE__ */ jsxs(Typography, {
+				variant: "body2",
+				children: [
+					"No API URL configured. Ensure your app provides an",
+					" ",
+					/* @__PURE__ */ jsx("code", {
+						className: "font-mono text-xs",
+						children: "apiUrl"
+					}),
+					"."
+				]
+			})
+		})
+	});
+	if (loading) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center h-full w-full gap-4",
+		children: [/* @__PURE__ */ jsx(CircularProgress, { size: "medium" }), /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			className: "text-text-secondary dark:text-text-secondary-dark animate-pulse",
+			children: "Loading API specification…"
+		})]
+	});
+	if (error || !spec) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center h-full w-full p-8",
+		children: /* @__PURE__ */ jsx(Alert, {
+			color: "error",
+			children: /* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				children: error ?? "Unknown error"
+			})
+		})
+	});
+	const METHOD_COLORS = {
+		get: "text-blue-600 dark:text-blue-400",
+		post: "text-emerald-600 dark:text-emerald-400",
+		put: "text-amber-600 dark:text-amber-400",
+		patch: "text-orange-600 dark:text-orange-400",
+		delete: "text-red-600 dark:text-red-400"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full w-full overflow-hidden",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cls("w-72 min-w-[272px] flex flex-col h-full overflow-hidden border-r", defaultBorderMixin, "bg-surface-50 dark:bg-surface-900"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "p-4 space-y-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(BookOpenIcon, {
+							size: iconSize.medium,
+							className: "text-primary dark:text-primary-dark"
+						}), /* @__PURE__ */ jsx(Typography, {
+							variant: "subtitle2",
+							className: "font-semibold",
+							children: spec.info?.title ?? "API Reference"
+						})]
+					}),
+					spec.info?.version && /* @__PURE__ */ jsxs(Chip, {
+						size: "smallest",
+						colorScheme: "cyanDarker",
+						children: ["v", spec.info.version]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mb-2",
+						children: /* @__PURE__ */ jsx(SearchBar, {
+							placeholder: "Filter endpoints…",
+							size: "small",
+							onTextSearch: (val) => setSidebarFilter(val ?? "")
+						})
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 overflow-y-auto px-2 pb-4",
+				children: [filteredGroups.map((group) => /* @__PURE__ */ jsxs("div", {
+					className: "mb-3",
+					children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						className: "px-2 py-1.5 text-text-secondary dark:text-text-secondary-dark uppercase tracking-wider font-semibold text-[10px]",
+						children: group.tag
+					}), group.endpoints.map((ep) => {
+						return /* @__PURE__ */ jsxs(Button, {
+							variant: "text",
+							color: "neutral",
+							fullWidth: true,
+							onClick: () => {
+								setSelectedEndpoint(ep);
+								setTryItOpen(false);
+							},
+							className: cls("!justify-between !px-2.5 !py-1.5 !text-left !text-sm", selectedEndpoint?.id === ep.id ? "bg-surface-200 dark:bg-surface-800 font-medium" : "text-text-primary dark:text-text-primary-dark"),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate text-[13px] opacity-90",
+								children: ep.summary || ep.shortPath
+							}), /* @__PURE__ */ jsx("span", {
+								className: cls("text-[10px] font-bold uppercase shrink-0", METHOD_COLORS[ep.method] ?? "text-text-secondary"),
+								children: ep.method
+							})]
+						}, ep.id);
+					})]
+				}, group.tag)), filteredGroups.length === 0 && /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					className: "text-center text-text-secondary dark:text-text-secondary-dark py-8",
+					children: "No endpoints match"
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 flex flex-col h-full overflow-hidden",
+			children: selectedEndpoint ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: cls("flex items-center justify-between px-5 py-3 gap-4 shrink-0 border-b z-10", defaultBorderMixin, "bg-surface-50/80 dark:bg-surface-950/80 backdrop-blur-md sticky top-0"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3 min-w-0",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cls("text-xs font-bold uppercase", METHOD_COLORS[selectedEndpoint.method] ?? ""),
+						children: selectedEndpoint.method
+					}), /* @__PURE__ */ jsx("code", {
+						className: "text-sm font-mono text-text-primary dark:text-text-primary-dark truncate",
+						children: selectedEndpoint.path
+					})]
+				}), /* @__PURE__ */ jsxs(Button, {
+					variant: tryItOpen ? "filled" : "outlined",
+					size: "small",
+					onClick: () => setTryItOpen((v) => !v),
+					children: [/* @__PURE__ */ jsx(PlayIcon, {
+						size: iconSize.small,
+						className: "mr-1"
+					}), "Try It"]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto",
+				children: tryItOpen ? /* @__PURE__ */ jsx(TryItPanel, {
+					endpoint: selectedEndpoint,
+					apiUrl,
+					getAuthToken: apiConfig?.getAuthToken ?? authController.getAuthToken,
+					user: authController.user,
+					basePath: spec?.servers?.[0]?.url || ""
+				}, selectedEndpoint.operationId || selectedEndpoint.path) : /* @__PURE__ */ jsx(EndpointDetail, {
+					endpoint: selectedEndpoint,
+					spec
+				})
+			})] }) : /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center h-full",
+				children: /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					className: "text-text-secondary dark:text-text-secondary-dark",
+					children: "Select an endpoint from the sidebar"
+				})
+			})
+		})]
+	});
+}
+ApiExplorer.displayName = "ApiExplorer";
+//#endregion
+export { ApiExplorer };
+
+//# sourceMappingURL=ApiExplorer-CdIwR9Ga.js.map