@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/openapi/components/EditableParametersTable.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+import { Input } from "../../ui/input";
+import { Label } from "../../ui/label";
+import { Textarea } from "../../ui/textarea";
+import { Switch } from "../../ui/switch";
+import { Badge } from "../../ui/badge";
+let { parameters = [], values = $bindable({}) } = $props();
+const availableTypes = $derived.by(() => {
+	const pathParams = parameters.filter((p) => p.in === "path");
+	const queryParams = parameters.filter((p) => p.in === "query");
+	const headerParams = parameters.filter((p) => p.in === "header");
+	const cookieParams = parameters.filter((p) => p.in === "cookie");
+	const types = [];
+	if (pathParams.length) types.push({
+		key: "path",
+		label: "Path",
+		params: pathParams
+	});
+	if (queryParams.length) types.push({
+		key: "query",
+		label: "Query",
+		params: queryParams
+	});
+	if (headerParams.length) types.push({
+		key: "header",
+		label: "Header",
+		params: headerParams
+	});
+	if (cookieParams.length) types.push({
+		key: "cookie",
+		label: "Cookie",
+		params: cookieParams
+	});
+	return types;
+});
+let activeParamType = $state("path");
+$effect(() => {
+	if (!availableTypes.length) {
+		activeParamType = "path";
+		return;
+	}
+	if (!availableTypes.some((type) => type.key === activeParamType)) {
+		activeParamType = availableTypes[0].key;
+	}
+});
+// Initialize all parameter values upfront
+$effect(() => {
+	for (const param of parameters) {
+		const key = `${param.in}.${param.name}`;
+		if (values[key] === undefined) {
+			values[key] = getParamValue(param);
+		}
+	}
+});
+function getInputType(param) {
+	const schema = param.schema;
+	if (schema?.type === "boolean") return "boolean";
+	if (schema?.type === "integer" || schema?.type === "number") return "number";
+	if (schema?.type === "string" && schema?.format === "password") return "password";
+	if (schema?.type === "string" && (schema?.maxLength || 0) > 100) return "textarea";
+	return "text";
+}
+function getParamValue(param) {
+	const key = `${param.in}.${param.name}`;
+	if (values[key] !== undefined) return values[key] ?? null;
+	// Return default value without mutating state
+	const schema = param.schema;
+	if (schema?.default !== undefined) return schema.default;
+	if (schema?.type === "boolean") return false;
+	if (schema?.type === "integer" || schema?.type === "number") return 0;
+	if (schema?.type === "array") return [];
+	return schema?.example || "";
+}
+/** An array or object value, which the text input shows as JSON. */
+function isJsonContainer(value) {
+	return Array.isArray(value) || value !== null && typeof value === "object";
+}
+function setParamValue(param, value) {
+	const key = `${param.in}.${param.name}`;
+	values[key] = value;
+}
+function getTextValue(param) {
+	const value = values[`${param.in}.${param.name}`];
+	if (isJsonContainer(value)) return JSON.stringify(value);
+	return String(value ?? "");
+}
+</script>
+
+{#if availableTypes.length > 0}
+	{#if availableTypes.length === 1}
+		<div class="space-y-4">
+			<h4 class="mb-3 text-sm font-medium text-foreground/80">
+				{availableTypes[0].label} Parameters
+			</h4>
+			{#each availableTypes[0].params as param, i (i)}
+				<div class="grid grid-cols-4 items-start gap-4">
+					<div class="space-y-1">
+						<Label class="flex items-center gap-2 text-sm font-medium">
+							{param.name}
+							{#if param.required}
+								<Badge variant="destructive" class="px-1 py-0 text-xs">required</Badge>
+							{/if}
+						</Label>
+						{#if param.description}
+							<p class="text-xs text-muted-foreground">{param.description}</p>
+						{/if}
+					</div>
+					<div class="col-span-3">
+						{#if getInputType(param) === 'boolean'}
+							<Switch
+								checked={Boolean(values[`${param.in}.${param.name}`])}
+								onCheckedChange={(checked) => setParamValue(param, checked)}
+							/>
+						{:else if getInputType(param) === 'textarea'}
+							<Textarea
+								value={String(values[`${param.in}.${param.name}`] ?? '')}
+								oninput={(e) => setParamValue(param, (e.target as HTMLTextAreaElement).value)}
+								placeholder={String(param.schema?.example ?? `Enter ${param.name}`)}
+								class="min-h-[80px]"
+							/>
+						{:else}
+							<Input
+								type={getInputType(param)}
+								value={String(values[`${param.in}.${param.name}`] ?? '')}
+								oninput={(e) =>
+									setParamValue(
+										param,
+										getInputType(param) === 'number'
+											? Number((e.target as HTMLInputElement).value) || 0
+											: (e.target as HTMLInputElement).value
+									)}
+								placeholder={String(param.schema?.example ?? `Enter ${param.name}`)}
+								required={param.required}
+							/>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<Tabs bind:value={activeParamType} class="w-full">
+			<TabsList
+				class="grid w-full"
+				style="grid-template-columns: repeat({availableTypes.length}, 1fr)"
+			>
+				{#each availableTypes as type, i (i)}
+					<TabsTrigger value={type.key}>{type.label}</TabsTrigger>
+				{/each}
+			</TabsList>
+			{#each availableTypes as type, i (i)}
+				<TabsContent value={type.key} class="mt-4">
+					<div class="space-y-4">
+						{#each type.params as param, i (i)}
+							<div class="grid grid-cols-4 items-start gap-4">
+								<div class="space-y-1">
+									<Label class="flex items-center gap-2 text-sm font-medium">
+										{param.name}
+										{#if param.required}
+											<Badge variant="destructive" class="px-1 py-0 text-xs">required</Badge>
+										{/if}
+									</Label>
+									{#if param.description}
+										<p class="text-xs text-muted-foreground">{param.description}</p>
+									{/if}
+								</div>
+								<div class="col-span-3">
+									{#if getInputType(param) === 'boolean'}
+										<Switch
+											checked={Boolean(values[`${param.in}.${param.name}`])}
+											onCheckedChange={(checked) => setParamValue(param, checked)}
+										/>
+									{:else if getInputType(param) === 'textarea'}
+										<Textarea
+											value={getTextValue(param)}
+											oninput={(e) => setParamValue(param, (e.target as HTMLTextAreaElement).value)}
+											placeholder={String(param.schema?.example ?? `Enter ${param.name}`)}
+											class="min-h-[80px]"
+										/>
+									{:else}
+										<Input
+											type={getInputType(param)}
+											value={getTextValue(param)}
+											oninput={(e) =>
+												setParamValue(
+													param,
+													getInputType(param) === 'number'
+														? Number((e.target as HTMLInputElement).value) || 0
+														: (e.target as HTMLInputElement).value
+												)}
+											placeholder={String(param.schema?.example ?? `Enter ${param.name}`)}
+											required={param.required}
+										/>
+									{/if}
+								</div>
+							</div>
+						{/each}
+					</div>
+				</TabsContent>
+			{/each}
+		</Tabs>
+	{/if}
+{:else}
+	<div class="text-sm text-muted-foreground">No parameters</div>
+{/if}

package/dist/lib/components/openapi/components/EditableParametersTable.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { OpenAPIParameter } from '../types';
+import type { JsonSchemaValue as JsonValue } from '../lib/schemas/json-schema';
+type $$ComponentProps = {
+    parameters?: OpenAPIParameter[];
+    values?: Record<string, JsonValue>;
+};
+declare const EditableParametersTable: import("svelte").Component<$$ComponentProps, {}, "values">;
+type EditableParametersTable = ReturnType<typeof EditableParametersTable>;
+export default EditableParametersTable;

package/dist/lib/components/openapi/components/ExampleViewer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import CodeEditor from "../../code/CodeEditor.svelte";
+import { jsonSchemaToExampleString } from "../lib/schemas/schema-example";
+import { dereferenceSchema } from "../lib/schema-resolve";
+let { schema, components = {}, title = "Example JSON" } = $props();
+// A media type without a schema shows the empty example (`null`).
+const resolved = $derived(schema ? dereferenceSchema(schema, components) : undefined);
+const code = $derived(jsonSchemaToExampleString(resolved));
+</script>
+
+<div class="mt-3">
+	<div class="mb-1 text-xs font-medium text-muted-foreground">{title}</div>
+	<CodeEditor readOnly language="json" {code} minHeight="320px" resizable={true} />
+</div>

package/dist/lib/components/openapi/components/ExampleViewer.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type SchemaComponents } from '../lib/schema-resolve';
+import type { JSONSchema } from '../lib/schemas/json-schema';
+type $$ComponentProps = {
+    schema?: JSONSchema;
+    components?: SchemaComponents;
+    title?: string;
+};
+declare const ExampleViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type ExampleViewer = ReturnType<typeof ExampleViewer>;
+export default ExampleViewer;

package/dist/lib/components/openapi/components/Header.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">import { Badge } from "../../ui/badge";
+let { info, openapiVersion = "3.0.0", specUrl = "/api/docs/openapi.json" } = $props();
+</script>
+
+<div class="mb-8 border-b border-border/20 pb-8">
+	<div class="space-y-4">
+		<h1 class="text-3xl font-semibold text-foreground/95">{info.title}</h1>
+		<div class="flex flex-wrap items-center gap-3">
+			<Badge
+				variant="secondary"
+				class="border-border/20 bg-accent/40 font-normal text-foreground/80">{info.version}</Badge
+			>
+			<Badge
+				variant="secondary"
+				class="border-border/20 bg-accent/40 font-normal text-foreground/80"
+				>OAS {openapiVersion?.split('.')[0] || '3'}</Badge
+			>
+			<a
+				href={specUrl}
+				class="text-sm text-muted-foreground transition-colors hover:text-foreground">{specUrl}</a
+			>
+		</div>
+		{#if info.description}
+			<p class="max-w-4xl text-sm leading-relaxed text-muted-foreground/80">{info.description}</p>
+		{/if}
+	</div>
+</div>

package/dist/lib/components/openapi/components/Header.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { OpenAPIInfo } from '../types';
+type $$ComponentProps = {
+    info: OpenAPIInfo;
+    openapiVersion?: string;
+    specUrl?: string;
+};
+declare const Header: import("svelte").Component<$$ComponentProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/lib/components/openapi/components/OperationCard.svelte

@@ -0,0 +1,364 @@
+<script lang="ts">import { settle, settleNow } from "../../../attempt";
+import { failureClass } from "../../../failure-class";
+import { kitLogger } from "../../../kit-logger";
+import { methodColor } from "../utils";
+import { Card, CardHeader, CardDescription, CardContent } from "../../ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+import ParametersTable from "./ParametersTable.svelte";
+import EditableParametersTable from "./EditableParametersTable.svelte";
+import RequestBodyPanel from "./RequestBodyPanel.svelte";
+import ResponsesTable from "./ResponsesTable.svelte";
+import CodeSamples from "./CodeSamples.svelte";
+import { Button } from "../../ui/button";
+import { Separator } from "../../ui/separator";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../../ui/hover-card";
+import * as Dialog from "../../ui/dialog";
+import CodeEditor from "../../code/CodeEditor.svelte";
+import { jsonSchemaToExample } from "../lib/schemas/schema-example";
+import { Icon } from "../../icon";
+const logger = kitLogger("vibeskit-openapi-operation");
+let { opMeta, serverUrl = "/api", components = {}, spec } = $props();
+let showExamples = $state(false);
+let showRun = $state(false);
+let showSpec = $state(false);
+// Default active tab: Always start with Responses
+let activeTab = $state("responses");
+// Request builder state - now holds actual parameter values
+let paramValues = $state({});
+let pathParamsCode = $state("");
+let queryCode = $state("");
+let headersCode = $state("");
+let bodyCode = $state("");
+let sending = $state(false);
+// Response state for live results
+let lastResponse = $state(null);
+let showResponse = $state(false);
+let respStatus = $state("");
+let respTime = $state(0);
+let respBody = $state("");
+let requestFailed = $state(false);
+function buildDefaults() {
+	const params = opMeta.op.parameters || [];
+	const pathObj = {};
+	const queryObj = {};
+	const headersObj = {};
+	for (const p of params) {
+		const ex = jsonSchemaToExample(p.schema, p.name);
+		if (p.in === "path") pathObj[p.name] = ex;
+		else if (p.in === "query") queryObj[p.name] = ex;
+		else if (p.in === "header") headersObj[p.name] = ex;
+	}
+	pathParamsCode = JSON.stringify(pathObj, null, 2);
+	queryCode = JSON.stringify(queryObj, null, 2);
+	headersCode = JSON.stringify(headersObj, null, 2);
+	const bodySchema = opMeta.op.requestBody?.content?.["application/json"]?.schema;
+	bodyCode = bodySchema ? JSON.stringify(jsonSchemaToExample(bodySchema), null, 2) : "{}";
+}
+$effect(() => {
+	if (showRun) buildDefaults();
+});
+function buildUrlFromParams() {
+	let path = opMeta.path;
+	const queryParams = new URLSearchParams();
+	// Replace path parameters
+	for (const [key, value] of Object.entries(paramValues)) {
+		const [type, name] = key.split(".");
+		if (type === "path" && value) {
+			path = path.replace(`{${name}}`, encodeURIComponent(String(value)));
+		} else if (type === "query" && value) {
+			queryParams.set(name, String(value));
+		}
+	}
+	const queryString = queryParams.toString();
+	return serverUrl + path + (queryString ? `?${queryString}` : "");
+}
+function buildRequestHeaders() {
+	const headers = new Headers({ "Content-Type": "application/json" });
+	// Add header parameters (names are case-insensitive: a parameter replaces the default)
+	for (const [key, value] of Object.entries(paramValues)) {
+		const [type, name] = key.split(".");
+		if (type === "header" && value) {
+			headers.set(name, String(value));
+		}
+	}
+	return headers;
+}
+function renderUrlPreview() {
+	return settleNow(() => {
+		const pp = JSON.parse(pathParamsCode || "{}");
+		let path = opMeta.path;
+		for (const [k, v] of Object.entries(pp)) {
+			path = path.replace(new RegExp(`{${k}}`, "g"), encodeURIComponent(String(v)));
+		}
+		const q = JSON.parse(queryCode || "{}");
+		const qs = Object.entries(q).filter(([, v]) => v !== undefined && v !== null && v !== "").map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`).join("&");
+		return `${serverUrl}${path}${qs ? `?${qs}` : ""}`;
+	});
+}
+const urlPreview = $derived.by(renderUrlPreview);
+async function sendRequest() {
+	sending = true;
+	const start = performance.now();
+	const completed = await settle(async () => {
+		const url = buildUrlFromParams();
+		const headers = buildRequestHeaders();
+		const init = {
+			method: opMeta.method.toUpperCase(),
+			headers,
+			credentials: "include"
+		};
+		if ([
+			"POST",
+			"PUT",
+			"PATCH"
+		].includes(init.method)) {
+			const bodyObj = JSON.parse(bodyCode || "{}");
+			init.body = JSON.stringify(bodyObj);
+		}
+		const r = await fetch(url, init);
+		const status = `${r.status} ${r.statusText}`;
+		const txt = await r.text();
+		const parsedBody = settleNow(() => JSON.parse(txt));
+		const body = parsedBody.ok ? JSON.stringify(parsedBody.value, null, 2) : txt;
+		return {
+			status,
+			time: Math.round(performance.now() - start),
+			body
+		};
+	});
+	const result = completed.ok ? completed.value : {
+		status: "Request error",
+		time: Math.round(performance.now() - start),
+		body: "The request could not be completed. Try again."
+	};
+	if (!completed.ok) {
+		logger.warn("OpenAPI request failed", { reason: failureClass(completed.error) });
+	}
+	const endpointKey = `${opMeta.method}:${opMeta.path}`;
+	requestFailed = !completed.ok;
+	lastResponse = {
+		...result,
+		endpoint: endpointKey
+	};
+	respStatus = result.status;
+	respBody = result.body;
+	respTime = result.time;
+	sending = false;
+	showRun = false;
+	showResponse = true;
+}
+const specFragment = $derived.by(() => {
+	if (!spec || Object.keys(spec).length === 0) {
+		return JSON.stringify({ error: "OpenAPI specification not available" }, null, 2);
+	}
+	const serialized = settleNow(() => JSON.stringify(spec, null, 2));
+	if (serialized.ok && serialized.value) return serialized.value;
+	if (!serialized.ok) {
+		logger.warn("OpenAPI specification serialization failed", { reason: failureClass(serialized.error) });
+	}
+	return JSON.stringify({ error: "Failed to serialize OpenAPI specification" }, null, 2);
+});
+</script>
+
+<div class="flex flex-col gap-4 md:flex-row">
+	<!-- Left: Endpoint heading + overview -->
+	<div class="flex shrink-0 basis-full flex-col items-start md:max-w-[420px] md:basis-1/3">
+		<Card class="w-full rounded-lg border border-border/60 bg-muted/40 shadow-sm">
+			<CardHeader class="p-4">
+				<div class="flex items-center gap-3">
+					<HoverCard>
+						<HoverCardTrigger>
+							<span
+								class={`rounded-md px-2 py-1 text-xs font-semibold text-white ${methodColor(opMeta.method)}`}
+								>{opMeta.method.toUpperCase()}</span
+							>
+						</HoverCardTrigger>
+						<HoverCardContent class="max-w-xs text-xs">
+							<div class="space-y-1">
+								<div>
+									<span class="font-medium">Auth:</span>
+									{opMeta.op?.security ? 'Required' : 'Public'}
+								</div>
+								{#if opMeta.op?.description}
+									<div class="text-muted-foreground">{opMeta.op.description}</div>
+								{/if}
+							</div>
+						</HoverCardContent>
+					</HoverCard>
+					<code class="font-mono text-sm break-all text-foreground">{opMeta.path}</code>
+				</div>
+				{#if opMeta.op.summary || opMeta.op.description}
+					<CardDescription class="mt-2 leading-relaxed"
+						>{opMeta.op.summary || opMeta.op.description}</CardDescription
+					>
+				{/if}
+
+				<!-- Action buttons -->
+				<div class="mt-4 flex flex-col gap-2">
+					<Button
+						variant="default"
+						size="sm"
+						onclick={() => (showRun = true)}
+						class="justify-start"
+					>
+						<Icon icon="lucide:play" class="mr-2 h-4 w-4" />
+						Try It
+					</Button>
+					<Button
+						variant="outline"
+						size="sm"
+						onclick={() => (showExamples = !showExamples)}
+						class="justify-start"
+					>
+						<Icon icon="lucide:code" class="mr-2 h-4 w-4" />
+						Get Code
+					</Button>
+					<Button variant="ghost" size="sm" onclick={() => (showSpec = true)} class="justify-start">
+						<Icon icon="lucide:file-text" class="mr-2 h-4 w-4" />
+						Show Spec
+					</Button>
+				</div>
+			</CardHeader>
+		</Card>
+	</div>
+
+	<!-- Right: Full-width Tabs and content -->
+	<div class="min-w-0 flex-1">
+		<Tabs bind:value={activeTab} class="w-full">
+			<TabsList class="grid w-full grid-cols-3">
+				<TabsTrigger value="params">Parameters</TabsTrigger>
+				<TabsTrigger value="body">Body</TabsTrigger>
+				<TabsTrigger value="responses">Responses</TabsTrigger>
+			</TabsList>
+			<TabsContent value="params" class="my-2 px-4">
+				<EditableParametersTable
+					parameters={opMeta.op.parameters || []}
+					bind:values={paramValues}
+				/>
+			</TabsContent>
+			<TabsContent value="body" class="my-2 px-4">
+				<RequestBodyPanel requestBody={opMeta.op.requestBody} {components} />
+			</TabsContent>
+			<TabsContent value="responses" class="my-2 px-4">
+				<ResponsesTable
+					responses={opMeta.op.responses || {}}
+					{components}
+					{lastResponse}
+					currentEndpoint="{opMeta.method}:{opMeta.path}"
+				/>
+			</TabsContent>
+		</Tabs>
+
+		{#if showExamples}
+			<div class="mt-6">
+				<CodeSamples {opMeta} {serverUrl} />
+			</div>
+		{/if}
+	</div>
+</div>
+
+<!-- Run Request Dialog -->
+<Dialog.Root bind:open={showRun}>
+	<Dialog.Content
+		class="flex h-[95vh] max-h-[95vh] w-[95vw] max-w-[95vw] flex-col"
+		style="max-width: 95vw; width: 95vw;"
+	>
+		<Dialog.Header>
+			<Dialog.Title>Run {opMeta.method.toUpperCase()} {opMeta.path}</Dialog.Title>
+			<Dialog.Description>Build a request and send it to {serverUrl}.</Dialog.Description>
+		</Dialog.Header>
+		<div class="flex flex-1 flex-col space-y-3 overflow-auto pr-1">
+			<div class="text-xs text-muted-foreground">URL Preview</div>
+			<div class="rounded-md border border-border bg-muted/40 px-3 py-2 font-mono text-sm">
+				{urlPreview.ok ? urlPreview.value : `${serverUrl}${opMeta.path}`}
+			</div>
+			{#if !urlPreview.ok}
+				<p role="alert" class="text-sm text-destructive">
+					Path and query parameters must be valid JSON.
+				</p>
+			{/if}
+			<div>
+				<div class="mb-1 text-xs font-medium text-muted-foreground">Path Params</div>
+				<div class="h-24">
+					<CodeEditor language="json" bind:code={pathParamsCode} minHeight="96px" />
+				</div>
+			</div>
+			<div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
+				<div>
+					<div class="mb-1 text-xs font-medium text-muted-foreground">Query</div>
+					<div class="h-32">
+						<CodeEditor language="json" bind:code={queryCode} minHeight="128px" />
+					</div>
+				</div>
+				<div>
+					<div class="mb-1 text-xs font-medium text-muted-foreground">Headers</div>
+					<div class="h-32">
+						<CodeEditor language="json" bind:code={headersCode} minHeight="128px" />
+					</div>
+				</div>
+			</div>
+			<div class="flex min-h-0 flex-1 flex-col">
+				<div class="mb-1 text-xs font-medium text-muted-foreground">
+					Body {#if !['post', 'put', 'patch'].includes(opMeta.method)}<span
+							class="text-muted-foreground/60"
+							>(not applicable for {opMeta.method.toUpperCase()})</span
+						>{/if}
+				</div>
+				<div class="flex-1">
+					<CodeEditor
+						language="json"
+						bind:code={bodyCode}
+						readOnly={!['post', 'put', 'patch'].includes(opMeta.method)}
+					/>
+				</div>
+			</div>
+		</div>
+		<Dialog.Footer class="gap-2">
+			<Button variant="ghost" onclick={() => (showRun = false)} disabled={sending}>Close</Button>
+			<Button variant="default" onclick={sendRequest} disabled={sending}
+				>{sending ? 'Sending…' : 'Send Request'}</Button
+			>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Response Dialog -->
+<Dialog.Root bind:open={showResponse}>
+	<Dialog.Content class="flex max-h-[90vh] flex-col sm:max-w-2xl">
+		<Dialog.Header>
+			<Dialog.Title>Response {respStatus}</Dialog.Title>
+			<Dialog.Description>{respTime} ms</Dialog.Description>
+		</Dialog.Header>
+		{#if requestFailed}
+			<p role="alert" class="text-sm text-destructive">
+				The request could not be completed. Try again.
+			</p>
+		{/if}
+		<CodeEditor readOnly language="json" minHeight="260px" code={respBody} />
+		<Dialog.Footer>
+			<Dialog.Close>
+				{#snippet child({ props })}
+					<Button variant="default" {...props}>Dismiss</Button>
+				{/snippet}
+			</Dialog.Close>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- OpenAPI Spec Dialog -->
+<Dialog.Root bind:open={showSpec}>
+	<Dialog.Content class="flex max-h-[90vh] flex-col sm:max-w-4xl">
+		<Dialog.Header>
+			<Dialog.Title>OpenAPI Specification</Dialog.Title>
+			<Dialog.Description>Complete API specification document</Dialog.Description>
+		</Dialog.Header>
+		<CodeEditor readOnly language="json" minHeight="400px" code={specFragment} />
+		<Dialog.Footer>
+			<Dialog.Close>
+				{#snippet child({ props })}
+					<Button variant="default" {...props}>Close</Button>
+				{/snippet}
+			</Dialog.Close>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/lib/components/openapi/components/OperationCard.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { OpenAPISpec, OperationMeta, SchemaComponents } from '../types';
+type $$ComponentProps = {
+    opMeta: OperationMeta;
+    serverUrl?: string;
+    components?: SchemaComponents;
+    spec?: OpenAPISpec;
+};
+declare const OperationCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type OperationCard = ReturnType<typeof OperationCard>;
+export default OperationCard;