51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T20a7,"use client"; import * as React from "react"; import { ChevronDown, ChevronRight } from "lucide-react"; import { cn } from "@/lib/utils"; interface JsonSchema { type?: string | string[]; title?: string; description?: string; properties?: Record; items?: JsonSchema; required?: string[]; enum?: unknown[]; default?: unknown; example?: unknown; examples?: unknown[]; format?: string; minimum?: number; maximum?: number; minLength?: number; maxLength?: number; pattern?: string; oneOf?: JsonSchema[]; anyOf?: JsonSchema[]; allOf?: JsonSchema[]; $ref?: string; } interface SchemaViewerProps { schema: JsonSchema; showExamples?: boolean; className?: string; } interface SchemaNodeProps { name?: string; schema: JsonSchema; required?: boolean; depth: number; showExamples: boolean; } function TypeBadge({ type, format }: { type: string; format?: string }) { const colors: Record = { string: "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300", number: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300", integer: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300", boolean: "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300", object: "bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300", array: "bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300", null: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300", }; return ( {type} {format && ({format})} ); } function SchemaNode({ name, schema, required, depth, showExamples, }: SchemaNodeProps) { const [isExpanded, setIsExpanded] = React.useState(depth < 2); const handleToggle = React.useCallback(() => { setIsExpanded((prev) => !prev); }, []); const type = Array.isArray(schema.type) ? schema.type.join(" | ") : schema.type || "any"; const hasChildren = schema.properties || schema.items || schema.oneOf || schema.anyOf || schema.allOf; const example = schema.example ?? schema.examples?.[0] ?? schema.default; return (

0 && "ml-4 border-l border-border pl-3")} role="treeitem" aria-expanded={hasChildren ? isExpanded : undefined} >

{hasChildren && ( )} {!hasChildren &&

}

{name && ( {name} {required && *} )} {schema.enum && ( enum: {schema.enum.map((v) => JSON.stringify(v)).join(" | ")} )}

{schema.description && (

{schema.description}

)} {showExamples && example !== undefined && (

Example:


                {JSON.stringify(example)}

)} {(schema.minimum !== undefined || schema.maximum !== undefined) && (

{schema.minimum !== undefined && ( min: {schema.minimum} )} {schema.maximum !== undefined && ( max: {schema.maximum} )}

)} {(schema.minLength !== undefined || schema.maxLength !== undefined) && (

{schema.minLength !== undefined && ( minLength: {schema.minLength} )} {schema.maxLength !== undefined && ( maxLength: {schema.maxLength} )}

)} {schema.pattern && (

pattern: {schema.pattern}

)}

{isExpanded && hasChildren && (

{schema.properties && Object.entries(schema.properties).map(([key, propSchema]) => ( ))} {schema.items && ( )} {schema.oneOf && (

oneOf: {schema.oneOf.map((s, i) => ( ))}

)} {schema.anyOf && (

anyOf: {schema.anyOf.map((s, i) => ( ))}

)} {schema.allOf && (

allOf: {schema.allOf.map((s, i) => ( ))}

)}

); } export function SchemaViewer({ schema, showExamples = true, className, }: SchemaViewerProps) { return (

{schema.title && (

{schema.title}

{schema.description && (

{schema.description}

)}

); } export type { SchemaViewerProps, JsonSchema }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@elements","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/blocks/devtools/schema-viewer/components/elements/schema-viewer.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]