@quoin-cms/admin 0.1.0

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

@@ -0,0 +1,280 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+import { uploadFile, type UploadResult } from '$lib/api/files.js'
+import { formatFileSize } from '$lib/utils/format.js'
+import { toast } from 'svelte-sonner'
+import { X, Upload, Eye, FolderOpen } from 'lucide-svelte'
+import MediaLibrary from '../MediaLibrary.svelte'
+import { createRecord } from '$lib/api/records.js'
+
+interface FileValue {
+	url: string
+	alt: string
+	filename: string
+	mimeType: string
+	size: number
+}
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: any
+	error?: string
+} = $props()
+
+let isUploading = $state(false)
+let fileInput: HTMLInputElement
+let previewUrl = $state<string | null>(null)
+let mediaLibraryOpen = $state(false)
+
+// Parse value into FileValue items for display
+let items = $derived.by((): FileValue[] => {
+	if (!value) return []
+	// Handle JSON string from DB
+	let parsed = value
+	if (typeof parsed === 'string') {
+		try {
+			parsed = JSON.parse(parsed)
+		} catch {
+			return []
+		}
+	}
+	if (field.multiple) {
+		if (Array.isArray(parsed)) return parsed
+		return []
+	}
+	// Single file
+	if (typeof parsed === 'object' && parsed?.url) return [parsed]
+	return []
+})
+
+function isImage(mimeType: string): boolean {
+	return mimeType?.startsWith('image/') ?? false
+}
+
+async function handleUpload(e: Event) {
+	const target = e.target as HTMLInputElement
+	const files = target.files
+	if (!files?.length) return
+
+	isUploading = true
+	for (const file of files) {
+		const result = await uploadFile(file)
+		if (result.ok) {
+			const fv: FileValue = {
+				url: result.data.url,
+				alt: '',
+				filename: result.data.filename,
+				mimeType: result.data.mimeType,
+				size: result.data.size,
+			}
+			if (field.multiple) {
+				const current = Array.isArray(value) ? [...value] : []
+				value = [...current, fv]
+			} else {
+				value = fv
+			}
+			toast.success(`Uploaded ${file.name}`)
+			// Create media record for the centralized library (fire-and-forget)
+			try {
+				await createRecord('media', {
+					title: file.name,
+					alt: '',
+					filename: result.data.filename,
+					mimeType: result.data.mimeType,
+					size: result.data.size,
+					file: {
+						url: result.data.url,
+						filename: result.data.filename,
+						mimeType: result.data.mimeType,
+						size: result.data.size,
+					},
+				})
+			} catch {
+				// Silently ignore -- upload itself succeeded
+			}
+		} else {
+			toast.error(`Failed to upload ${file.name}: ${result.error}`)
+		}
+	}
+	isUploading = false
+	target.value = ''
+}
+
+function removeItem(index: number) {
+	if (field.multiple && Array.isArray(value)) {
+		value = value.filter((_: any, i: number) => i !== index)
+	} else {
+		value = null
+	}
+}
+
+function updateAlt(index: number, alt: string) {
+	if (field.multiple && Array.isArray(value)) {
+		value = value.map((v: FileValue, i: number) => (i === index ? { ...v, alt } : v))
+	} else if (value) {
+		value = { ...value, alt }
+	}
+}
+
+function openPreview(url: string) {
+	previewUrl = url
+}
+
+function closePreview() {
+	previewUrl = null
+}
+
+function handleMediaSelect(media: { url: string; alt: string; filename: string; mimeType: string; size: number }) {
+	const fv: FileValue = {
+		url: media.url,
+		alt: media.alt || '',
+		filename: media.filename,
+		mimeType: media.mimeType,
+		size: media.size,
+	}
+	if (field.multiple) {
+		const current = Array.isArray(value) ? [...value] : []
+		value = [...current, fv]
+	} else {
+		value = fv
+	}
+}
+</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>
+
+  <!-- Display uploaded files -->
+  {#if items.length > 0}
+    <div class="mb-2 space-y-2">
+      {#each items as item, index}
+        <div class="flex items-start gap-3 rounded-md border bg-muted/30 p-2">
+          {#if isImage(item.mimeType) && item.url}
+            <div class="relative">
+              <button
+                type="button"
+                onclick={() => openPreview(item.url)}
+                class="group relative h-16 w-16 shrink-0 overflow-hidden rounded"
+              >
+                <img src={item.url} alt={item.alt || item.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>
+            </div>
+          {: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">
+            <p class="text-xs font-medium">{item.filename}</p>
+            <p class="text-xs text-muted-foreground">{formatFileSize(item.size)}</p>
+            <div>
+              <label for="alt-{index}" class="mb-0.5 block text-xs font-medium text-muted-foreground">
+                Alt text
+              </label>
+              <input
+                id="alt-{index}"
+                type="text"
+                value={item.alt}
+                oninput={(e) => updateAlt(index, (e.target as HTMLInputElement).value)}
+                placeholder="Describe the image"
+                class="h-7 w-full rounded border bg-background px-2 text-xs"
+              />
+            </div>
+          </div>
+          <button
+            type="button"
+            onclick={() => removeItem(index)}
+            class="shrink-0 rounded p-1 text-muted-foreground hover:text-destructive"
+          >
+            <X class="h-4 w-4" />
+          </button>
+        </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" />
+    {#if isUploading}
+      Uploading...
+    {:else}
+      {items.length > 0 ? 'Add' : 'Upload'} File{field.multiple ? 's' : ''}
+    {/if}
+  </button>
+
+  <button
+    type="button"
+    onclick={() => (mediaLibraryOpen = true)}
+    class="inline-flex h-10 items-center gap-2 rounded-md border bg-background px-4 text-sm hover:bg-accent"
+  >
+    <FolderOpen class="h-4 w-4" />
+    Browse Media
+  </button>
+
+  <input
+    bind:this={fileInput}
+    type="file"
+    class="hidden"
+    onchange={handleUpload}
+    multiple={field.multiple || false}
+    accept={field.accept?.join(',')}
+  />
+
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>
+
+<MediaLibrary
+  bind:open={mediaLibraryOpen}
+  accept={field.accept || ['image/*']}
+  onSelect={handleMediaSelect}
+/>
+
+<!-- Image Preview Modal -->
+{#if previewUrl}
+  <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()}
+  >
+    <div class="relative max-h-[90vh] max-w-[90vw]">
+      <button
+        type="button"
+        onclick={closePreview}
+        class="absolute -right-2 -top-2 rounded-full bg-white p-2 text-black shadow-lg hover:bg-gray-100"
+      >
+        <X class="h-5 w-5" />
+      </button>
+      <button
+        type="button"
+        class="appearance-none border-0 bg-transparent p-0 cursor-pointer"
+        onclick={(e) => e.stopPropagation()}
+      >
+        <img
+          src={previewUrl}
+          alt="Preview"
+          class="max-h-[90vh] max-w-[90vw] rounded object-contain"
+        />
+      </button>
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,145 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+import { Plus, X } from 'lucide-svelte'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: string
+	error?: string
+} = $props()
+
+type KVPair = { key: string; value: string }
+
+// Parse value (string or object) into key-value pairs
+function parseToEntries(val: any): KVPair[] {
+	let obj: Record<string, any> = {}
+	if (typeof val === 'string') {
+		try {
+			obj = JSON.parse(val)
+		} catch {
+			return []
+		}
+	} else if (val && typeof val === 'object' && !Array.isArray(val)) {
+		obj = val
+	}
+	const entries = Object.entries(obj)
+	return entries.length > 0 ? entries.map(([k, v]) => ({ key: k, value: String(v) })) : []
+}
+
+let entries = $state<KVPair[]>(parseToEntries(value))
+
+// Sync entries back to the bound value as a JSON string
+function syncValue() {
+	const obj: Record<string, string> = {}
+	for (const e of entries) {
+		const k = e.key.trim()
+		if (k) obj[k] = e.value
+	}
+	value = JSON.stringify(obj)
+}
+
+// Re-parse when value changes externally (e.g. on initial load)
+let lastSyncedValue = $state(value)
+$effect(() => {
+	if (value !== lastSyncedValue) {
+		const parsed = parseToEntries(value)
+		// Only update entries if the parsed result is different
+		if (
+			JSON.stringify(parsed) !==
+			JSON.stringify(entries.map((e) => ({ key: e.key, value: e.value })))
+		) {
+			entries = parsed
+		}
+		lastSyncedValue = value
+	}
+})
+
+function addEntry() {
+	entries.push({ key: '', value: '' })
+}
+
+function removeEntry(index: number) {
+	entries.splice(index, 1)
+	syncValue()
+}
+
+function handleKeyInput(index: number, e: Event) {
+	entries[index].key = (e.target as HTMLInputElement).value
+	syncValue()
+}
+
+function handleValueInput(index: number, e: Event) {
+	entries[index].value = (e.target as HTMLInputElement).value
+	syncValue()
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === 'Enter') {
+		e.preventDefault()
+		addEntry()
+	}
+}
+</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="space-y-2">
+    {#if entries.length > 0}
+      <div class="grid grid-cols-[1fr_1fr_auto] gap-2 text-xs text-muted-foreground">
+        <span>Key</span>
+        <span>Value</span>
+        <span class="w-8"></span>
+      </div>
+    {/if}
+
+    {#each entries as entry, i}
+      <div class="grid grid-cols-[1fr_1fr_auto] gap-2">
+        <input
+          type="text"
+          value={entry.key}
+          oninput={(e) => handleKeyInput(i, e)}
+          onkeydown={handleKeydown}
+          class="h-9 rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring {error ? 'border-destructive' : ''}"
+          placeholder="key"
+        />
+        <input
+          type="text"
+          value={entry.value}
+          oninput={(e) => handleValueInput(i, e)}
+          onkeydown={handleKeydown}
+          class="h-9 rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring {error ? 'border-destructive' : ''}"
+          placeholder="value"
+        />
+        <button
+          type="button"
+          onclick={() => removeEntry(i)}
+          class="flex h-9 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+          title="Remove"
+        >
+          <X class="h-4 w-4" />
+        </button>
+      </div>
+    {/each}
+
+    <button
+      type="button"
+      onclick={addEntry}
+      class="inline-flex h-9 items-center gap-1.5 rounded-md border border-dashed px-3 text-sm text-muted-foreground hover:border-primary hover:text-primary"
+    >
+      <Plus class="h-4 w-4" />
+      Add entry
+    </button>
+  </div>
+
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: number | string | null
+	error?: string
+} = $props()
+
+function handleInput(e: Event) {
+	const target = e.target as HTMLInputElement
+	const v = target.value
+	if (v === '') {
+		value = null
+	} else {
+		value = field.integerOnly ? parseInt(v, 10) : parseFloat(v)
+	}
+}
+</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="number"
+    value={value ?? ''}
+    oninput={handleInput}
+    min={field.min}
+    max={field.max}
+    step={field.integerOnly ? 1 : 'any'}
+    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}
+  />
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+
+// PasswordField — obscured input for field.Text{Type:"password"}.
+// Phase 21 D-06 + Open Question 2 resolution: ship dedicated component to
+// avoid browser autofill leaking password chars into a <input type=text>.
+
+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}
+    name={field.name}
+    type="password"
+    bind:value
+    autocomplete="new-password"
+    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="leave empty to keep unchanged"
+    minlength={field.minLength}
+    maxlength={field.maxLength}
+  />
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>