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

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

@@ -0,0 +1,88 @@
+<script lang="ts">import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+import SchemaViewer from "./SchemaViewer.svelte";
+let { parameters = [] } = $props();
+function buildGroup(_name, params) {
+	const props = {};
+	const req = [];
+	for (const p of params) {
+		props[p.name] = p.schema || {
+			type: "string",
+			description: p.description
+		};
+		if (p.required) req.push(p.name);
+	}
+	if (Object.keys(props).length === 0) return undefined;
+	const out = {
+		type: "object",
+		properties: props
+	};
+	if (req.length) out.required = req;
+	return out;
+}
+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 pathSchema = buildGroup("path", pathParams);
+	const querySchema = buildGroup("query", queryParams);
+	const headerSchema = buildGroup("header", headerParams);
+	const cookieSchema = buildGroup("cookie", cookieParams);
+	const types = [];
+	if (pathParams.length) types.push({
+		key: "path",
+		label: "Path",
+		schema: pathSchema
+	});
+	if (queryParams.length) types.push({
+		key: "query",
+		label: "Query",
+		schema: querySchema
+	});
+	if (headerParams.length) types.push({
+		key: "header",
+		label: "Header",
+		schema: headerSchema
+	});
+	if (cookieParams.length) types.push({
+		key: "cookie",
+		label: "Cookie",
+		schema: cookieSchema
+	});
+	return types;
+});
+let activeParamType = $state("path");
+$effect(() => {
+	if (!availableTypes.length) {
+		activeParamType = "path";
+		return;
+	}
+	if (!availableTypes.some((type) => type.key === activeParamType)) {
+		activeParamType = availableTypes[0].key;
+	}
+});
+</script>
+
+{#if availableTypes.length > 0}
+	{#if availableTypes.length === 1}
+		<SchemaViewer schema={availableTypes[0].schema} title={availableTypes[0].label} />
+	{: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}>
+					<SchemaViewer schema={type.schema} title={type.label} />
+				</TabsContent>
+			{/each}
+		</Tabs>
+	{/if}
+{:else}
+	<div class="text-sm text-muted-foreground">No parameters</div>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { OpenAPIParameter } from '../types';
+type $$ComponentProps = {
+    parameters?: OpenAPIParameter[];
+};
+declare const ParametersTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type ParametersTable = ReturnType<typeof ParametersTable>;
+export default ParametersTable;

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

@@ -0,0 +1,53 @@
+<script lang="ts">import { Label } from "../../ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../../ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+import SchemaViewer from "./SchemaViewer.svelte";
+import ExampleViewer from "./ExampleViewer.svelte";
+let { requestBody, components = {} } = $props();
+let mediaType = $state("");
+let activeTab = $state("example");
+$effect(() => {
+	const first = requestBody?.content ? Object.keys(requestBody.content)[0] : "";
+	if (first) mediaType = first;
+});
+</script>
+
+{#if requestBody?.content}
+	<div class="space-y-4">
+		<div>
+			<Label>Media type</Label>
+			<Select type="single" bind:value={mediaType}>
+				<SelectTrigger class="mt-2">{mediaType || 'Select media type'}</SelectTrigger>
+				<SelectContent>
+					{#each Object.keys(requestBody.content) as opt (opt)}
+						<SelectItem value={opt}>{opt}</SelectItem>
+					{/each}
+				</SelectContent>
+			</Select>
+		</div>
+
+		{#if requestBody.content[mediaType]?.schema}
+			<Tabs bind:value={activeTab} class="w-full">
+				<TabsList class="grid w-full grid-cols-2">
+					<TabsTrigger value="example">Example</TabsTrigger>
+					<TabsTrigger value="schema">Schema</TabsTrigger>
+				</TabsList>
+				<TabsContent value="example">
+					<ExampleViewer
+						schema={requestBody.content[mediaType]?.schema}
+						{components}
+						title="Example Value"
+					/>
+				</TabsContent>
+				<TabsContent value="schema">
+					<SchemaViewer
+						schema={requestBody.content[mediaType]?.schema}
+						title="Request JSON Schema"
+					/>
+				</TabsContent>
+			</Tabs>
+		{/if}
+	</div>
+{:else}
+	<div class="text-sm text-muted-foreground">No request body</div>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { OpenAPIRequestBody, SchemaComponents } from '../types';
+type $$ComponentProps = {
+    requestBody?: OpenAPIRequestBody;
+    components?: SchemaComponents;
+};
+declare const RequestBodyPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type RequestBodyPanel = ReturnType<typeof RequestBodyPanel>;
+export default RequestBodyPanel;

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

@@ -0,0 +1,108 @@
+<script lang="ts">import ExampleViewer from "./ExampleViewer.svelte";
+import SchemaViewer from "./SchemaViewer.svelte";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../ui/accordion";
+import { Card, CardContent } from "../../ui/card";
+let { responses = {}, components = {}, lastResponse = null, currentEndpoint = "" } = $props();
+const codes = $derived(Object.keys(responses));
+function statusColor(code, isActive = false) {
+	const baseColor = code.startsWith("2") ? "emerald" : code.startsWith("4") ? "amber" : code.startsWith("5") ? "rose" : "slate";
+	return isActive ? `bg-${baseColor}-700 ring-2 ring-${baseColor}-400` : `bg-${baseColor}-600`;
+}
+// Check if we have a response for this endpoint and extract status code
+const hasActiveResponse = $derived(lastResponse && lastResponse.endpoint === currentEndpoint);
+const responseStatusCode = $derived.by(() => {
+	if (!hasActiveResponse) return null;
+	const match = lastResponse?.status.match(/^(\d+)/);
+	return match ? match[1] : null;
+});
+const defaultOpen = $derived.by(() => {
+	if (responseStatusCode && codes.includes(responseStatusCode)) {
+		return responseStatusCode;
+	}
+	return codes.includes("200") ? "200" : codes[0];
+});
+let open = $state(undefined);
+// Keep open in sync: prefer user choice; fall back to default when undefined or invalid
+$effect(() => {
+	if (!open || !codes.includes(String(open))) open = defaultOpen;
+});
+</script>
+
+{#if codes.length}
+	<Accordion type="single" bind:value={open} class="rounded-[var(--radius)] border border-border">
+		{#each Object.entries(responses) as [code, resp] (code)}
+			<AccordionItem value={code} class="px-2">
+				<AccordionTrigger class="px-2 py-2">
+					<div class="flex items-center gap-4">
+						<span
+							class={`rounded-md px-2 py-0.5 text-xs font-semibold text-white ${statusColor(code, responseStatusCode === code)}`}
+						>
+							{code}
+						</span>
+						<span class="text-sm text-foreground/90">{resp?.description}</span>
+						{#if responseStatusCode === code && hasActiveResponse}
+							<span class="text-xs font-medium text-green-600"
+								>• Live Response ({lastResponse?.time}ms)</span
+							>
+						{/if}
+					</div>
+				</AccordionTrigger>
+				<AccordionContent class="px-2">
+					{#if resp?.content}
+						<div class="mt-1 text-xs text-muted-foreground">
+							Media types: {Object.keys(resp.content).join(', ')}
+						</div>
+						{#if resp.content['application/json']?.schema}
+							<Card class="mt-3 rounded-md border border-border bg-card/80 shadow-sm">
+								<CardContent class="px-4 py-0">
+									<Tabs value="example" class="w-full">
+										<TabsList class="grid w-full grid-cols-2">
+											<TabsTrigger value="example">
+												{#if responseStatusCode === code && hasActiveResponse}
+													Result
+												{:else}
+													Example
+												{/if}
+											</TabsTrigger>
+											<TabsTrigger value="schema">Schema</TabsTrigger>
+										</TabsList>
+										<TabsContent value="example">
+											{#if responseStatusCode === code && hasActiveResponse}
+												<div class="rounded-md border border-border bg-muted/20 p-4">
+													<div class="mb-2 text-xs font-medium text-foreground/80">
+														Live Response ({lastResponse?.time}ms)
+													</div>
+													<pre
+														class="font-mono text-sm break-words whitespace-pre-wrap text-foreground">{lastResponse?.body}</pre>
+												</div>
+											{:else}
+												<ExampleViewer
+													schema={resp.content['application/json'].schema}
+													{components}
+													title="Example Value"
+												/>
+											{/if}
+										</TabsContent>
+										<TabsContent value="schema">
+											<SchemaViewer
+												schema={resp.content['application/json'].schema}
+												title="Response JSON Schema"
+											/>
+										</TabsContent>
+									</Tabs>
+								</CardContent>
+							</Card>
+						{/if}
+					{:else}
+						<div class="text-sm text-muted-foreground">No content</div>
+					{/if}
+				</AccordionContent>
+			</AccordionItem>
+		{/each}
+	</Accordion>
+{:else}
+	<div class="rounded-[var(--radius)] border border-border p-3 text-sm text-muted-foreground">
+		No responses
+	</div>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { OpenAPIResponse, SchemaComponents } from '../types';
+type $$ComponentProps = {
+    responses?: Record<string, OpenAPIResponse>;
+    components?: SchemaComponents;
+    lastResponse?: {
+        status: string;
+        time: number;
+        body: string;
+        endpoint: string;
+    } | null;
+    currentEndpoint?: string;
+};
+declare const ResponsesTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResponsesTable = ReturnType<typeof ResponsesTable>;
+export default ResponsesTable;

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

@@ -0,0 +1,28 @@
+<script lang="ts">import { dereferenceSchema } from "../lib/schema-resolve";
+import { schemaTypeLabel as typeLabel } from "../lib/schema-label";
+import SchemaRow from "./SchemaRow.svelte";
+let { schema, components = {} } = $props();
+const s = $derived(dereferenceSchema(schema, components));
+function isRequired(obj, key) {
+	return Array.isArray(obj?.required) && obj.required.includes(key);
+}
+const entries = $derived(Object.entries(s?.properties || {}));
+</script>
+
+{#if !s || s.type !== 'object' || !s.properties}
+	<div class="font-mono text-sm text-muted-foreground">{typeLabel(s)}</div>
+{:else}
+	<div class="space-y-1">
+		{#each entries as entry (entry[0])}
+			<SchemaRow
+				name={entry[0]}
+				schema={entry[1]}
+				{components}
+				required={isRequired(s, entry[0])}
+			/>
+		{/each}
+	</div>
+{/if}
+
+<style>
+</style>

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

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

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

@@ -0,0 +1,40 @@
+<script lang="ts">import { dereferenceSchema } from "../lib/schema-resolve";
+import { schemaTypeLabel as typeLabel } from "../lib/schema-label";
+import SchemaNode from "./SchemaNode.svelte";
+let { name, schema, components = {}, required = false } = $props();
+const p = $derived(dereferenceSchema(schema, components));
+</script>
+
+<div class="prop">
+	<div class="row">
+		<span class="name">{name}{required ? '' : '?'}</span>
+		<span class="type">{typeLabel(p)}</span>
+	</div>
+	{#if p?.type === 'array'}
+		<div class="child">
+			<SchemaNode schema={p.items ?? {}} {components} />
+		</div>
+	{:else if p?.type === 'object'}
+		<div class="child">
+			<SchemaNode schema={p} {components} />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.prop {
+		@apply border-l pl-3;
+	}
+	.row {
+		@apply flex items-center gap-2;
+	}
+	.name {
+		@apply font-mono text-sm text-foreground;
+	}
+	.type {
+		@apply font-mono text-xs text-muted-foreground;
+	}
+	.child {
+		@apply mt-1 ml-2;
+	}
+</style>

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

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

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

@@ -0,0 +1,23 @@
+<script lang="ts">import { dereferenceSchema } from "../lib/schema-resolve";
+import { schemaTypeLabel as typeLabel } from "../lib/schema-label";
+import SchemaNode from "./SchemaNode.svelte";
+let { schema, components = {} } = $props();
+const resolved = $derived(dereferenceSchema(schema, components));
+</script>
+
+<div class="rounded-md border border-border">
+	<div class="px-3 py-2 text-xs font-medium text-muted-foreground">Schema</div>
+	<div class="px-3 pb-3">
+		{#if resolved?.type === 'array'}
+			<div class="font-mono text-sm">Array&lt;{typeLabel(resolved.items)}&gt;</div>
+			<div class="mt-2 border-l pl-3">
+				<SchemaNode schema={resolved.items ?? {}} {components} />
+			</div>
+		{:else}
+			<SchemaNode schema={resolved} {components} />
+		{/if}
+	</div>
+</div>
+
+<style>
+</style>

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

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

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

@@ -0,0 +1,9 @@
+<script lang="ts">import CodeEditor from "../../code/CodeEditor.svelte";
+let { schema, language = "json", title = "Schema" } = $props();
+const code = $derived(JSON.stringify(schema ?? {}, null, 2));
+</script>
+
+<div class="mt-3">
+	<div class="mb-1 text-xs font-medium text-muted-foreground">{title}</div>
+	<CodeEditor readOnly {language} {code} minHeight="320px" resizable={true} />
+</div>

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

@@ -0,0 +1,9 @@
+import type { JSONSchema } from '../lib/schemas/json-schema';
+type $$ComponentProps = {
+    schema?: JSONSchema;
+    language?: 'json' | 'typescript' | 'javascript';
+    title?: string;
+};
+declare const SchemaViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type SchemaViewer = ReturnType<typeof SchemaViewer>;
+export default SchemaViewer;

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

@@ -0,0 +1,45 @@
+<script lang="ts">import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../../ui/card";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../../ui/select";
+import { Label } from "../../ui/label";
+import { Button } from "../../ui/button";
+let { servers = [], selected = $bindable(""), onAuthorize = () => {} } = $props();
+$effect(() => {
+	if (!selected) selected = servers[0]?.url || "/api";
+});
+</script>
+
+<Card class="mb-8 border-border/10 bg-card/30">
+	<CardHeader class="pb-4">
+		<CardTitle class="text-lg font-medium text-foreground/90">Servers</CardTitle>
+		<CardDescription class="text-sm text-muted-foreground/70"
+			>Select the API server and authorize if needed.</CardDescription
+		>
+	</CardHeader>
+	<CardContent class="flex flex-wrap items-end gap-4">
+		<div class="min-w-[20rem] flex-1">
+			<Label class="mb-2 block text-sm font-normal text-foreground/80">Server</Label>
+			<Select type="single" bind:value={selected}>
+				<SelectTrigger
+					class="border-border/30 bg-background/30 transition-colors hover:border-border/50"
+				>
+					{selected || 'Select server'}
+				</SelectTrigger>
+				<SelectContent class="border-border/20 bg-background/95 backdrop-blur-md">
+					{#each servers || [{ url: '/api', description: 'API Server' }] as s (s.url)}
+						<SelectItem value={s.url} class="hover:bg-accent/30">
+							{s.url}{#if s.description}
+								— {s.description}{/if}
+						</SelectItem>
+					{/each}
+				</SelectContent>
+			</Select>
+		</div>
+		<Button
+			variant="default"
+			onclick={onAuthorize}
+			class="bg-primary/90 transition-colors hover:bg-primary"
+		>
+			Authorize
+		</Button>
+	</CardContent>
+</Card>

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

@@ -0,0 +1,9 @@
+import type { OpenAPIServer } from '../types';
+type $$ComponentProps = {
+    servers?: OpenAPIServer[];
+    selected?: string;
+    onAuthorize?: () => void;
+};
+declare const ServersToolbar: import("svelte").Component<$$ComponentProps, {}, "selected">;
+type ServersToolbar = ReturnType<typeof ServersToolbar>;
+export default ServersToolbar;

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

@@ -0,0 +1,31 @@
+<script lang="ts">import { AccordionItem, AccordionTrigger, AccordionContent } from "../../ui/accordion";
+import { Badge } from "../../ui/badge";
+import OperationCard from "./OperationCard.svelte";
+let { group, serverUrl = "/api", components = {}, spec } = $props();
+</script>
+
+<AccordionItem
+	value={group.name}
+	class="rounded-lg border border-border/40 bg-card/50 backdrop-blur-sm transition-colors hover:bg-card/60"
+>
+	<AccordionTrigger class="px-6 py-4 hover:no-underline">
+		<div class="flex w-full items-center justify-between">
+			<div class="space-y-1 text-left">
+				<div class="text-lg font-semibold text-foreground">{group.name}</div>
+				{#if group.description}
+					<div class="text-sm text-muted-foreground/90">{group.description}</div>
+				{/if}
+			</div>
+			<Badge variant="secondary" class="bg-background/60 font-medium">
+				{group.operations.length}
+			</Badge>
+		</div>
+	</AccordionTrigger>
+	<AccordionContent class="px-6 pb-6">
+		<div class="space-y-4 border-t border-border/20 pt-4">
+			{#each group.operations as opMeta, i (i)}
+				<OperationCard {opMeta} {serverUrl} {components} {spec} />
+			{/each}
+		</div>
+	</AccordionContent>
+</AccordionItem>

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

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

package/dist/lib/components/openapi/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * OpenAPI explorer — relocated from `apps/tools-web/src/lib/docs/openapi-ui/`
+ * during Tier 3b of `docs/architecture/DOCS-RUNTIME.md`. Originating source
+ * lives in the exemplar repo at `src/lib/vibes/dev/docs/openapi-ui/`.
+ *
+ * Apps consume via:
+ *   import { OpenApiUI } from '../../index.ts/components/openapi';
+ */
+export { default as OpenApiUI } from './OpenApiUI.svelte';
+export { default as Header } from './components/Header.svelte';
+export { default as TagGroup } from './components/TagGroup.svelte';
+export { default as OperationCard } from './components/OperationCard.svelte';
+export { default as RequestBodyPanel } from './components/RequestBodyPanel.svelte';
+export { default as ResponsesTable } from './components/ResponsesTable.svelte';
+export { default as SchemaViewer } from './components/SchemaViewer.svelte';
+export { default as ServersToolbar } from './components/ServersToolbar.svelte';
+export type * from './types';
+export { methodColor, groupByTag } from './utils';

package/dist/lib/components/openapi/index.js

@@ -0,0 +1,17 @@
+/**
+ * OpenAPI explorer — relocated from `apps/tools-web/src/lib/docs/openapi-ui/`
+ * during Tier 3b of `docs/architecture/DOCS-RUNTIME.md`. Originating source
+ * lives in the exemplar repo at `src/lib/vibes/dev/docs/openapi-ui/`.
+ *
+ * Apps consume via:
+ *   import { OpenApiUI } from '../../index.ts/components/openapi';
+ */
+export { default as OpenApiUI } from './OpenApiUI.svelte';
+export { default as Header } from './components/Header.svelte';
+export { default as TagGroup } from './components/TagGroup.svelte';
+export { default as OperationCard } from './components/OperationCard.svelte';
+export { default as RequestBodyPanel } from './components/RequestBodyPanel.svelte';
+export { default as ResponsesTable } from './components/ResponsesTable.svelte';
+export { default as SchemaViewer } from './components/SchemaViewer.svelte';
+export { default as ServersToolbar } from './components/ServersToolbar.svelte';
+export { methodColor, groupByTag } from './utils';

package/dist/lib/components/openapi/lib/schema-label.d.ts

@@ -0,0 +1,3 @@
+import type { JSONSchema } from './schemas/json-schema';
+/** The short type label the schema views print for a node (`string (uuid)`, `Item[]`, `object`). */
+export declare function schemaTypeLabel(schema: JSONSchema | undefined): string;

package/dist/lib/components/openapi/lib/schema-label.js

@@ -0,0 +1,16 @@
+/** The short type label the schema views print for a node (`string (uuid)`, `Item[]`, `object`). */
+export function schemaTypeLabel(schema) {
+    if (!schema)
+        return 'any';
+    const type = schema.type;
+    const format = schema.format;
+    if (Array.isArray(type))
+        return type.filter((entry) => entry !== 'null')[0] || type[0] || 'any';
+    if (type === 'array')
+        return `${schemaTypeLabel(schema.items || { type: 'any' })}[]`;
+    if (type === 'object')
+        return 'object';
+    if (type === 'string' && format)
+        return `string (${format})`;
+    return type || 'object';
+}

package/dist/lib/components/openapi/lib/schema-resolve.d.ts

@@ -0,0 +1,14 @@
+import type { JSONSchema } from './schemas/json-schema';
+/** The `components` object of an OpenAPI document, as `$ref` resolution reads it: named schemas per section. */
+export type SchemaComponents = {
+    [section: string]: {
+        [name: string]: JSONSchema;
+    } | undefined;
+};
+/**
+ * The schema with every `$ref` it reaches replaced by its target. It walks the
+ * schema-valued keywords (properties, items, composition, additionalProperties,
+ * not); example, default and other value keywords are data and are left as they are.
+ * A cycle returns the node already being resolved.
+ */
+export declare function dereferenceSchema(schema: JSONSchema, components: SchemaComponents | undefined, seen?: Set<JSONSchema>): JSONSchema;

package/dist/lib/components/openapi/lib/schema-resolve.js

@@ -0,0 +1,47 @@
+// Minimal $ref resolver for OpenAPI JSON Schemas used in docs.
+// Handles local refs: #/components/<section>/<Name> (for example #/components/schemas/Name).
+const LOCAL_COMPONENT_REF = /^#\/components\/([^/]+)\/([^/]+)$/;
+function getRefTarget(ref, components) {
+    const match = LOCAL_COMPONENT_REF.exec(ref);
+    if (!match)
+        return undefined;
+    const [, section, name] = match;
+    return section && name ? components?.[section]?.[name] : undefined;
+}
+function dereferenceMap(map, components, seen) {
+    return Object.fromEntries(Object.entries(map).map(([name, child]) => [name, dereferenceSchema(child, components, seen)]));
+}
+/**
+ * The schema with every `$ref` it reaches replaced by its target. It walks the
+ * schema-valued keywords (properties, items, composition, additionalProperties,
+ * not); example, default and other value keywords are data and are left as they are.
+ * A cycle returns the node already being resolved.
+ */
+export function dereferenceSchema(schema, components, seen = new Set()) {
+    if (seen.has(schema))
+        return schema; // Break cycles
+    seen.add(schema);
+    if (schema.$ref) {
+        const target = getRefTarget(schema.$ref, components);
+        if (!target)
+            return { type: 'any' };
+        return dereferenceSchema(target, components, seen);
+    }
+    const out = { ...schema };
+    if (schema.properties)
+        out.properties = dereferenceMap(schema.properties, components, seen);
+    if (schema.items)
+        out.items = dereferenceSchema(schema.items, components, seen);
+    if (schema.additionalProperties && schema.additionalProperties !== true) {
+        out.additionalProperties = dereferenceSchema(schema.additionalProperties, components, seen);
+    }
+    if (schema.anyOf)
+        out.anyOf = schema.anyOf.map((child) => dereferenceSchema(child, components, seen));
+    if (schema.oneOf)
+        out.oneOf = schema.oneOf.map((child) => dereferenceSchema(child, components, seen));
+    if (schema.allOf)
+        out.allOf = schema.allOf.map((child) => dereferenceSchema(child, components, seen));
+    if (schema.not)
+        out.not = dereferenceSchema(schema.not, components, seen);
+    return out;
+}