@quoin-cms/admin 0.1.0

package/src/lib/components/DeleteDialog.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+import { AlertTriangle } from 'lucide-svelte'
+
+let {
+	open = $bindable(false),
+	title = 'Confirm Delete',
+	description = 'Are you sure? This action cannot be undone.',
+	isDeleting = false,
+	onConfirm,
+}: {
+	open: boolean
+	title?: string
+	description?: string
+	isDeleting?: boolean
+	onConfirm: () => void
+} = $props()
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center"
+    onkeydown={(e) => e.key === 'Escape' && (open = false)}
+  >
+    <!-- Backdrop -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="fixed inset-0 bg-black/40 backdrop-blur-[2px]" onclick={() => (open = false)}></div>
+
+    <!-- Dialog -->
+    <div class="relative z-10 w-full max-w-md rounded-xl border border-border/60 bg-card p-6 shadow-lg">
+      <div class="flex items-start gap-4">
+        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-destructive/10">
+          <AlertTriangle class="h-5 w-5 text-destructive" />
+        </div>
+        <div>
+          <h3 class="font-semibold" style="font-family: var(--font-display);">{title}</h3>
+          <p class="mt-1.5 text-sm leading-relaxed text-muted-foreground">{description}</p>
+        </div>
+      </div>
+      <div class="mt-6 flex justify-end gap-2.5">
+        <button
+          onclick={() => (open = false)}
+          class="h-9 rounded-lg border border-border/60 bg-card px-4 text-sm font-medium shadow-sm transition-all hover:bg-secondary"
+          disabled={isDeleting}
+        >
+          Cancel
+        </button>
+        <button
+          onclick={onConfirm}
+          disabled={isDeleting}
+          class="h-9 rounded-lg bg-destructive px-4 text-sm font-medium text-destructive-foreground shadow-sm transition-all hover:bg-destructive/90 disabled:opacity-50"
+        >
+          {isDeleting ? 'Deleting...' : 'Delete'}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}

package/src/lib/components/DocumentEditLayout.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+import DocHeader from './doc/DocHeader.svelte'
+import Autosave from './doc/Autosave.svelte'
+import ApiView from './doc/ApiView.svelte'
+import VersionHistory from './doc/VersionHistory.svelte'
+import ScheduleModal from './doc/ScheduleModal.svelte'
+import DynamicForm from './DynamicForm.svelte'
+import { resolveFieldComponent } from './fields/index.js'
+import { useDirtyState } from '$lib/utils/dirty.svelte.js'
+import { unpublishRecord } from '$lib/api/records.js'
+import { toast } from 'svelte-sonner'
+import type { CollectionSchema, FieldSchema } from '$lib/types/schema.js'
+
+let {
+	collection,
+	record = null,
+	mode,
+	isSubmitting = false,
+	errors = {},
+	onSave,
+}: {
+	collection: CollectionSchema
+	record?: Record<string, any> | null
+	mode: 'create' | 'edit'
+	isSubmitting?: boolean
+	errors?: Record<string, string>
+	onSave: (data: Record<string, any>) => void
+} = $props()
+
+function flatten(flds: FieldSchema[]): FieldSchema[] {
+	const out: FieldSchema[] = []
+	for (const f of flds) {
+		if (f.type === 'tabs') {
+			const tabs = (f as any).tabs ?? []
+			for (const t of tabs) out.push(...flatten(t.fields ?? []))
+			continue
+		}
+		if (f.type === 'row') {
+			out.push(...flatten((f as any).fields ?? []))
+			continue
+		}
+		out.push(f)
+	}
+	return out
+}
+
+function buildInitial(flds: FieldSchema[], src: Record<string, any>): Record<string, any> {
+	const data: Record<string, any> = {}
+	for (const f of flatten(flds)) {
+		if (src[f.name] !== undefined && src[f.name] !== null) {
+			let val = src[f.name]
+			if (f.type === 'tags' && typeof val === 'string') {
+				try { val = JSON.parse(val) } catch { val = [] }
+			}
+			data[f.name] = val
+		} else if ((f as any).defaultValue !== undefined) {
+			data[f.name] = (f as any).defaultValue
+		} else if (f.type === 'checkbox') {
+			data[f.name] = false
+		} else if (f.type === 'tags') {
+			data[f.name] = []
+		} else if (f.type === 'number' || f.type === 'file' || f.type === 'relationship' || f.type === 'richtext') {
+			data[f.name] = null
+		} else {
+			data[f.name] = ''
+		}
+	}
+	return data
+}
+
+// Build formData synchronously so child fields (RichTextField etc.) mount with
+// real values, not stale defaults. The $effect below handles reactive updates
+// when the user navigates to a different record.
+// svelte-ignore state_referenced_locally
+let formData = $state<Record<string, any>>(buildInitial(collection.fields, record ?? {}))
+// svelte-ignore state_referenced_locally
+let initialData = $state<Record<string, any>>(buildInitial(collection.fields, record ?? {}))
+// svelte-ignore state_referenced_locally
+let baselineKey = $state<string | null>(record?.id ?? '__new__')
+let headerMode = $state<'edit' | 'api'>('edit')
+function setHeaderMode(m: 'edit' | 'api') {
+	headerMode = m
+}
+
+// Rebuild only when navigating to a different record.
+$effect(() => {
+	const key = record?.id ?? '__new__'
+	if (baselineKey !== key) {
+		formData = buildInitial(collection.fields, record ?? {})
+		initialData = buildInitial(collection.fields, record ?? {})
+		baselineKey = key
+	}
+})
+
+const dirty = useDirtyState(
+	() => formData,
+	() => initialData
+)
+
+let liveTitle = $derived.by(() => {
+	const titleField = collection.admin?.useAsTitle
+	if (titleField && formData[titleField]) return String(formData[titleField])
+	return mode === 'create' ? `New ${collection.label}` : (record?.id ?? collection.label)
+})
+
+let hasDrafts = $derived(collection.versions?.drafts != null)
+let hasAutosave = $derived(collection.versions?.drafts?.autosave != null)
+let hasSchedulePublish = $derived(collection.versions?.drafts?.schedulePublish === true)
+let hasStatusField = $derived(hasDrafts)
+
+let scheduleModalOpen = $state(false)
+let isScheduling = $state(false)
+
+let status = $derived(formData._status ?? record?._status ?? 'draft')
+let saveLabel = $derived.by(() => {
+	if (!hasDrafts) return mode === 'create' ? 'Save' : 'Save'
+	if (mode === 'create') return status === 'published' ? 'Publish' : 'Create draft'
+	return status === 'published' ? 'Publish changes' : 'Save draft'
+})
+
+// Tabs collected from a field of type "tabs" if present
+let tabsField = $derived(
+	collection.fields.find((f: FieldSchema) => f.type === 'tabs') as any
+)
+let tabLabels = $derived<{ label: string }[]>(
+	tabsField ? (tabsField.tabs ?? []).map((t: any) => ({ label: t.label })) : []
+)
+let activeTab = $state(0)
+
+let sidebarFields = $derived(collection.admin?.sidebarFields ?? [])
+let sidebarSet = $derived(new Set(sidebarFields))
+let sideFields = $derived(collection.fields.filter((f: FieldSchema) => !f.hidden && sidebarSet.has(f.name)))
+
+function handleSave() {
+	const out: Record<string, any> = {}
+	for (const k of Object.keys(formData)) {
+		const v = formData[k]
+		if (v === undefined || v === null || v === '') continue
+		out[k] = v
+	}
+	initialData = { ...formData }
+	dirty.allowNavigation()
+	onSave(out)
+}
+
+function handleSaveAs(newStatus: 'draft' | 'published' | 'archived') {
+	if (hasDrafts) formData._status = newStatus
+	handleSave()
+}
+
+async function handleUnpublish() {
+	if (!record?.id) return
+	const result = await unpublishRecord(collection.key, record.id)
+	if (result.ok) {
+		formData._status = 'draft'
+		initialData = { ...formData }
+		record = result.data
+		toast.success('Record unpublished')
+	} else {
+		toast.error(result.error)
+	}
+}
+
+function openSchedule() {
+	scheduleModalOpen = true
+}
+
+function handleSchedule(isoDate: string) {
+	isScheduling = true
+	formData.publishAt = isoDate
+	formData._status = 'draft'
+	scheduleModalOpen = false
+	try {
+		handleSave()
+		toast.success(`Scheduled to publish at ${new Date(isoDate).toLocaleString()}`)
+	} finally {
+		isScheduling = false
+	}
+}
+</script>
+
+{#snippet autosaveMeta()}
+	{#if hasAutosave && headerMode === 'edit' && record?.id}
+		<Autosave
+			collectionKey={collection.key}
+			recordId={record.id}
+			{formData}
+			interval={collection.versions?.drafts?.autosave?.interval ?? 2000}
+		/>
+	{/if}
+{/snippet}
+
+<DocHeader
+	{collection}
+	{liveTitle}
+	{record}
+	{mode}
+	{status}
+	{saveLabel}
+	isDirty={dirty.isDirty}
+	{isSubmitting}
+	onSave={handleSave}
+	onSaveAs={handleSaveAs}
+	onUnpublish={handleUnpublish}
+	onSchedule={openSchedule}
+	tabs={tabLabels}
+	bind:activeTab
+	{headerMode}
+	{setHeaderMode}
+	{hasDrafts}
+	{hasSchedulePublish}
+	metaExtra={autosaveMeta}
+/>
+
+<ScheduleModal
+	bind:open={scheduleModalOpen}
+	initialValue={formData.publishAt ?? ''}
+	isSubmitting={isScheduling}
+	onSchedule={handleSchedule}
+/>
+
+
+{#if headerMode === 'api'}
+	<ApiView
+		bind:formData
+		collectionKey={collection.key}
+		recordId={record?.id ?? null}
+		{mode}
+		onApply={() => (headerMode = 'edit')}
+	/>
+{:else}
+	<div class="grid gap-9 px-7 py-8 {sideFields.length > 0 || (collection.versions && mode === 'edit' && record?.id) ? 'lg:grid-cols-[1fr_320px]' : ''}">
+		<div class="min-w-0">
+			<DynamicForm
+				fields={collection.fields}
+				initialData={record ?? {}}
+				{errors}
+				{sidebarFields}
+				{tabsField}
+				{activeTab}
+				bind:formData
+			/>
+		</div>
+
+		{#if sideFields.length > 0 || (collection.versions && mode === 'edit' && record?.id)}
+			<aside class="space-y-5 lg:sticky lg:top-[260px] lg:self-start">
+				{#each sideFields as f (f.name)}
+					{@const FieldComponent = resolveFieldComponent(f)}
+					{#if FieldComponent}
+						<FieldComponent field={f} bind:value={formData[f.name]} error={errors[f.name]} {formData} />
+					{/if}
+				{/each}
+
+				{#if collection.versions && mode === 'edit' && record?.id}
+					<VersionHistory
+						collectionKey={collection.key}
+						recordId={record.id}
+					/>
+				{/if}
+			</aside>
+		{/if}
+	</div>
+{/if}

package/src/lib/components/DynamicForm.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+import { resolveFieldComponent } from './fields/index.js'
+
+let {
+	fields,
+	initialData = {},
+	errors = {},
+	sidebarFields = [],
+	tabsField = undefined,
+	activeTab = 0,
+	formData = $bindable<Record<string, any>>({}),
+}: {
+	fields: FieldSchema[]
+	initialData?: Record<string, any>
+	errors?: Record<string, string>
+	sidebarFields?: string[]
+	tabsField?: any
+	activeTab?: number
+	formData?: Record<string, any>
+} = $props()
+
+let sidebarFieldSet = $derived(new Set(sidebarFields))
+let mainFields = $derived(
+	fields.filter((f) => !f.hidden && !sidebarFieldSet.has(f.name))
+)
+
+// formData is owned by the parent (DocumentEditLayout) and bound in.
+// DynamicForm is now a pure renderer.
+let localErrors = $state<Record<string, string>>({})
+let mergedErrors = $derived({ ...errors, ...localErrors })
+</script>
+
+{#snippet fieldRenderer(f: FieldSchema)}
+	{@const FieldComponent = resolveFieldComponent(f)}
+	{#if FieldComponent}
+		<FieldComponent
+			field={f}
+			bind:value={formData[f.name]}
+			error={mergedErrors[f.name]}
+			{formData}
+		/>
+	{:else}
+		<p class="text-sm text-muted-foreground">Unknown field type: {f.type}</p>
+	{/if}
+{/snippet}
+
+<div class="space-y-6">
+	{#each mainFields as f, i (f.name || `${f.type}-${i}`)}
+		{#if f.type === 'tabs'}
+			{#if tabsField && tabsField.tabs && tabsField.tabs[activeTab]}
+				{#each (tabsField.tabs[activeTab].fields ?? []) as cf (cf.name)}
+					{#if cf.type === 'row'}
+						<div class="grid gap-4" style="grid-template-columns: repeat({(cf.fields ?? []).length}, minmax(0, 1fr));">
+							{#each (cf.fields ?? []).filter((x: FieldSchema) => !x.hidden) as rf (rf.name)}
+								{@render fieldRenderer(rf)}
+							{/each}
+						</div>
+					{:else}
+						{@render fieldRenderer(cf)}
+					{/if}
+				{/each}
+			{/if}
+		{:else if f.type === 'row'}
+			<div class="grid gap-4" style="grid-template-columns: repeat({(f.fields ?? []).length}, minmax(0, 1fr));">
+				{#each (f.fields ?? []).filter((x: FieldSchema) => !x.hidden) as rf (rf.name)}
+					{@render fieldRenderer(rf)}
+				{/each}
+			</div>
+		{:else}
+			{@render fieldRenderer(f)}
+		{/if}
+	{/each}
+</div>

package/src/lib/components/KpiCard.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+type Format = 'int' | 'percent' | 'pp'
+
+let {
+	label,
+	current,
+	previous,
+	format = 'int',
+}: {
+	label: string
+	current: number | null
+	previous: number | null
+	format?: Format
+} = $props()
+
+const intFmt = new Intl.NumberFormat()
+
+const headline = $derived.by(() => {
+	if (current === null) return '—'
+	if (format === 'int') return intFmt.format(current)
+	if (format === 'percent') return (current * 100).toFixed(2) + '%'
+	// pp: treat current as percentage-point value already
+	return current.toFixed(2) + 'pp'
+})
+
+type Delta = {
+	text: string
+	tone: 'up' | 'down' | 'flat' | 'none'
+}
+
+const delta = $derived.by<Delta>(() => {
+	if (previous === null || previous === 0 || current === null) {
+		return { text: '—', tone: 'none' }
+	}
+	if (format === 'pp') {
+		const diff = current - previous
+		if (diff === 0) return { text: '—', tone: 'flat' }
+		const sign = diff > 0 ? '+' : ''
+		return {
+			text: sign + diff.toFixed(2) + 'pp',
+			tone: diff > 0 ? 'up' : 'down',
+		}
+	}
+	const pct = ((current - previous) / previous) * 100
+	if (pct === 0) return { text: '—', tone: 'flat' }
+	const sign = pct > 0 ? '+' : ''
+	return {
+		text: sign + pct.toFixed(1) + '%',
+		tone: pct > 0 ? 'up' : 'down',
+	}
+})
+
+const arrow = $derived(delta.tone === 'up' ? '▲' : delta.tone === 'down' ? '▼' : '')
+
+const chipClass = $derived(
+	delta.tone === 'up'
+		? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+		: delta.tone === 'down'
+			? 'border-red-200 bg-red-50 text-red-700'
+			: 'border-border/60 bg-muted text-muted-foreground',
+)
+</script>
+
+<div class="rounded-lg border border-border/60 bg-card p-4 shadow-sm">
+	<p class="text-sm font-medium text-muted-foreground">{label}</p>
+	<p class="mt-2 text-3xl font-semibold tracking-tight text-foreground">{headline}</p>
+	<div class="mt-2">
+		<span
+			class="inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium {chipClass}"
+		>
+			{#if arrow}<span aria-hidden="true">{arrow}</span>{/if}
+			<span>{delta.text}</span>
+		</span>
+	</div>
+</div>