@quoin-cms/admin 0.1.0 → 0.3.0

package/src/lib/components/doc/ApiView.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-import { highlightJson } from '$lib/utils/json-highlight.js'
-import { Copy, Check, Pencil } from 'lucide-svelte'
+import RenderJson from './RenderJson.svelte'
+import { Copy, Check, Pencil, ExternalLink } from 'lucide-svelte'
 import { toast } from 'svelte-sonner'
 
 let {
@@ -17,39 +17,51 @@ let {
 	onApply: () => void
 } = $props()
 
-let activeTab = $state<'json' | 'curl'>('json')
 let editing = $state(false)
 let draft = $state('')
 let parseError = $state<string | null>(null)
 let parsedDraft: Record<string, any> | null = null
 let copied = $state(false)
 
-let prettyJson = $derived(JSON.stringify(formData, null, 2))
-let highlightedJson = $derived(highlightJson(prettyJson))
+// Live API inspector (edit mode only).
+let authenticated = $state(true)
+let liveData = $state<any>(null)
+let liveError = $state<string | null>(null)
+let loading = $state(false)
 
-let curlSnippet = $derived.by(() => {
-	const origin = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:5173'
-	const url =
-		mode === 'create'
-			? `${origin}/api/${collectionKey}`
-			: `${origin}/api/${collectionKey}/${recordId}`
-	const method = mode === 'create' ? 'POST' : 'PUT'
-	const body = JSON.stringify(formData).replace(/'/g, "'\\''")
-	return `curl -X ${method} '${url}' \\
-  -H 'Content-Type: application/json' \\
-  -H 'Cookie: <session>' \\
-  -d '${body}'`
+let origin = $derived(typeof window !== 'undefined' ? window.location.origin : '')
+let isLive = $derived(mode === 'edit' && !!recordId)
+let apiUrl = $derived(`${origin}/api/collections/${collectionKey}/records/${recordId}`)
+
+// Re-fetch whenever the URL or auth mode changes.
+$effect(() => {
+	if (!isLive) return
+	const url = apiUrl
+	const creds: RequestCredentials = authenticated ? 'include' : 'omit'
+	loading = true
+	liveError = null
+	fetch(url, { credentials: creds, headers: { Accept: 'application/json' } })
+		.then(async (res) => {
+			try {
+				liveData = await res.json()
+			} catch {
+				liveError = 'Failed to parse response'
+			}
+		})
+		.catch(() => (liveError = 'Request failed'))
+		.finally(() => (loading = false))
 })
 
-let highlightedCurl = $derived(highlightJson(curlSnippet))
+// What the tree/copy operate on: live response in edit mode, form buffer in create.
+let treeData = $derived(isLive ? liveData : formData)
+let prettyJson = $derived(JSON.stringify(treeData ?? {}, null, 2))
 
 function startEdit() {
-	draft = prettyJson
+	draft = JSON.stringify(formData, null, 2)
 	parseError = null
 	parsedDraft = null
 	editing = true
 }
-
 function onDraftInput() {
 	parseError = null
 	parsedDraft = null
@@ -64,7 +76,6 @@ function onDraftInput() {
 		parseError = (e as Error).message
 	}
 }
-
 function applyChanges() {
 	if (!parsedDraft) return
 	for (const k of Object.keys(formData)) delete formData[k]
@@ -73,109 +84,90 @@ function applyChanges() {
 	onApply()
 	toast.success('JSON applied')
 }
-
 function cancelEdit() {
 	editing = false
 	draft = ''
 	parseError = null
 	parsedDraft = null
 }
-
-async function copyActive() {
-	const text = activeTab === 'json' ? prettyJson : curlSnippet
+async function copyJson() {
 	try {
-		await navigator.clipboard.writeText(text)
+		await navigator.clipboard.writeText(prettyJson)
 		copied = true
 		setTimeout(() => (copied = false), 1500)
 	} catch {
 		toast.error('Copy failed')
 	}
 }
+async function copyUrl() {
+	try {
+		await navigator.clipboard.writeText(apiUrl)
+		toast.success('URL copied')
+	} catch {
+		toast.error('Copy failed')
+	}
+}
 </script>
 
 <div class="space-y-4 px-7 py-6">
-	<div class="flex items-center justify-between">
-		<div class="flex gap-1">
-			<button
-				type="button"
-				onclick={() => (activeTab = 'json')}
-				class="rounded-md px-3 py-1.5 text-xs font-medium transition-colors
-					{activeTab === 'json'
-						? 'bg-secondary text-foreground'
-						: 'text-muted-foreground hover:text-foreground'}"
-			>
-				JSON
+	<div class="flex items-center justify-end gap-2">
+		{#if !editing}
+			<button type="button" onclick={startEdit}
+				class="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs text-foreground shadow-sm hover:bg-secondary">
+				<Pencil class="h-3.5 w-3.5" /> Edit JSON
 			</button>
-			<button
-				type="button"
-				onclick={() => (activeTab = 'curl')}
-				class="rounded-md px-3 py-1.5 text-xs font-medium transition-colors
-					{activeTab === 'curl'
-						? 'bg-secondary text-foreground'
-						: 'text-muted-foreground hover:text-foreground'}"
-			>
-				cURL
-			</button>
-		</div>
+		{/if}
+		<button type="button" onclick={copyJson}
+			class="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs text-foreground shadow-sm hover:bg-secondary">
+			{#if copied}<Check class="h-3.5 w-3.5 text-emerald-700" /> Copied{:else}<Copy class="h-3.5 w-3.5" /> Copy{/if}
+		</button>
+	</div>
+
+	{#if editing}
+		<textarea bind:value={draft} oninput={onDraftInput} spellcheck="false"
+			class="block min-h-[420px] w-full rounded-lg border border-border bg-card px-4 py-3 font-mono text-[12px] leading-relaxed text-foreground shadow-sm focus:border-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/10"></textarea>
+		{#if parseError}<p class="text-xs text-destructive">Invalid JSON: {parseError}</p>{/if}
 		<div class="flex items-center gap-2">
-			{#if activeTab === 'json' && !editing}
-				<button
-					type="button"
-					onclick={startEdit}
-					class="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs text-foreground shadow-sm hover:bg-secondary"
-				>
-					<Pencil class="h-3.5 w-3.5" />
-					Edit JSON
-				</button>
-			{/if}
-			<button
-				type="button"
-				onclick={copyActive}
-				class="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs text-foreground shadow-sm hover:bg-secondary"
-			>
-				{#if copied}
-					<Check class="h-3.5 w-3.5 text-emerald-700" />
-					Copied
-				{:else}
-					<Copy class="h-3.5 w-3.5" />
-					Copy
-				{/if}
-			</button>
+			<button type="button" onclick={applyChanges} disabled={!parsedDraft}
+				class="rounded-lg bg-primary px-4 py-2 text-xs font-semibold text-primary-foreground shadow-sm hover:bg-primary/90 disabled:opacity-50">Apply changes</button>
+			<button type="button" onclick={cancelEdit}
+				class="rounded-lg border border-border bg-card px-4 py-2 text-xs text-foreground hover:bg-secondary">Cancel</button>
 		</div>
-	</div>
+	{:else if isLive}
+		<div class="grid gap-6 lg:grid-cols-[340px_minmax(0,1fr)]">
+			<!-- Left: request controls -->
+			<div class="space-y-6">
+				<div class="space-y-1.5">
+					<span class="flex items-center gap-1.5 text-sm font-medium text-foreground">
+						API URL
+						<button type="button" onclick={copyUrl} class="text-muted-foreground hover:text-foreground"><Copy class="h-3.5 w-3.5" /></button>
+					</span>
+					<a href={apiUrl} target="_blank" rel="noopener noreferrer"
+						class="inline-flex items-start gap-1 break-all font-mono text-xs text-primary hover:underline">
+						{apiUrl}<ExternalLink class="mt-0.5 h-3 w-3 shrink-0" />
+					</a>
+				</div>
+				<label class="flex items-center gap-2 text-sm font-medium text-foreground">
+					<input type="checkbox" bind:checked={authenticated} class="h-4 w-4" /> Authenticated
+				</label>
+			</div>
 
-	{#if activeTab === 'json'}
-		{#if editing}
-			<textarea
-				bind:value={draft}
-				oninput={onDraftInput}
-				spellcheck="false"
-				class="block min-h-[420px] w-full rounded-lg border border-border bg-card px-4 py-3 font-mono text-[12px] leading-relaxed text-foreground shadow-sm focus:border-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/10"
-			></textarea>
-			{#if parseError}
-				<p class="text-xs text-destructive">Invalid JSON: {parseError}</p>
-			{/if}
-			<div class="flex items-center gap-2">
-				<button
-					type="button"
-					onclick={applyChanges}
-					disabled={!parsedDraft}
-					class="rounded-lg bg-primary px-4 py-2 text-xs font-semibold text-primary-foreground shadow-sm hover:bg-primary/90 disabled:opacity-50"
-				>
-					Apply changes
-				</button>
-				<button
-					type="button"
-					onclick={cancelEdit}
-					class="rounded-lg border border-border bg-card px-4 py-2 text-xs text-foreground hover:bg-secondary"
-				>
-					Cancel
-				</button>
+			<!-- Right: JSON tree -->
+			<div class="overflow-auto rounded-lg border border-border bg-card p-4 font-mono text-[12px] text-foreground shadow-sm">
+				{#if loading && liveData === null}
+					<p class="text-muted-foreground">Loading…</p>
+				{:else if liveError}
+					<p class="text-destructive">{liveError}</p>
+				{:else if treeData !== null && treeData !== undefined}
+					<RenderJson data={treeData} />
+				{/if}
 			</div>
-		{:else}
-			<pre class="overflow-auto rounded-lg border border-border bg-card p-4 font-mono text-[12px] leading-relaxed text-foreground shadow-sm">{@html highlightedJson}</pre>
-		{/if}
+		</div>
 	{:else}
-		<pre class="overflow-auto rounded-lg border border-border bg-card p-4 font-mono text-[12px] leading-relaxed text-foreground shadow-sm">{@html highlightedCurl}</pre>
+		<div class="overflow-auto rounded-lg border border-border bg-card p-4 font-mono text-[12px] text-foreground shadow-sm">
+			{#if treeData !== null && treeData !== undefined}
+				<RenderJson data={treeData} />
+			{/if}
+		</div>
 	{/if}
 </div>

package/src/lib/components/doc/RenderJson.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+// Recursive, collapsible JSON tree (ported from Payload's RenderJSON).
+// Objects and arrays get a toggle; primitives render inline with type colors.
+import { ChevronRight } from 'lucide-svelte'
+import Self from './RenderJson.svelte'
+
+let {
+	data,
+	keyName = undefined,
+	trailingComma = false,
+}: {
+	data: any
+	keyName?: string
+	trailingComma?: boolean
+} = $props()
+
+let isOpen = $state(true)
+
+function typeOf(v: any): string {
+	if (v === null || v === undefined) return 'null'
+	if (Array.isArray(v)) return 'array'
+	if (v instanceof Date) return 'date'
+	return typeof v
+}
+
+let t = $derived(typeOf(data))
+let isContainer = $derived(t === 'object' || t === 'array')
+
+let entries = $derived.by(() => {
+	if (t === 'array') {
+		return (data as any[]).map((v, i, a) => ({ k: String(i), v, last: i === a.length - 1, showKey: false }))
+	}
+	if (t === 'object') {
+		const ks = Object.keys(data)
+		return ks.map((k, i) => ({ k, v: data[k], last: i === ks.length - 1, showKey: true }))
+	}
+	return []
+})
+let isEmpty = $derived(isContainer && entries.length === 0)
+let openBracket = $derived(t === 'array' ? '[' : '{')
+let closeBracket = $derived(t === 'array' ? ']' : '}')
+
+function primClass(v: any): string {
+	switch (typeOf(v)) {
+		case 'number': return 'text-violet-500'
+		case 'boolean': return 'text-amber-600'
+		case 'null': return 'text-muted-foreground'
+		case 'date': return 'text-sky-600'
+		default: return 'text-emerald-600'
+	}
+}
+function fmt(v: any): string {
+	if (v instanceof Date) return JSON.stringify(v.toISOString())
+	if (v === undefined) return 'null'
+	return JSON.stringify(v)
+}
+</script>
+
+{#if isContainer}
+	<div class="leading-relaxed">
+		<button
+			type="button"
+			onclick={() => (isOpen = !isOpen)}
+			class="inline-flex items-center gap-0.5 text-left hover:opacity-80"
+		>
+			{#if !isEmpty}
+				<ChevronRight class="h-3 w-3 shrink-0 text-muted-foreground transition-transform {isOpen ? 'rotate-90' : ''}" />
+			{:else}
+				<span class="inline-block w-3"></span>
+			{/if}
+			<span>
+				{#if keyName !== undefined}<span class="text-sky-600">"{keyName}"</span>: {/if}{openBracket}{#if isEmpty}{closeBracket}{trailingComma ? ',' : ''}{:else if !isOpen}<span class="text-muted-foreground">…{closeBracket}{trailingComma ? ',' : ''}</span>{/if}
+			</span>
+		</button>
+
+		{#if !isEmpty && isOpen}
+			<ul class="ml-[7px] border-l border-border/50 pl-3">
+				{#each entries as e (e.k)}
+					<li>
+						{#if typeOf(e.v) === 'object' || typeOf(e.v) === 'array'}
+							<Self data={e.v} keyName={e.showKey ? e.k : undefined} trailingComma={!e.last} />
+						{:else}
+							<span>{#if e.showKey}<span class="text-sky-600">"{e.k}"</span>: {/if}<span class={primClass(e.v)}>{fmt(e.v)}</span>{e.last ? '' : ','}</span>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+			<div>{closeBracket}{trailingComma ? ',' : ''}</div>
+		{/if}
+	</div>
+{:else}
+	<span>{#if keyName !== undefined}<span class="text-sky-600">"{keyName}"</span>: {/if}<span class={primClass(data)}>{fmt(data)}</span>{trailingComma ? ',' : ''}</span>
+{/if}

package/src/lib/components/fields/RichTextField.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { setContext } from 'svelte';
 import type { FieldSchema } from '$lib/types/schema.js';
 import {
 	Composer,
@@ -34,6 +35,10 @@ let {
 	error?: string;
 } = $props();
 
+// Expose this field's custom blocks to the editor toolbar + block nodes.
+// svelte-ignore state_referenced_locally
+setContext('quoin.lexical.blocks', (field as { blocks?: unknown[] }).blocks ?? []);
+
 // Parse initial editor state from value
 function getInitialEditorState(): string | undefined {
 	if (!value) return undefined;

package/src/lib/components/fields/UploadField.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 import type { FieldSchema } from '$lib/types/schema.js'
-import { uploadToCollection, type UploadRecord } from '$lib/api/files.js'
+import type { UploadRecord } from '$lib/api/files.js'
 import { getRecord } from '$lib/api/records.js'
 import { formatFileSize } from '$lib/utils/format.js'
-import { toast } from 'svelte-sonner'
-import { Eye, Upload, X } from 'lucide-svelte'
+import { Eye, FolderOpen, X } from 'lucide-svelte'
 import { onMount } from 'svelte'
+import MediaLibrary from '../MediaLibrary.svelte'
 
 let {
 	field,
@@ -17,10 +17,9 @@ let {
 	error?: string
 } = $props()
 
-let isUploading = $state(false)
 let resolved = $state<UploadRecord | null>(null)
-let fileInput: HTMLInputElement
 let previewOpen = $state(false)
+let libraryOpen = $state(false)
 
 /**
  * Resolve the field value (UUID string or already-expanded record) into a
@@ -57,24 +56,16 @@ function isImage(mimeType?: string): boolean {
 	return !!mimeType && mimeType.startsWith('image/')
 }
 
-async function handleUpload(e: Event): Promise<void> {
-	const target = e.target as HTMLInputElement
-	const file = target.files?.[0]
-	if (!file) return
-	if (!field.relatesTo) {
-		toast.error('field.Upload missing relatesTo')
-		return
-	}
-	isUploading = true
-	const result = await uploadToCollection(field.relatesTo, file)
-	isUploading = false
-	target.value = ''
-	if (result.ok) {
-		value = result.data.id
-		resolved = result.data
-		toast.success(`Uploaded ${file.name}`)
-	} else {
-		toast.error(`Upload failed: ${result.error}`)
+function handleMediaSelect(media: { id: string; url: string; alt: string; filename: string; mimeType: string; size: number }): void {
+	value = media.id
+	// Optimistic preview; the resolve effect re-fetches the authoritative record.
+	resolved = {
+		id: media.id,
+		url: media.url,
+		filename: media.filename,
+		mimeType: media.mimeType,
+		size: media.size,
+		alt: media.alt,
 	}
 }
 
@@ -119,6 +110,13 @@ function closePreview(): void {
 				{#if typeof resolved.size === 'number'}
 					<p class="text-muted-foreground">{formatFileSize(resolved.size)}</p>
 				{/if}
+				<button
+					type="button"
+					onclick={() => (libraryOpen = true)}
+					class="text-primary hover:underline"
+				>
+					Replace
+				</button>
 			</div>
 			<button
 				type="button"
@@ -132,21 +130,15 @@ function closePreview(): void {
 	{:else}
 		<button
 			type="button"
-			onclick={() => fileInput.click()}
-			disabled={isUploading}
-			class="inline-flex h-10 items-center gap-2 rounded-md border bg-background px-4 text-sm hover:bg-accent disabled:opacity-50 {error ? 'border-destructive' : ''}"
+			onclick={() => (libraryOpen = true)}
+			class="inline-flex h-10 items-center gap-2 rounded-md border bg-background px-4 text-sm hover:bg-accent {error ? 'border-destructive' : ''}"
 		>
-			<Upload class="h-4 w-4" />
-			{isUploading ? 'Uploading…' : 'Upload File'}
+			<FolderOpen class="h-4 w-4" />
+			Select File
 		</button>
 	{/if}
 
-	<input
-		bind:this={fileInput}
-		type="file"
-		class="hidden"
-		onchange={handleUpload}
-	/>
+	<MediaLibrary bind:open={libraryOpen} collection={field.relatesTo} onSelect={handleMediaSelect} />
 
 	{#if error}
 		<p class="mt-1 text-xs text-destructive">{error}</p>

package/src/lib/components/fields/UploadGalleryField.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 import type { FieldSchema } from '$lib/types/schema.js'
-import { uploadToCollection, type UploadRecord } from '$lib/api/files.js'
+import type { UploadRecord } from '$lib/api/files.js'
 import { listRecords } from '$lib/api/records.js'
-import { toast } from 'svelte-sonner'
-import { ChevronDown, ChevronUp, Upload, X } from 'lucide-svelte'
+import { ChevronDown, ChevronUp, FolderOpen, X } from 'lucide-svelte'
 import { onMount } from 'svelte'
+import MediaLibrary from '../MediaLibrary.svelte'
 
 let {
 	field,
@@ -16,9 +16,8 @@ let {
 	error?: string
 } = $props()
 
-let isUploading = $state(false)
 let resolved = $state<UploadRecord[]>([])
-let fileInput: HTMLInputElement
+let libraryOpen = $state(false)
 
 /**
  * Resolve the bound value (array of UUID strings or expanded records) into
@@ -33,7 +32,9 @@ async function resolveValues(): Promise<void> {
 		return
 	}
 	const ids = arr.map((v) => (typeof v === 'object' && v ? v.id : (v as string)))
-	const filter = ids.map((id) => `id='${id.replace(/'/g, "''")}'`).join(' || ')
+	// quoin's filter parser uses the literal keyword `OR` (not `||`); the
+	// Postgres backend rejects `||` with "invalid filter: unexpected character".
+	const filter = ids.map((id) => `id='${id.replace(/'/g, "''")}'`).join(' OR ')
 	const result = await listRecords(field.relatesTo, {
 		filter,
 		perPage: ids.length,
@@ -58,31 +59,22 @@ $effect(() => {
 	resolveValues()
 })
 
-async function handleUpload(e: Event): Promise<void> {
-	const target = e.target as HTMLInputElement
-	const files = target.files
-	if (!files?.length) return
-	if (!field.relatesTo) {
-		toast.error('field.Upload missing relatesTo')
-		return
-	}
-	isUploading = true
-	try {
-		// Sequential upload to keep ordering deterministic.
-		for (const file of files) {
-			const result = await uploadToCollection(field.relatesTo, file)
-			if (result.ok) {
-				value = [...(Array.isArray(value) ? value : []), result.data.id]
-				resolved = [...resolved, result.data]
-				toast.success(`Uploaded ${file.name}`)
-			} else {
-				toast.error(`Upload failed for ${file.name}: ${result.error}`)
-			}
-		}
-	} finally {
-		isUploading = false
-		target.value = ''
-	}
+function handleMediaSelect(media: { id: string; url: string; alt: string; filename: string; mimeType: string; size: number }): void {
+	const current = Array.isArray(value) ? value : []
+	const ids = current.map((v) => (typeof v === 'object' && v ? v.id : (v as string)))
+	if (ids.includes(media.id)) return // already in the gallery
+	value = [...current, media.id]
+	resolved = [
+		...resolved,
+		{
+			id: media.id,
+			url: media.url,
+			filename: media.filename,
+			mimeType: media.mimeType,
+			size: media.size,
+			alt: media.alt,
+		},
+	]
 }
 
 function removeAt(i: number): void {
@@ -150,15 +142,14 @@ function isImage(mimeType?: string): boolean {
 
 	<button
 		type="button"
-		onclick={() => fileInput.click()}
-		disabled={isUploading}
-		class="inline-flex h-10 items-center gap-2 rounded-md border bg-background px-4 text-sm hover:bg-accent disabled:opacity-50 {error ? 'border-destructive' : ''}"
+		onclick={() => (libraryOpen = true)}
+		class="inline-flex h-10 items-center gap-2 rounded-md border bg-background px-4 text-sm hover:bg-accent {error ? 'border-destructive' : ''}"
 	>
-		<Upload class="h-4 w-4" />
-		{isUploading ? 'Uploading…' : resolved.length > 0 ? 'Add Files' : 'Upload Files'}
+		<FolderOpen class="h-4 w-4" />
+		{resolved.length > 0 ? 'Add Files' : 'Select Files'}
 	</button>
 
-	<input bind:this={fileInput} type="file" multiple class="hidden" onchange={handleUpload} />
+	<MediaLibrary bind:open={libraryOpen} multiple collection={field.relatesTo} onSelect={handleMediaSelect} />
 
 	{#if error}
 		<p class="mt-1 text-xs text-destructive">{error}</p>

package/src/lib/components/lexical/BlockField.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+import type { Component } from 'svelte'
+import type { FieldSchema } from '$lib/types/schema.js'
+import { getQuoinContext, resolveField, loadComponent } from '$lib/context.svelte.js'
+import { resolveFieldComponent } from '../fields/registry.js'
+
+let {
+	field,
+	data = $bindable({}),
+}: { field: FieldSchema; data?: Record<string, unknown> } = $props()
+
+const ctx = getQuoinContext()
+const overridePath = $derived(resolveField(field.type, ctx.config))
+const Builtin = $derived(resolveFieldComponent(field))
+let Override = $state<Component<any> | null>(null)
+let overrideFailed = $state(false)
+
+$effect(() => {
+	if (overridePath) {
+		overrideFailed = false
+		loadComponent(overridePath, ctx.importMap)
+			.then((c) => (Override = c))
+			.catch(() => {
+				Override = null
+				overrideFailed = true
+			})
+	}
+})
+</script>
+
+{#if overridePath && Override}
+	{@const C = Override}
+	<C {field} bind:value={data[field.name]} />
+{:else if overridePath && !overrideFailed}
+	<!-- override still loading -->
+{:else if Builtin}
+	{@const C = Builtin}
+	<C {field} bind:value={data[field.name]} />
+{:else}
+	<p class="text-xs text-destructive">No widget for field type: {field.type}</p>
+{/if}