@quoin-cms/admin 0.1.0

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: string
+	error?: string
+} = $props()
+</script>
+
+<div>
+  <label for={field.name} class="mb-1.5 block text-sm font-medium">
+    {field.label}
+    {#if field.required}<span class="text-destructive">*</span>{/if}
+  </label>
+  <textarea
+    id={field.name}
+    bind:value
+    rows={4}
+    class="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring {error ? 'border-destructive' : ''}"
+    placeholder={field.label}
+    minlength={field.minLength}
+    maxlength={field.maxLength}
+  ></textarea>
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,166 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+import { uploadToCollection, 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 { onMount } from 'svelte'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: string | UploadRecord | null
+	error?: string
+} = $props()
+
+let isUploading = $state(false)
+let resolved = $state<UploadRecord | null>(null)
+let fileInput: HTMLInputElement
+let previewOpen = $state(false)
+
+/**
+ * Resolve the field value (UUID string or already-expanded record) into a
+ * UploadRecord we can render previews from. Hits GET /api/collections/{relatesTo}/records/{id}.
+ */
+async function resolveValue(): Promise<void> {
+	if (!value) {
+		resolved = null
+		return
+	}
+	if (typeof value === 'object' && value && 'url' in value) {
+		resolved = value as UploadRecord
+		return
+	}
+	if (typeof value === 'string' && field.relatesTo) {
+		const result = await getRecord(field.relatesTo, value)
+		if (result.ok) {
+			resolved = result.data as UploadRecord
+		} else {
+			resolved = null
+		}
+	}
+}
+
+onMount(() => {
+	resolveValue()
+})
+$effect(() => {
+	// Re-resolve when the value or relatesTo changes externally.
+	resolveValue()
+})
+
+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 clearValue(): void {
+	value = null
+	resolved = null
+}
+
+function openPreview(): void {
+	previewOpen = true
+}
+function closePreview(): void {
+	previewOpen = false
+}
+</script>
+
+<div>
+	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<label class="mb-1.5 block text-sm font-medium">
+		{field.label}
+		{#if field.required}<span class="text-destructive">*</span>{/if}
+	</label>
+
+	{#if resolved}
+		<div class="mb-2 flex items-start gap-3 rounded-md border bg-muted/30 p-2">
+			{#if isImage(resolved.mimeType) && resolved.url}
+				<button
+					type="button"
+					onclick={openPreview}
+					class="group relative h-16 w-16 shrink-0 overflow-hidden rounded"
+				>
+					<img src={resolved.url} alt={(resolved.alt as string | undefined) ?? resolved.filename} class="h-full w-full object-cover" />
+					<div class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100">
+						<Eye class="h-5 w-5 text-white" />
+					</div>
+				</button>
+			{:else}
+				<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded bg-muted text-lg">📄</div>
+			{/if}
+			<div class="flex-1 space-y-1 text-xs">
+				<p class="font-medium">{resolved.filename}</p>
+				{#if typeof resolved.size === 'number'}
+					<p class="text-muted-foreground">{formatFileSize(resolved.size)}</p>
+				{/if}
+			</div>
+			<button
+				type="button"
+				onclick={clearValue}
+				class="shrink-0 rounded p-1 text-muted-foreground hover:text-destructive"
+				aria-label="Clear"
+			>
+				<X class="h-4 w-4" />
+			</button>
+		</div>
+	{: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' : ''}"
+		>
+			<Upload class="h-4 w-4" />
+			{isUploading ? 'Uploading…' : 'Upload File'}
+		</button>
+	{/if}
+
+	<input
+		bind:this={fileInput}
+		type="file"
+		class="hidden"
+		onchange={handleUpload}
+	/>
+
+	{#if error}
+		<p class="mt-1 text-xs text-destructive">{error}</p>
+	{/if}
+</div>
+
+{#if previewOpen && resolved && resolved.url}
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+		onclick={closePreview}
+		role="button"
+		tabindex="0"
+		onkeydown={(e) => e.key === 'Escape' && closePreview()}
+	>
+		<img src={resolved.url} alt={(resolved.alt as string | undefined) ?? resolved.filename} class="max-h-[90vh] max-w-[90vw] rounded object-contain" />
+	</div>
+{/if}

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+import UploadField from './UploadField.svelte'
+import UploadGalleryField from './UploadGalleryField.svelte'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: any
+	error?: string
+} = $props()
+</script>
+
+{#if field.relationType === 'manyToMany'}
+	<UploadGalleryField {field} bind:value {error} />
+{:else}
+	<UploadField {field} bind:value {error} />
+{/if}

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

@@ -0,0 +1,166 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+import { uploadToCollection, 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 { onMount } from 'svelte'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: Array<string | UploadRecord> | null
+	error?: string
+} = $props()
+
+let isUploading = $state(false)
+let resolved = $state<UploadRecord[]>([])
+let fileInput: HTMLInputElement
+
+/**
+ * Resolve the bound value (array of UUID strings or expanded records) into
+ * a UploadRecord[] in the same order the user has chosen. We bulk-fetch via
+ * `id='X' || id='Y' || ...` because quoin's filter parser supports that
+ * disjunction shape (mirrors how relationship gallery does it).
+ */
+async function resolveValues(): Promise<void> {
+	const arr = Array.isArray(value) ? value : []
+	if (arr.length === 0 || !field.relatesTo) {
+		resolved = []
+		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(' || ')
+	const result = await listRecords(field.relatesTo, {
+		filter,
+		perPage: ids.length,
+	})
+	if (!result.ok) {
+		resolved = []
+		return
+	}
+	const map = new Map<string, UploadRecord>()
+	for (const r of result.data.records as UploadRecord[]) {
+		map.set(r.id, r)
+	}
+	resolved = ids
+		.map((id) => map.get(id))
+		.filter((r): r is UploadRecord => r !== undefined)
+}
+
+onMount(() => {
+	resolveValues()
+})
+$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 removeAt(i: number): void {
+	if (!Array.isArray(value)) return
+	value = value.filter((_, idx) => idx !== i)
+	resolved = resolved.filter((_, idx) => idx !== i)
+}
+
+function moveUp(i: number): void {
+	if (!Array.isArray(value) || i === 0) return
+	const v = [...value]
+	;[v[i - 1], v[i]] = [v[i], v[i - 1]]
+	value = v
+	const r = [...resolved]
+	;[r[i - 1], r[i]] = [r[i], r[i - 1]]
+	resolved = r
+}
+
+function moveDown(i: number): void {
+	if (!Array.isArray(value) || i === value.length - 1) return
+	const v = [...value]
+	;[v[i], v[i + 1]] = [v[i + 1], v[i]]
+	value = v
+	const r = [...resolved]
+	;[r[i], r[i + 1]] = [r[i + 1], r[i]]
+	resolved = r
+}
+
+function isImage(mimeType?: string): boolean {
+	return !!mimeType && mimeType.startsWith('image/')
+}
+</script>
+
+<div>
+	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<label class="mb-1.5 block text-sm font-medium">
+		{field.label}
+		{#if field.required}<span class="text-destructive">*</span>{/if}
+	</label>
+
+	{#if resolved.length > 0}
+		<div class="mb-2 grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-6">
+			{#each resolved as item, i (item.id)}
+				<div class="group relative aspect-square overflow-hidden rounded border">
+					{#if isImage(item.mimeType) && item.url}
+						<img src={item.url} alt={(item.alt as string | undefined) ?? item.filename} class="h-full w-full object-cover" />
+					{:else}
+						<div class="flex h-full w-full items-center justify-center bg-muted text-2xl">📄</div>
+					{/if}
+					<div class="absolute inset-x-0 bottom-0 flex justify-between bg-black/60 opacity-0 transition-opacity group-hover:opacity-100">
+						<button type="button" onclick={() => moveUp(i)} class="p-1 text-white" aria-label="Move up">
+							<ChevronUp class="h-3 w-3" />
+						</button>
+						<button type="button" onclick={() => moveDown(i)} class="p-1 text-white" aria-label="Move down">
+							<ChevronDown class="h-3 w-3" />
+						</button>
+						<button type="button" onclick={() => removeAt(i)} class="p-1 text-white" aria-label="Remove">
+							<X class="h-3 w-3" />
+						</button>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<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' : ''}"
+	>
+		<Upload class="h-4 w-4" />
+		{isUploading ? 'Uploading…' : resolved.length > 0 ? 'Add Files' : 'Upload Files'}
+	</button>
+
+	<input bind:this={fileInput} type="file" multiple class="hidden" onchange={handleUpload} />
+
+	{#if error}
+		<p class="mt-1 text-xs text-destructive">{error}</p>
+	{/if}
+</div>

package/src/lib/components/fields/index.ts

@@ -0,0 +1,22 @@
+import TabsField from './TabsField.svelte'
+import { fieldComponents, resolveFieldComponent } from './registry.js'
+
+fieldComponents.tabs = TabsField
+
+export { fieldComponents, resolveFieldComponent }
+export { default as PasswordField } from './PasswordField.svelte'
+export { default as TextField } from './TextField.svelte'
+export { default as TextareaField } from './TextareaField.svelte'
+export { default as NumberField } from './NumberField.svelte'
+export { default as EmailField } from './EmailField.svelte'
+export { default as SelectField } from './SelectField.svelte'
+export { default as CheckboxField } from './CheckboxField.svelte'
+export { default as DateField } from './DateField.svelte'
+export { default as RichTextField } from './RichTextField.svelte'
+export { default as RelationshipField } from './RelationshipField.svelte'
+export { default as UploadField } from './UploadField.svelte'
+export { default as SlugField } from './SlugField.svelte'
+export { default as ColorField } from './ColorField.svelte'
+export { default as JsonField } from './JsonField.svelte'
+export { default as TagsField } from './TagsField.svelte'
+export { TabsField }

package/src/lib/components/fields/registry.ts

@@ -0,0 +1,58 @@
+import type { Component } from 'svelte'
+import type { FieldSchema } from '$lib/types/schema.js'
+import TextField from './TextField.svelte'
+import TextareaField from './TextareaField.svelte'
+import NumberField from './NumberField.svelte'
+import EmailField from './EmailField.svelte'
+import SelectField from './SelectField.svelte'
+import CheckboxField from './CheckboxField.svelte'
+import DateField from './DateField.svelte'
+import RichTextField from './RichTextField.svelte'
+import RelationshipField from './RelationshipField.svelte'
+import FileField from './FileField.svelte'
+import UploadFieldDispatch from './UploadFieldDispatch.svelte'
+import SlugField from './SlugField.svelte'
+import ColorField from './ColorField.svelte'
+import JsonField from './JsonField.svelte'
+import TagsField from './TagsField.svelte'
+import ArrayFieldEditor from './ArrayFieldEditor.svelte'
+import BlocksFieldEditor from './BlocksFieldEditor.svelte'
+import PasswordField from './PasswordField.svelte'
+
+export const fieldComponents: Record<string, Component<any>> = {
+	text: TextField,
+	textarea: TextareaField,
+	number: NumberField,
+	email: EmailField,
+	select: SelectField,
+	checkbox: CheckboxField,
+	date: DateField,
+	richtext: RichTextField,
+	relationship: RelationshipField,
+	file: FileField,
+	upload: UploadFieldDispatch,
+	slug: SlugField,
+	color: ColorField,
+	json: JsonField,
+	tags: TagsField,
+	array: ArrayFieldEditor,
+	blocks: BlocksFieldEditor,
+	url: TextField,
+	uuid: TextField,
+}
+
+/**
+ * Resolve a field schema to its renderer component.
+ *
+ * Type-aware dispatch: text fields whose `variant` discriminator is set route
+ * to specialised components (e.g. `variant === 'password'` → PasswordField).
+ * All other types fall back to the flat `fieldComponents` map.
+ *
+ * Phase 21 D-06 — pairs with field.Text{Type:"password"} on the Go side.
+ */
+export function resolveFieldComponent(
+	field: Pick<FieldSchema, 'type' | 'variant'>,
+): Component<any> | undefined {
+	if (field.type === 'text' && field.variant === 'password') return PasswordField
+	return fieldComponents[field.type]
+}

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { getEditor } from 'svelte-lexical';
+import { getNodeByKey, isCustomHTMLNode } from './lexical-helpers.js';
+
+let { html = '', nodeKey = '' } = $props();
+
+let showPreview = $state(false);
+// svelte-ignore state_referenced_locally
+let editHtml = $state(html);
+
+const editor = getEditor();
+
+function updateNode() {
+	editor.update(() => {
+		const node = getNodeByKey(nodeKey);
+		if (isCustomHTMLNode(node)) {
+			node.setHtml(editHtml);
+		}
+	});
+}
+
+function handleInput() {
+	updateNode();
+}
+</script>
+
+<div class="border border-dashed border-muted-foreground/50 rounded p-3 my-2">
+	<div class="flex items-center justify-between mb-2">
+		<span class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Custom HTML</span>
+		<button
+			type="button"
+			class="text-xs px-2 py-0.5 rounded bg-muted hover:bg-accent"
+			onclick={() => (showPreview = !showPreview)}
+		>
+			{showPreview ? 'Edit' : 'Preview'}
+		</button>
+	</div>
+
+	{#if showPreview}
+		<div class="border rounded p-2 bg-background min-h-[60px]">
+			{@html html}
+		</div>
+	{:else}
+		<textarea
+			class="w-full min-h-[80px] font-mono text-sm bg-muted/30 rounded p-2 border-none resize-y focus:outline-none focus:ring-1 focus:ring-primary"
+			bind:value={editHtml}
+			oninput={handleInput}
+			placeholder="Enter HTML code..."
+			spellcheck="false"
+		></textarea>
+	{/if}
+</div>

package/src/lib/components/lexical/CustomHTMLNode.ts

@@ -0,0 +1,94 @@
+import { DecoratorNode } from 'lexical';
+import type {
+	EditorConfig,
+	LexicalEditor,
+	LexicalNode,
+	NodeKey,
+	SerializedLexicalNode,
+	Spread,
+} from 'lexical';
+import CustomHTMLComponent from './CustomHTMLComponent.svelte';
+
+export type SerializedCustomHTMLNode = Spread<
+	{
+		type: 'custom-html';
+		version: 1;
+		html: string;
+	},
+	SerializedLexicalNode
+>;
+
+export class CustomHTMLNode extends DecoratorNode<unknown> {
+	__html: string;
+
+	static getType(): string {
+		return 'custom-html';
+	}
+
+	static clone(node: CustomHTMLNode): CustomHTMLNode {
+		return new CustomHTMLNode(node.__html, node.__key);
+	}
+
+	constructor(html: string, key?: NodeKey) {
+		super(key);
+		this.__html = html;
+	}
+
+	createDOM(_config: EditorConfig): HTMLElement {
+		const div = document.createElement('div');
+		div.className = 'lexical-custom-html';
+		div.setAttribute('contenteditable', 'false');
+		return div;
+	}
+
+	updateDOM(): boolean {
+		return false;
+	}
+
+	static importJSON(json: SerializedCustomHTMLNode): CustomHTMLNode {
+		return new CustomHTMLNode(json.html);
+	}
+
+	exportJSON(): SerializedCustomHTMLNode {
+		return {
+			...super.exportJSON(),
+			type: 'custom-html',
+			version: 1,
+			html: this.__html,
+		};
+	}
+
+	decorate(_editor: LexicalEditor, _config: EditorConfig) {
+		return {
+			componentClass: CustomHTMLComponent,
+			updateProps: (props: Record<string, unknown>) => {
+				props.html = this.__html;
+				props.nodeKey = this.__key;
+			},
+		};
+	}
+
+	isInline(): boolean {
+		return false;
+	}
+
+	getHtml(): string {
+		return this.__html;
+	}
+
+	setHtml(html: string): this {
+		const writable = this.getWritable();
+		writable.__html = html;
+		return writable;
+	}
+}
+
+export function $createCustomHTMLNode(html: string): CustomHTMLNode {
+	return new CustomHTMLNode(html);
+}
+
+export function $isCustomHTMLNode(
+	node: LexicalNode | null | undefined,
+): node is CustomHTMLNode {
+	return node instanceof CustomHTMLNode;
+}

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { getEditor } from 'svelte-lexical';
+import { getNodeByKey, isPullQuoteNode } from './lexical-helpers.js';
+
+let { text = '', attribution = '', nodeKey = '' } = $props();
+
+let editing = $state(false);
+// svelte-ignore state_referenced_locally
+let editText = $state(text);
+// svelte-ignore state_referenced_locally
+let editAttribution = $state(attribution);
+
+const editor = getEditor();
+
+function startEditing() {
+	editText = text;
+	editAttribution = attribution;
+	editing = true;
+}
+
+function saveChanges() {
+	editing = false;
+	editor.update(() => {
+		const node = getNodeByKey(nodeKey);
+		if (isPullQuoteNode(node)) {
+			node.setText(editText);
+			node.setAttribution(editAttribution);
+		}
+	});
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === 'Enter' && !e.shiftKey) {
+		e.preventDefault();
+		saveChanges();
+	}
+	if (e.key === 'Escape') {
+		editing = false;
+	}
+}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="border-l-4 border-primary pl-4 py-2 my-2 bg-muted/20 rounded-r cursor-pointer"
+	onclick={startEditing}
+>
+	{#if editing}
+		<textarea
+			class="w-full bg-transparent italic text-lg resize-none focus:outline-none border-none p-0"
+			bind:value={editText}
+			onblur={saveChanges}
+			onkeydown={handleKeydown}
+			rows="2"
+			placeholder="Enter quote text..."
+		></textarea>
+		<input
+			class="w-full bg-transparent text-sm text-muted-foreground mt-2 focus:outline-none border-none p-0"
+			bind:value={editAttribution}
+			onblur={saveChanges}
+			onkeydown={handleKeydown}
+			placeholder="Attribution (optional)"
+		/>
+	{:else}
+		<blockquote class="italic text-lg">
+			{text || 'Click to add quote text...'}
+		</blockquote>
+		{#if attribution}
+			<cite class="block mt-2 text-sm text-muted-foreground not-italic">-- {attribution}</cite>
+		{/if}
+	{/if}
+</div>