UI customisation

UI JSON Schema

Display

Summary

</label>
					<label class="col-span-2">
						<div class="text-gray-700 text-sm">Description</div>
						<textarea bind:value={description} placeholder="Edit description" class="text-sm" />
						<div class="mt-1 px-2">
							{#if description}
								<div
									class="prose !max-w-full !max-h-48 text-xs shadow-inner shadow-blue overflow-auto mt-1"
								>
									<SvelteMarkdown source={description} />
								</div>
							{:else}
								<div class="text-xs text-gray-500"> Enter a description to see the preview </div>
							{/if}
						</div>
					</label>
				</div>
				<h2 class="border-b pb-1 mt-6">Arguments</h2>
				<div class="bg-blue-100 border-l-4 border-blue-600 text-blue-700 p-4 m-4" role="alert">
					<p class="font-bold">Synchronized with main signature</p>
					<p>
						Argument names, being required or not, and default values are derived from the main
						signature of step 2 and cannot be edited directly. Change the main signature to edit
						them.
					</p>
				</div>
				<SchemaForm {schema} editableSchema={true} />
			</TabContent>
			<TabContent value="jsonschema">
				<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
			</TabContent>
		</svelte:fragment>
	</Tabs>
</div>