@quoin-cms/admin 0.1.0

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

@@ -0,0 +1,181 @@
+<script lang="ts">
+import { highlightJson } from '$lib/utils/json-highlight.js'
+import { Copy, Check, Pencil } from 'lucide-svelte'
+import { toast } from 'svelte-sonner'
+
+let {
+	formData = $bindable<Record<string, any>>({}),
+	collectionKey,
+	recordId = null,
+	mode,
+	onApply,
+}: {
+	formData?: Record<string, any>
+	collectionKey: string
+	recordId?: string | null
+	mode: 'create' | 'edit'
+	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))
+
+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 highlightedCurl = $derived(highlightJson(curlSnippet))
+
+function startEdit() {
+	draft = prettyJson
+	parseError = null
+	parsedDraft = null
+	editing = true
+}
+
+function onDraftInput() {
+	parseError = null
+	parsedDraft = null
+	try {
+		const parsed = JSON.parse(draft)
+		if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+			parseError = 'Top-level value must be a JSON object'
+			return
+		}
+		parsedDraft = parsed
+	} catch (e) {
+		parseError = (e as Error).message
+	}
+}
+
+function applyChanges() {
+	if (!parsedDraft) return
+	for (const k of Object.keys(formData)) delete formData[k]
+	for (const k of Object.keys(parsedDraft)) formData[k] = parsedDraft[k]
+	editing = false
+	onApply()
+	toast.success('JSON applied')
+}
+
+function cancelEdit() {
+	editing = false
+	draft = ''
+	parseError = null
+	parsedDraft = null
+}
+
+async function copyActive() {
+	const text = activeTab === 'json' ? prettyJson : curlSnippet
+	try {
+		await navigator.clipboard.writeText(text)
+		copied = true
+		setTimeout(() => (copied = false), 1500)
+	} 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
+			</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>
+		<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>
+		</div>
+	</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>
+			</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}
+	{: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>
+	{/if}
+</div>

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

@@ -0,0 +1,102 @@
+<script lang="ts">
+import { updateRecord } from '$lib/api/records.js'
+
+let {
+	collectionKey,
+	recordId,
+	formData,
+	interval = 2000,
+}: {
+	collectionKey: string
+	recordId: string | null
+	formData: Record<string, any>
+	interval?: number
+} = $props()
+
+let lastSaved = $state<Date | null>(null)
+let isSaving = $state(false)
+
+// --- Layer 1: Mount guard (skip first render) ---
+let mounted = false
+
+// --- Layer 2: Snapshot for deep comparison (plain vars, not reactive) ---
+// Strip volatile fields that change on every save (like Payload strips updatedAt)
+function snapshot(data: Record<string, any>): string {
+	const { updatedAt, createdAt, _versionId, _versionCreatedAt, ...rest } = data
+	return JSON.stringify(rest)
+}
+// svelte-ignore state_referenced_locally
+let previousSnapshot = snapshot(formData)
+
+// --- Layer 3: Debounce timer ---
+let timeoutId: ReturnType<typeof setTimeout> | undefined
+
+// --- Layer 4: Queue — only one save in flight, drop intermediaries ---
+let pendingSave: (() => Promise<void>) | null = null
+
+async function drainQueue() {
+	while (pendingSave) {
+		const task = pendingSave
+		pendingSave = null
+		await task()
+	}
+}
+
+function enqueue(task: () => Promise<void>) {
+	pendingSave = task // always overwrite — only latest matters
+	if (!isSaving) drainQueue()
+}
+
+// --- Main effect: watch formData, debounce, compare, enqueue ---
+$effect(() => {
+	const current = snapshot(formData)
+
+	// Skip initial mount (Payload's didMount guard)
+	if (!mounted) {
+		mounted = true
+		return
+	}
+
+	// No actual change (deep comparison on stripped data)
+	if (current === previousSnapshot) return
+	if (!recordId) return
+
+	// Debounce: reset timer on every change, fire after idle period
+	if (timeoutId) clearTimeout(timeoutId)
+
+	timeoutId = setTimeout(() => {
+		// Re-snapshot after debounce — coalesce rapid changes
+		const final = snapshot(formData)
+		if (final === previousSnapshot) return
+
+		previousSnapshot = final
+
+		enqueue(async () => {
+			isSaving = true
+			const result = await updateRecord(collectionKey, recordId!, formData, {
+				draft: true,
+				autosave: true,
+			})
+			isSaving = false
+			if (result.ok) {
+				lastSaved = new Date()
+			}
+		})
+	}, interval)
+})
+
+// --- Time ago display ---
+let timeAgo = $derived.by(() => {
+	if (!lastSaved) return ''
+	const secs = Math.floor((Date.now() - lastSaved.getTime()) / 1000)
+	if (secs < 5) return 'just now'
+	if (secs < 60) return `${secs}s ago`
+	return `${Math.floor(secs / 60)}m ago`
+})
+</script>
+
+{#if lastSaved}
+	<span class="text-[11px] text-muted-foreground">
+		{isSaving ? 'Saving...' : `Autosaved ${timeAgo}`}
+	</span>
+{/if}

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+import { resolve } from '$lib/router/index.svelte.js'
+import DocMetaStrip from './DocMetaStrip.svelte'
+import DocTabBar from './DocTabBar.svelte'
+import HeaderModeSwitch from './HeaderModeSwitch.svelte'
+import type { CollectionSchema } from '$lib/types/schema.js'
+
+let {
+	collection,
+	liveTitle,
+	record,
+	mode: docMode,
+	status,
+	saveLabel,
+	isDirty,
+	isSubmitting,
+	onSave,
+	onSaveAs,
+	onUnpublish,
+	onSchedule,
+	tabs,
+	activeTab = $bindable(0),
+	headerMode,
+	setHeaderMode,
+	hasDrafts = false,
+	hasSchedulePublish = false,
+	metaExtra,
+}: {
+	collection: CollectionSchema
+	liveTitle: string
+	record: Record<string, any> | null
+	mode: 'create' | 'edit'
+	status: string
+	saveLabel: string
+	isDirty: boolean
+	isSubmitting: boolean
+	onSave: () => void
+	onSaveAs: (status: 'draft' | 'published' | 'archived') => void
+	onUnpublish?: () => void
+	onSchedule?: () => void
+	tabs: { label: string }[]
+	activeTab?: number
+	headerMode: 'edit' | 'api'
+	setHeaderMode: (m: 'edit' | 'api') => void
+	hasDrafts?: boolean
+	hasSchedulePublish?: boolean
+	metaExtra?: import('svelte').Snippet
+} = $props()
+</script>
+
+<header class="sticky top-0 z-10 border-b border-border bg-background">
+	<!-- Row 1: breadcrumb + avatar -->
+	<div class="flex items-center justify-between border-b border-stone-200/60 px-7 py-3.5">
+		<div class="flex min-w-0 items-center gap-2.5 text-[13px] text-muted-foreground">
+			<a href={resolve(`/${collection.key}`)} class="font-medium hover:text-foreground">
+				{collection.labelPlural || collection.label}
+			</a>
+			<span class="text-stone-300">/</span>
+			<span class="truncate font-medium text-foreground">{liveTitle}</span>
+		</div>
+		{#if collection.versions && record?.id}
+			<a
+				href={resolve(`/${collection.key}/${record.id}/versions`)}
+				class="inline-flex items-center gap-1.5 rounded-lg border border-border/80 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+			>
+				Versions
+			</a>
+		{/if}
+		<HeaderModeSwitch mode={headerMode} setMode={setHeaderMode} />
+	</div>
+
+	<!-- Row 2: H1 -->
+	<div class="px-7 pb-2 pt-5">
+		<h1 class="font-display text-[28px] font-semibold leading-tight tracking-tight text-foreground">
+			{liveTitle}
+		</h1>
+	</div>
+
+	<!-- Row 3: meta + actions -->
+	<DocMetaStrip {record} mode={docMode} {status} {saveLabel} {isDirty} {isSubmitting} {hasDrafts} {hasSchedulePublish} onSave={onSave} onSaveAs={onSaveAs} {onUnpublish} {onSchedule} {metaExtra} />
+
+	<!-- Row 4: tabs -->
+	{#if headerMode === 'edit'}
+		<DocTabBar {tabs} bind:activeIndex={activeTab} />
+	{/if}
+</header>

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

@@ -0,0 +1,103 @@
+<script lang="ts">
+import PublishButton from './PublishButton.svelte'
+import { ExternalLink, MoreVertical } from 'lucide-svelte'
+import { formatDate } from '$lib/utils/format.js'
+
+import type { Snippet } from 'svelte'
+
+let {
+	record,
+	mode,
+	status,
+	saveLabel,
+	isDirty,
+	isSubmitting,
+	hasDrafts = false,
+	hasSchedulePublish = false,
+	onSave,
+	onSaveAs,
+	onUnpublish,
+	onSchedule,
+	metaExtra,
+}: {
+	record: Record<string, any> | null
+	mode: 'create' | 'edit'
+	status: string
+	saveLabel: string
+	isDirty: boolean
+	isSubmitting: boolean
+	hasDrafts?: boolean
+	hasSchedulePublish?: boolean
+	onSave: () => void
+	onSaveAs: (status: 'draft' | 'published' | 'archived') => void
+	onUnpublish?: () => void
+	onSchedule?: () => void
+	metaExtra?: Snippet
+} = $props()
+
+const statusColors: Record<string, string> = {
+	draft: 'bg-amber-100 text-amber-800 border border-amber-200',
+	published: 'bg-emerald-100 text-emerald-800 border border-emerald-200',
+	archived: 'bg-stone-200 text-stone-700 border border-stone-300',
+	scheduled: 'bg-yellow-100 text-yellow-800 border border-yellow-200',
+}
+let badgeClass = $derived(statusColors[status?.toLowerCase()] ?? 'bg-stone-100 text-stone-700 border border-stone-200')
+let statusLabel = $derived(status ? status.charAt(0).toUpperCase() + status.slice(1) : '—')
+</script>
+
+<div class="flex flex-wrap items-center justify-between gap-4 px-7 pb-4 pt-3.5">
+	<div class="flex flex-wrap items-center gap-5 text-xs text-muted-foreground">
+		{#if hasDrafts}
+		<span class="flex items-center gap-2">
+			<span class="text-[11px] uppercase tracking-wider text-stone-400">Status:</span>
+			<span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[11px] font-semibold {badgeClass}">
+				<span class="h-1.5 w-1.5 rounded-full bg-current opacity-70"></span>
+				{statusLabel}
+			</span>
+		</span>
+		{/if}
+		{#if mode === 'edit' && record}
+			{#if record.updatedAt}
+				<span>
+					<span class="text-stone-400">Last Modified:</span>
+					<span class="ml-1.5 font-medium text-stone-700">{formatDate(record.updatedAt)}</span>
+				</span>
+			{/if}
+			{#if record.createdAt}
+				<span>
+					<span class="text-stone-400">Created:</span>
+					<span class="ml-1.5 font-medium text-stone-700">{formatDate(record.createdAt)}</span>
+				</span>
+			{/if}
+		{/if}
+		{#if metaExtra}{@render metaExtra()}{/if}
+	</div>
+	<div class="flex items-center gap-2">
+		{#if hasDrafts && status === 'published' && mode !== 'create' && onUnpublish}
+			<button
+				type="button"
+				onclick={onUnpublish}
+				class="rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
+			>
+				Unpublish
+			</button>
+		{/if}
+		<button
+			type="button"
+			disabled
+			class="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-stone-500 opacity-50 shadow-sm"
+			title="Open in new tab (coming soon)"
+		>
+			<ExternalLink class="h-4 w-4" />
+		</button>
+		<PublishButton label={saveLabel} currentStatus={status} {isSubmitting} {isDirty} {hasSchedulePublish} onSave={onSave} onSaveAs={onSaveAs} {onSchedule} />
+		<button
+			type="button"
+			disabled
+			class="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-stone-500 opacity-50 shadow-sm"
+			title="More actions (coming soon)"
+		>
+			<MoreVertical class="h-4 w-4" />
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+let {
+	tabs,
+	activeIndex = $bindable(0),
+}: {
+	tabs: { label: string }[]
+	activeIndex?: number
+} = $props()
+</script>
+
+{#if tabs.length > 0}
+	<div class="flex gap-0.5 border-b border-border px-7">
+		{#each tabs as tab, i (i)}
+			<button
+				type="button"
+				onclick={() => (activeIndex = i)}
+				class="-mb-px border-b-2 px-4 py-3 text-[13px] font-medium transition-colors
+					{activeIndex === i
+						? 'border-primary text-primary'
+						: 'border-transparent text-muted-foreground hover:text-foreground'}"
+			>
+				{tab.label}
+			</button>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+let {
+	mode,
+	setMode,
+}: {
+	mode: 'edit' | 'api'
+	setMode: (m: 'edit' | 'api') => void
+} = $props()
+</script>
+
+<div class="inline-flex items-stretch overflow-hidden rounded-lg border border-border bg-card shadow-sm">
+	<button
+		type="button"
+		onclick={() => setMode('edit')}
+		class="px-3 py-1.5 text-xs font-medium transition-colors
+			{mode === 'edit'
+				? 'bg-primary text-primary-foreground'
+				: 'text-stone-600 hover:bg-secondary'}"
+	>
+		Edit
+	</button>
+	<button
+		type="button"
+		onclick={() => setMode('api')}
+		class="border-l border-border px-3 py-1.5 text-xs font-medium transition-colors
+			{mode === 'api'
+				? 'bg-primary text-primary-foreground'
+				: 'text-stone-600 hover:bg-secondary'}"
+	>
+		API
+	</button>
+</div>

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

@@ -0,0 +1,114 @@
+<script lang="ts">
+import { ChevronDown } from 'lucide-svelte'
+
+let {
+	label,
+	currentStatus,
+	isSubmitting = false,
+	isDirty = false,
+	disabled = false,
+	hasSchedulePublish = false,
+	onSave,
+	onSaveAs,
+	onSchedule,
+}: {
+	label: string
+	currentStatus: string
+	isSubmitting?: boolean
+	isDirty?: boolean
+	disabled?: boolean
+	hasSchedulePublish?: boolean
+	onSave: () => void
+	onSaveAs: (status: 'draft' | 'published' | 'archived') => void
+	onSchedule?: () => void
+} = $props()
+
+let menuOpen = $state(false)
+let menuRef = $state<HTMLDivElement | null>(null)
+
+function toggleMenu() {
+	menuOpen = !menuOpen
+}
+
+function selectStatus(status: 'draft' | 'published' | 'archived') {
+	menuOpen = false
+	onSaveAs(status)
+}
+
+function onWindowClick(e: MouseEvent) {
+	if (!menuOpen) return
+	if (menuRef && !menuRef.contains(e.target as Node)) {
+		menuOpen = false
+	}
+}
+</script>
+
+<svelte:window onclick={onWindowClick} />
+
+<div class="inline-flex items-center gap-2">
+	{#if isDirty}
+		<span class="inline-flex items-center gap-1.5 text-[11px] text-amber-700">
+			<span class="h-1.5 w-1.5 rounded-full bg-amber-600"></span>
+			Unsaved
+		</span>
+	{/if}
+	<div class="relative" bind:this={menuRef}>
+		<div class="inline-flex items-stretch overflow-hidden rounded-lg shadow-sm">
+			<button
+				type="button"
+				disabled={disabled || isSubmitting}
+				onclick={onSave}
+				class="bg-primary px-4 py-2 text-xs font-semibold tracking-wide text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60"
+			>
+				{isSubmitting ? 'Saving…' : label}
+			</button>
+			<button
+				type="button"
+				disabled={disabled || isSubmitting}
+				onclick={toggleMenu}
+				class="flex items-center border-l border-primary-foreground/15 bg-primary/90 px-2 text-primary-foreground hover:bg-primary disabled:opacity-60"
+				aria-label="Publish options"
+				aria-expanded={menuOpen}
+			>
+				<ChevronDown class="h-3.5 w-3.5" />
+			</button>
+		</div>
+		{#if menuOpen}
+			<div class="absolute right-0 z-20 mt-1 w-44 overflow-hidden rounded-lg border border-border bg-card shadow-lg">
+				<button
+					type="button"
+					onclick={() => selectStatus('draft')}
+					class="flex w-full items-center justify-between px-3 py-2 text-left text-xs text-foreground hover:bg-secondary"
+				>
+					Save as draft
+					{#if currentStatus === 'draft'}<span class="text-primary">●</span>{/if}
+				</button>
+				<button
+					type="button"
+					onclick={() => selectStatus('published')}
+					class="flex w-full items-center justify-between px-3 py-2 text-left text-xs text-foreground hover:bg-secondary"
+				>
+					Publish
+					{#if currentStatus === 'published'}<span class="text-primary">●</span>{/if}
+				</button>
+				{#if hasSchedulePublish && onSchedule}
+					<button
+						type="button"
+						onclick={() => { menuOpen = false; onSchedule?.() }}
+						class="flex w-full items-center justify-between px-3 py-2 text-left text-xs text-foreground hover:bg-secondary"
+					>
+						Schedule Publish
+					</button>
+				{/if}
+				<button
+					type="button"
+					onclick={() => selectStatus('archived')}
+					class="flex w-full items-center justify-between px-3 py-2 text-left text-xs text-foreground hover:bg-secondary"
+				>
+					Archive
+					{#if currentStatus === 'archived'}<span class="text-primary">●</span>{/if}
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>