@quoin-cms/admin 0.1.0

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

@@ -0,0 +1,271 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+import { listRecords, getRecord } from '$lib/api/records.js'
+import { schema, getCollectionByKey } from '$lib/stores/schema.svelte.js'
+import { X, Search } from 'lucide-svelte'
+import { onMount } from 'svelte'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: any
+	error?: string
+} = $props()
+
+let searchQuery = $state('')
+let options = $state<Record<string, any>[]>([])
+let isOpen = $state(false)
+let isLoading = $state(false)
+let searchTimeout: ReturnType<typeof setTimeout>
+let loadedRecord = $state<Record<string, any> | null>(null)
+let loadedRecords = $state<Record<string, any>[]>([])
+
+let isManyToMany = $derived(field.relationType === 'manyToMany')
+
+// Selected items for ManyToMany
+let selectedItems = $derived.by(() => {
+	if (!isManyToMany) return []
+	if (Array.isArray(value)) {
+		// If we have loaded records, use them
+		if (loadedRecords.length > 0) return loadedRecords
+		return value
+	}
+	return []
+})
+
+// Load related records if values are just IDs
+onMount(async () => {
+	if (!field.relatesTo) return
+
+	if (!isManyToMany && value && typeof value === 'string') {
+		// BelongsTo: single ID
+		const result = await getRecord(field.relatesTo, value)
+		if (result.ok) {
+			loadedRecord = result.data
+		}
+	} else if (isManyToMany && Array.isArray(value) && value.length > 0) {
+		// ManyToMany: array of IDs
+		const hasIdStrings = value.some((v) => typeof v === 'string')
+		if (hasIdStrings) {
+			const ids = value.map((v) => (typeof v === 'string' ? v : v.id))
+			const records = await Promise.all(
+				ids.map(async (id) => {
+					const result = await getRecord(field.relatesTo!, id)
+					return result.ok ? result.data : null
+				})
+			)
+			loadedRecords = records.filter((r): r is Record<string, any> => r !== null)
+		}
+	}
+})
+
+// Find the field on the target collection to filter against.
+// Payload pattern: prefer admin.useAsTitle; fall back to common text fields.
+function getSearchField(): string {
+	if (!field.relatesTo) return 'name'
+	const target = getCollectionByKey(schema.collections, field.relatesTo)
+	if (target?.admin?.useAsTitle) return target.admin.useAsTitle
+	const fallback = ['name', 'title', 'label', 'slug']
+	for (const f of fallback) {
+		if (target?.fields?.some((fd: any) => fd.name === f)) return f
+	}
+	return 'name'
+}
+
+async function search(query: string) {
+	if (!field.relatesTo) return
+	isLoading = true
+	const searchField = getSearchField()
+	const params: Record<string, any> = {
+		perPage: 20,
+		// Only select id + useAsTitle — avoids SQL errors when some
+		// display-candidate columns don't exist on the target table.
+		fields: `id,${searchField}`,
+	}
+	if (query.trim()) {
+		// Escape single quotes to keep filter expression valid
+		const safe = query.trim().replace(/'/g, "''")
+		params.filter = `${searchField}~'${safe}'`
+	}
+	const result = await listRecords(field.relatesTo, params)
+	isLoading = false
+	if (result.ok) {
+		options = result.data.records
+	}
+}
+
+function handleSearch(e: Event) {
+	const target = e.target as HTMLInputElement
+	searchQuery = target.value
+	clearTimeout(searchTimeout)
+	searchTimeout = setTimeout(() => search(searchQuery), 300)
+}
+
+function openDropdown() {
+	isOpen = true
+	search(searchQuery)
+}
+
+function getDisplayName(item: Record<string, any>): string {
+	return item.name || item.title || item.label || item.slug || item.id || '-'
+}
+
+function selectItem(item: Record<string, any>) {
+	if (isManyToMany) {
+		const currentIds = (Array.isArray(value) ? value : []).map((v: any) =>
+			typeof v === 'object' ? v.id : v
+		)
+		if (!currentIds.includes(item.id)) {
+			value = [...(Array.isArray(value) ? value : []), item]
+			loadedRecords = [...loadedRecords, item]
+		}
+	} else {
+		value = item.id
+		loadedRecord = item
+		isOpen = false
+	}
+	searchQuery = ''
+}
+
+function removeItem(itemId: string) {
+	if (isManyToMany && Array.isArray(value)) {
+		value = value.filter((v: any) => {
+			const id = typeof v === 'object' ? v.id : v
+			return id !== itemId
+		})
+		// Also remove from loaded records
+		loadedRecords = loadedRecords.filter((r) => r.id !== itemId)
+	}
+}
+
+function clearSelection() {
+	value = isManyToMany ? [] : null
+}
+
+// Display text for BelongsTo
+let belongsToDisplay = $derived.by(() => {
+	if (isManyToMany) return ''
+	if (!value) return ''
+
+	if (typeof value === 'object') return getDisplayName(value)
+	// Just an ID - try loaded record first, then options
+	if (loadedRecord) return getDisplayName(loadedRecord)
+	const found = options.find((o) => o.id === value)
+	return found ? getDisplayName(found) : value
+})
+</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>
+
+  {#if isManyToMany}
+    <!-- ManyToMany: multi-select combobox (chips inline with search) -->
+    <div class="relative">
+      <div
+        class="flex min-h-10 w-full flex-wrap items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-ring {error ? 'border-destructive' : ''}"
+      >
+        {#each selectedItems as item}
+          {@const id = typeof item === 'object' ? item.id : item}
+          {@const name = typeof item === 'object' ? getDisplayName(item) : item}
+          <span class="inline-flex items-center gap-1 rounded-full border bg-secondary px-2 py-0.5 text-xs">
+            {name}
+            <button type="button" onclick={() => removeItem(id)} class="hover:text-destructive" aria-label="Remove {name}">
+              <X class="h-3 w-3" />
+            </button>
+          </span>
+        {/each}
+        <input
+          type="text"
+          value={searchQuery}
+          oninput={handleSearch}
+          onfocus={openDropdown}
+          class="min-w-[120px] flex-1 bg-transparent px-1 py-0.5 text-sm outline-none"
+          placeholder={selectedItems.length === 0 ? `Select ${field.relatesTo}...` : 'Add more...'}
+        />
+      </div>
+
+      {#if isOpen}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="fixed inset-0 z-40" onclick={() => (isOpen = false)} onkeydown={() => {}}></div>
+        <div class="absolute z-50 mt-1 max-h-48 w-full overflow-y-auto rounded-md border bg-popover shadow-lg">
+          {#if isLoading}
+            <p class="px-3 py-2 text-sm text-muted-foreground">Loading...</p>
+          {:else if options.length === 0}
+            <p class="px-3 py-2 text-sm text-muted-foreground">No results</p>
+          {:else}
+            {#each options as opt}
+              <button
+                type="button"
+                class="flex w-full items-center px-3 py-2 text-left text-sm hover:bg-accent"
+                onclick={() => selectItem(opt)}
+              >
+                {getDisplayName(opt)}
+              </button>
+            {/each}
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {:else}
+    <!-- BelongsTo: single-select combobox -->
+    <div class="relative">
+      {#if belongsToDisplay}
+        <div
+          class="flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 text-sm {error ? 'border-destructive' : ''}"
+        >
+          <span>{belongsToDisplay}</span>
+          <button
+            type="button"
+            onclick={clearSelection}
+            class="text-muted-foreground hover:text-destructive"
+            aria-label="Clear selection"
+          >
+            <X class="h-4 w-4" />
+          </button>
+        </div>
+      {:else}
+        <Search class="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+        <input
+          type="text"
+          value={searchQuery}
+          oninput={handleSearch}
+          onfocus={openDropdown}
+          class="h-10 w-full rounded-md border bg-background pl-9 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring {error ? 'border-destructive' : ''}"
+          placeholder="Select {field.relatesTo}..."
+        />
+      {/if}
+
+      {#if isOpen && !belongsToDisplay}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="fixed inset-0 z-40" onclick={() => (isOpen = false)} onkeydown={() => {}}></div>
+        <div class="absolute z-50 mt-1 max-h-48 w-full overflow-y-auto rounded-md border bg-popover shadow-lg">
+          {#if isLoading}
+            <p class="px-3 py-2 text-sm text-muted-foreground">Loading...</p>
+          {:else if options.length === 0}
+            <p class="px-3 py-2 text-sm text-muted-foreground">No results</p>
+          {:else}
+            {#each options as opt}
+              <button
+                type="button"
+                class="flex w-full items-center px-3 py-2 text-left text-sm hover:bg-accent"
+                onclick={() => selectItem(opt)}
+              >
+                {getDisplayName(opt)}
+              </button>
+            {/each}
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,139 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js';
+import {
+	Composer,
+	ContentEditable,
+	RichTextPlugin,
+	HistoryPlugin,
+	ListPlugin,
+	LinkPlugin,
+	AutoFocusPlugin,
+	OnChangePlugin,
+	HeadingNode,
+	QuoteNode,
+	ListNode,
+	ListItemNode,
+	AutoLinkNode,
+	LinkNode,
+	CodeNode,
+	CodeHighlightNode,
+	ImageNode,
+	YouTubeNode,
+} from 'svelte-lexical';
+import type { EditorState, LexicalEditor, EditorThemeClasses } from 'lexical';
+import { customNodes } from '../lexical/nodes.js';
+import EditorToolbar from '../lexical/toolbar/EditorToolbar.svelte';
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema;
+	value?: any;
+	error?: string;
+} = $props();
+
+// Parse initial editor state from value
+function getInitialEditorState(): string | undefined {
+	if (!value) return undefined;
+	if (typeof value === 'string') {
+		try {
+			JSON.parse(value);
+			return value;
+		} catch {
+			return undefined;
+		}
+	}
+	if (typeof value === 'object') {
+		return JSON.stringify(value);
+	}
+	return undefined;
+}
+
+const initialEditorState = getInitialEditorState();
+
+const theme: EditorThemeClasses = {
+	paragraph: 'mb-2',
+	heading: {
+		h1: 'text-2xl font-bold mb-3',
+		h2: 'text-xl font-bold mb-2',
+		h3: 'text-lg font-semibold mb-2',
+	},
+	list: {
+		ul: 'list-disc pl-6 mb-2',
+		ol: 'list-decimal pl-6 mb-2',
+		listitem: 'mb-1',
+		nested: {
+			listitem: 'list-none',
+		},
+	},
+	quote: 'border-l-4 border-muted-foreground/30 pl-4 italic mb-2',
+	code: 'bg-muted rounded px-1 py-0.5 font-mono text-sm block mb-2',
+	link: 'text-primary underline',
+	text: {
+		bold: 'font-bold',
+		italic: 'italic',
+		underline: 'underline',
+		strikethrough: 'line-through',
+		code: 'bg-muted rounded px-1 font-mono text-sm',
+	},
+};
+
+// svelte-ignore state_referenced_locally
+const initialConfig = {
+	namespace: field.name,
+	nodes: [
+		HeadingNode,
+		QuoteNode,
+		ListNode,
+		ListItemNode,
+		AutoLinkNode,
+		LinkNode,
+		CodeNode,
+		CodeHighlightNode,
+		ImageNode,
+		YouTubeNode,
+		...customNodes,
+	],
+	theme,
+	onError: (error: Error) => console.error('[Lexical]', error),
+	editorState: initialEditorState,
+};
+
+function handleOnChange(editorState: EditorState, _editor: LexicalEditor) {
+	const json = editorState.toJSON();
+	value = JSON.stringify(json);
+}
+</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>
+
+	<div class="rounded-md border {error ? 'border-destructive' : ''}">
+		<Composer {initialConfig}>
+			<EditorToolbar />
+			<div class="relative">
+				<RichTextPlugin />
+				<ContentEditable className="max-w-none px-4 py-3 min-h-[200px] focus:outline-none" />
+			</div>
+			<HistoryPlugin />
+			<ListPlugin />
+			<LinkPlugin />
+			<AutoFocusPlugin />
+			<OnChangePlugin
+				onChange={handleOnChange}
+				ignoreHistoryMergeTagChange={true}
+				ignoreSelectionChange={true}
+			/>
+		</Composer>
+	</div>
+
+	{#if error}
+		<p class="mt-1 text-xs text-destructive">{error}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,33 @@
+<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>
+  <select
+    id={field.name}
+    bind:value
+    class="h-10 w-full rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring {error ? 'border-destructive' : ''}"
+  >
+    <option value="">Select {field.label}</option>
+    {#each field.options || [] as opt}
+      <option value={opt.value}>{opt.label || opt.value}</option>
+    {/each}
+  </select>
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,70 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+import { slugify } from '$lib/utils/slug.js'
+import { Lock, Unlock } from 'lucide-svelte'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+	formData = {},
+}: {
+	field: FieldSchema
+	value?: string
+	error?: string
+	formData: Record<string, any>
+} = $props()
+
+let isLocked = $state(true)
+
+// Auto-generate slug from source field
+$effect(() => {
+	if (isLocked && field.fromField && formData[field.fromField]) {
+		value = slugify(String(formData[field.fromField]))
+	}
+})
+
+function toggleLock() {
+	isLocked = !isLocked
+	if (isLocked && field.fromField && formData[field.fromField]) {
+		value = slugify(String(formData[field.fromField]))
+	}
+}
+</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>
+  <div class="flex items-center gap-2">
+    <input
+      id={field.name}
+      type="text"
+      bind:value
+      disabled={isLocked}
+      class="h-10 flex-1 rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-60 {error ? 'border-destructive' : ''}"
+      placeholder={field.label}
+    />
+    <button
+      type="button"
+      onclick={toggleLock}
+      class="flex h-10 w-10 items-center justify-center rounded-md border hover:bg-accent"
+      title={isLocked ? 'Edit manually' : 'Auto-generate'}
+    >
+      {#if isLocked}
+        <Lock class="h-4 w-4" />
+      {:else}
+        <Unlock class="h-4 w-4" />
+      {/if}
+    </button>
+  </div>
+  {#if field.fromField}
+    <p class="mt-1 text-xs text-muted-foreground">
+      {isLocked ? 'Auto-generated from ' + field.fromField : 'Manual editing enabled'}
+    </p>
+  {/if}
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+import type { FieldSchema, TabsFieldSchema } from '$lib/types/schema.js'
+import { resolveFieldComponent } from './registry.js'
+import type { Snippet } from 'svelte'
+
+let {
+	field,
+	formData = $bindable({}),
+	errors = {},
+	children,
+}: {
+	field: TabsFieldSchema
+	formData?: Record<string, any>
+	errors?: Record<string, string>
+	children?: Snippet
+} = $props()
+
+let activeTab = $state(0)
+</script>
+
+<div class="rounded-lg border border-border/60 bg-card">
+  <div class="flex border-b border-border/60">
+    {#each field.tabs as tab, i}
+      <button
+        type="button"
+        onclick={() => (activeTab = i)}
+        class="px-4 py-2.5 text-sm font-medium transition-colors {activeTab === i
+          ? 'border-b-2 border-primary text-foreground'
+          : 'text-muted-foreground hover:text-foreground'}"
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+
+  <div class="space-y-4 p-4">
+    {#if children}
+      {@render children()}
+    {:else if field.tabs[activeTab]}
+      {#each field.tabs[activeTab].fields as child (child.name)}
+        {@const Component = resolveFieldComponent(child)}
+        {#if Component}
+          <Component
+            field={child}
+            bind:value={formData[child.name]}
+            error={errors[child.name]}
+          />
+        {:else}
+          <div class="text-xs text-muted-foreground">
+            Unsupported field type: {child.type}
+          </div>
+        {/if}
+      {/each}
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+import { X } from 'lucide-svelte'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: string[]
+	error?: string
+} = $props()
+
+let tags = $derived(Array.isArray(value) ? value : [])
+let inputValue = $state('')
+
+function addTag(raw: string) {
+	const trimmed = raw.trim()
+	if (!trimmed) return
+	if (tags.includes(trimmed)) return
+	if (field.maxItems && tags.length >= field.maxItems) return
+	value = [...tags, trimmed]
+	inputValue = ''
+}
+
+function removeTag(index: number) {
+	value = tags.filter((_, i) => i !== index)
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === 'Enter' || e.key === ',') {
+		e.preventDefault()
+		addTag(inputValue)
+	}
+	if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
+		removeTag(tags.length - 1)
+	}
+}
+
+function handlePaste(e: ClipboardEvent) {
+	const text = e.clipboardData?.getData('text')
+	if (text?.includes(',')) {
+		e.preventDefault()
+		const parts = text.split(',')
+		for (const part of parts) {
+			addTag(part)
+		}
+	}
+}
+</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>
+  <div
+    class="flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border bg-background px-3 py-1.5 focus-within:ring-2 focus-within:ring-ring {error ? 'border-destructive' : ''}"
+  >
+    {#each tags as tag, i}
+      <span class="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
+        {tag}
+        <button type="button" onclick={() => removeTag(i)} class="hover:text-destructive">
+          <X class="h-3 w-3" />
+        </button>
+      </span>
+    {/each}
+    <input
+      id={field.name}
+      type="text"
+      bind:value={inputValue}
+      onkeydown={handleKeydown}
+      onpaste={handlePaste}
+      class="min-w-[120px] flex-1 bg-transparent py-1 text-sm outline-none placeholder:text-muted-foreground"
+      placeholder={tags.length === 0 ? `Add ${field.label.toLowerCase()}...` : 'Add more...'}
+    />
+  </div>
+  {#if field.maxItems}
+    <p class="mt-1 text-xs text-muted-foreground">{tags.length}/{field.maxItems} items</p>
+  {/if}
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,36 @@
+<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>
+  <input
+    id={field.name}
+    type="text"
+    bind:value
+    class="h-10 w-full rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring {error ? 'border-destructive' : ''}"
+    placeholder={field.label}
+    minlength={field.minLength}
+    maxlength={field.maxLength}
+    pattern={field.pattern}
+  />
+  {#if field.maxLength}
+    <p class="mt-1 text-xs text-muted-foreground">Max {field.maxLength} characters</p>
+  {/if}
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>