@quoin-cms/admin 0.1.0

package/src/lib/components/versions/FieldDiff.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { ChevronDown, ChevronRight } from 'lucide-svelte'
+	import { diffWords, toStringValue, valuesEqual } from '$lib/utils/diff.js'
+
+	let {
+		fieldName,
+		fieldLabel,
+		fieldType = 'text',
+		oldValue,
+		newValue,
+	}: {
+		fieldName: string
+		fieldLabel?: string
+		fieldType?: string
+		oldValue: unknown
+		newValue: unknown
+	} = $props()
+
+	let expanded = $state(false)
+
+	let isEqual = $derived(valuesEqual(oldValue, newValue))
+	let oldStr = $derived(toStringValue(oldValue))
+	let newStr = $derived(toStringValue(newValue))
+	let segments = $derived(diffWords(oldStr, newStr))
+</script>
+
+{#if !isEqual}
+	<div class="border-b border-stone-200">
+		<!-- label row -->
+		<div class="bg-stone-50 px-3 py-1.5">
+			<span class="text-[11px] font-semibold uppercase tracking-wide text-stone-500">
+				{fieldLabel || fieldName}
+			</span>
+		</div>
+
+		<!-- value row -->
+		{#if fieldType === 'file' || fieldType === 'upload'}
+			<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-0">
+				<div class="p-3">
+					{#if oldStr}
+						<img src={oldStr} alt="old" class="h-16 w-16 rounded object-cover" />
+					{:else}
+						<span class="text-xs text-stone-400">No file</span>
+					{/if}
+				</div>
+				<div class="w-px self-stretch bg-stone-200"></div>
+				<div class="p-3">
+					{#if newStr}
+						<img src={newStr} alt="new" class="h-16 w-16 rounded object-cover" />
+					{:else}
+						<span class="text-xs text-stone-400">No file</span>
+					{/if}
+				</div>
+			</div>
+		{:else if fieldType === 'checkbox'}
+			<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-0">
+				<div class="p-3">
+					<span
+						class="rounded-full px-2 py-0.5 text-xs font-medium {oldStr === 'true'
+							? 'bg-green-100 text-green-800'
+							: 'bg-red-100 text-red-800'}"
+					>
+						{oldStr}
+					</span>
+				</div>
+				<div class="w-px self-stretch bg-stone-200"></div>
+				<div class="p-3">
+					<span
+						class="rounded-full px-2 py-0.5 text-xs font-medium {newStr === 'true'
+							? 'bg-green-100 text-green-800'
+							: 'bg-red-100 text-red-800'}"
+					>
+						{newStr}
+					</span>
+				</div>
+			</div>
+		{:else if fieldType === 'richtext'}
+			<div class="px-3 py-2">
+				<button
+					class="flex items-center gap-1 text-xs text-stone-600 hover:text-stone-900"
+					onclick={() => (expanded = !expanded)}
+				>
+					{#if expanded}
+						<ChevronDown size={14} />
+					{:else}
+						<ChevronRight size={14} />
+					{/if}
+					<span class="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-700">
+						content changed
+					</span>
+				</button>
+
+				{#if expanded}
+					<div class="mt-2 grid grid-cols-[1fr_auto_1fr] gap-0">
+						<div class="p-2 text-sm leading-relaxed">
+							{#each segments as seg}
+								{#if seg.type === 'equal'}
+									<span>{seg.value}</span>
+								{:else if seg.type === 'delete'}
+									<span class="bg-red-100 line-through">{seg.value}</span>
+								{/if}
+							{/each}
+						</div>
+						<div class="w-px self-stretch bg-stone-200"></div>
+						<div class="p-2 text-sm leading-relaxed">
+							{#each segments as seg}
+								{#if seg.type === 'equal'}
+									<span>{seg.value}</span>
+								{:else if seg.type === 'add'}
+									<span class="bg-green-100">{seg.value}</span>
+								{/if}
+							{/each}
+						</div>
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="grid grid-cols-[1fr_auto_1fr] gap-0">
+				<div class="p-3 text-sm leading-relaxed">
+					{#each segments as seg}
+						{#if seg.type === 'equal'}
+							<span>{seg.value}</span>
+						{:else if seg.type === 'delete'}
+							<span class="bg-red-100 line-through">{seg.value}</span>
+						{/if}
+					{/each}
+				</div>
+				<div class="w-px self-stretch bg-stone-200"></div>
+				<div class="p-3 text-sm leading-relaxed">
+					{#each segments as seg}
+						{#if seg.type === 'equal'}
+							<span>{seg.value}</span>
+						{:else if seg.type === 'add'}
+							<span class="bg-green-100">{seg.value}</span>
+						{/if}
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}

package/src/lib/components/versions/RestoreModal.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	let {
+		open = $bindable(false),
+		hasDrafts,
+		isRestoring,
+		onRestore,
+	}: {
+		open: boolean
+		hasDrafts: boolean
+		isRestoring: boolean
+		onRestore: (asDraft: boolean) => void
+	} = $props()
+
+	let restoreAsPublished = $state(false)
+
+	function handleRestore() {
+		onRestore(!restoreAsPublished)
+	}
+
+	function handleCancel() {
+		open = false
+		restoreAsPublished = false
+	}
+</script>
+
+{#if open}
+	<div class="fixed inset-0 z-50 flex items-center justify-center">
+		<!-- backdrop -->
+		<button
+			class="absolute inset-0 bg-black/50"
+			onclick={handleCancel}
+			aria-label="Close modal"
+		></button>
+
+		<!-- modal -->
+		<div class="relative z-10 w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+			<h3 class="text-lg font-semibold text-stone-900">Restore Version</h3>
+			<p class="mt-2 text-sm text-stone-600">
+				This will replace current record data with data from this version.
+			</p>
+
+			{#if hasDrafts}
+				<label class="mt-4 flex items-center gap-2 text-sm text-stone-700">
+					<input type="checkbox" bind:checked={restoreAsPublished} class="rounded" />
+					Restore as published
+				</label>
+			{/if}
+
+			<div class="mt-6 flex justify-end gap-3">
+				<button
+					class="rounded-md px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-100"
+					onclick={handleCancel}
+					disabled={isRestoring}
+				>
+					Cancel
+				</button>
+				<button
+					class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+					onclick={handleRestore}
+					disabled={isRestoring}
+				>
+					{isRestoring ? 'Restoring...' : 'Restore'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

package/src/lib/components/versions/StatusPill.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	let { status = '', isLatest = false }: { status?: string; isLatest?: boolean } = $props()
+
+	let label = $derived.by(() => {
+		if (status === 'draft' && isLatest) return 'Current Draft'
+		if (status === 'draft') return 'Draft'
+		if (status === 'published' && isLatest) return 'Published'
+		if (status === 'published') return 'Previously Published'
+		return status || ''
+	})
+
+	let colorClass = $derived.by(() => {
+		if (status === 'draft' && isLatest) return 'bg-amber-100 text-amber-800'
+		if (status === 'published' && isLatest) return 'bg-green-100 text-green-800'
+		return 'bg-stone-100 text-stone-600'
+	})
+</script>
+
+{#if label}
+	<span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {colorClass}">{label}</span>
+{/if}

package/src/lib/context.svelte.ts

@@ -0,0 +1,156 @@
+/**
+ * Quoin admin runtime context.
+ *
+ * The context carries two things that every view, slot, and field needs
+ * access to without prop-drilling:
+ *
+ *   - `config`    — ResolvedQuoinConfig (apiBase, brand, fields, slots,
+ *                   views, pages — string path values)
+ *   - `importMap` — { [absPath]: () => import(absPath) }
+ *
+ * The shell calls `setQuoinContext()` at boot; consumers use
+ * `getQuoinContext()` to read it, or the focused helpers below.
+ *
+ * NOTE: only component PATHS are in config; actual component modules come
+ * from the importMap at resolution time. Using string paths keeps the
+ * config statically analyzable (Payload pattern).
+ */
+
+import { getContext, setContext } from 'svelte'
+import type { Component } from 'svelte'
+
+/* -------------------------------------------------------------------------- */
+/*  Types                                                                     */
+/* -------------------------------------------------------------------------- */
+
+export interface PageEntry {
+	path: string
+	nav?: {
+		label: string
+		icon?: string
+		group?: string
+	}
+}
+
+export interface ResolvedQuoinConfig {
+	apiBase: string
+	basePath: string
+	buildOutDir: string
+	devPort: number
+	brand: { name: string; logo: string | null }
+	fields: Record<string, string>
+	slots: Record<string, string>
+	views: Record<string, string>
+	pages: Record<string, PageEntry>
+}
+
+/** importMap entries are thunked dynamic imports. */
+export type ComponentLoader = () => Promise<{ default: Component<any> }>
+export type ImportMap = Record<string, ComponentLoader>
+
+export interface QuoinContext {
+	config: ResolvedQuoinConfig
+	importMap: ImportMap
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Context key + set/get                                                     */
+/* -------------------------------------------------------------------------- */
+
+const CONTEXT_KEY = Symbol('quoin.context')
+
+export function setQuoinContext(ctx: QuoinContext): void {
+	setContext(CONTEXT_KEY, ctx)
+}
+
+export function getQuoinContext(): QuoinContext {
+	const ctx = getContext<QuoinContext | undefined>(CONTEXT_KEY)
+	if (!ctx) {
+		throw new Error(
+			'quoin: context not initialized. Wrap your component tree in <AdminRoot> (or call setQuoinContext() directly in tests).',
+		)
+	}
+	return ctx
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Lookup helpers                                                            */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Resolve a slot name to the component override, or null if no override.
+ *
+ * Matching rules (in order):
+ *   1. Exact key ("collection.posts.row-actions")
+ *   2. Wildcard form ("collection.*.row-actions") — any dot-segment can be `*`
+ *
+ * The wildcard check replaces EACH non-first segment in turn with `*` and
+ * looks it up. For the majority case (flat names like "dashboard.actions"),
+ * this reduces to one extra lookup.
+ */
+export function resolveSlot(name: string, config: ResolvedQuoinConfig): string | null {
+	if (config.slots[name]) return config.slots[name]
+
+	const segments = name.split('.')
+	for (let i = 1; i < segments.length; i++) {
+		const withWildcard = [...segments]
+		withWildcard[i] = '*'
+		const key = withWildcard.join('.')
+		if (config.slots[key]) return config.slots[key]
+	}
+	return null
+}
+
+/**
+ * Resolve a field type to its component override (consumer's config.fields).
+ * Returns the override path if present; otherwise null and the caller falls
+ * back to the built-in registry.
+ */
+export function resolveField(type: string, config: ResolvedQuoinConfig): string | null {
+	return config.fields[type] ?? null
+}
+
+/**
+ * Resolve a view key like "collection.posts.edit" → consumer override path
+ * or null. Supports exact match + wildcards in the same style as resolveSlot.
+ */
+export function resolveView(key: string, config: ResolvedQuoinConfig): string | null {
+	if (config.views[key]) return config.views[key]
+
+	const segments = key.split('.')
+	for (let i = 1; i < segments.length; i++) {
+		const withWildcard = [...segments]
+		withWildcard[i] = '*'
+		const fullWildcard = withWildcard.join('.')
+		if (config.views[fullWildcard]) return config.views[fullWildcard]
+	}
+	return null
+}
+
+/**
+ * Memoized component loader. importMap's dynamic imports return a Promise;
+ * we cache the resolved module once it's first loaded to avoid re-imports
+ * across re-renders.
+ */
+const moduleCache = new Map<string, Component<any>>()
+
+export async function loadComponent(
+	path: string,
+	importMap: ImportMap,
+): Promise<Component<any>> {
+	const cached = moduleCache.get(path)
+	if (cached) return cached
+
+	const loader = importMap[path]
+	if (!loader) {
+		throw new Error(
+			`quoin: component path "${path}" referenced in config but missing from importMap. ` +
+				`If you just edited admin.config.ts, restart the dev server or rerun build:admin.`,
+		)
+	}
+
+	const mod = await loader()
+	const component = mod.default
+	moduleCache.set(path, component)
+	return component
+}

package/src/lib/router/index.svelte.ts

@@ -0,0 +1,282 @@
+/**
+ * Svelte 5 client-side router for @quoin-cms/admin.
+ *
+ * Pushstate-based. No SvelteKit dependency. The admin SPA mounts at a
+ * configurable base path (default `/admin`) and manages all navigation
+ * client-side. Go backend serves index.html for any URL under the base.
+ *
+ * Public API:
+ *   routeStore     — reactive Svelte 5 rune-store of current { path, params, query }
+ *   navigate(to)   — programmatic navigation, mirrors `goto()` from SvelteKit
+ *   resolve(path)  — prefix a path with the base, mirrors `resolve()` from SvelteKit
+ *   startRouter()  — boot the router (mount-time hook)
+ *   stopRouter()   — teardown (rare; mostly for tests)
+ *
+ * Route matching is kept in `matcher.ts` so callers can unit-test patterns
+ * without touching the history API.
+ */
+
+import { matchRoute, type RouteMatch, type RoutePattern } from './matcher.js'
+
+/* -------------------------------------------------------------------------- */
+/*  Config                                                                    */
+/* -------------------------------------------------------------------------- */
+
+let basePath = '/admin'
+
+/** Set the base path (call once at boot). */
+export function setBasePath(base: string): void {
+	basePath = base.endsWith('/') ? base.slice(0, -1) : base
+}
+
+/** Get the current base path. */
+export function getBasePath(): string {
+	return basePath
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Reactive route state                                                      */
+/* -------------------------------------------------------------------------- */
+
+export interface RouteState {
+	/** Current path relative to basePath (e.g. "/collections/posts"). */
+	path: string
+	/** Named params matched from the active route pattern. */
+	params: Record<string, string>
+	/** Query string parsed from window.location.search. */
+	query: URLSearchParams
+	/** Full pathname including basePath (e.g. "/admin/collections/posts"). */
+	fullPath: string
+}
+
+/**
+ * Svelte 5 rune-backed store. Components read via `route.path`, `route.params`
+ * inside `$effect`/`$derived` and re-render on navigation.
+ */
+class RouteStore {
+	#state = $state<RouteState>({
+		path: '/',
+		params: {},
+		query: new URLSearchParams(),
+		fullPath: basePath + '/',
+	})
+
+	get path(): string {
+		return this.#state.path
+	}
+
+	get params(): Record<string, string> {
+		return this.#state.params
+	}
+
+	get query(): URLSearchParams {
+		return this.#state.query
+	}
+
+	get fullPath(): string {
+		return this.#state.fullPath
+	}
+
+	/** Internal: update from the current window.location. */
+	_sync(patterns: RoutePattern[] = []): void {
+		const { pathname, search } = window.location
+		const relative = stripBase(pathname)
+		const query = new URLSearchParams(search)
+
+		// Match the first pattern that fits; if none, params stays empty.
+		let params: Record<string, string> = {}
+		for (const pattern of patterns) {
+			const m = matchRoute(relative, pattern)
+			if (m) {
+				params = m.params
+				break
+			}
+		}
+
+		this.#state = { path: relative, params, query, fullPath: pathname }
+	}
+
+	/** Internal: explicit state update (used by navigate with param hint). */
+	_set(next: RouteState): void {
+		this.#state = next
+	}
+}
+
+export const routeStore = new RouteStore()
+
+/* -------------------------------------------------------------------------- */
+/*  Navigation API                                                            */
+/* -------------------------------------------------------------------------- */
+
+/** Patterns are registered by AdminRoot so the store knows how to parse params. */
+let registeredPatterns: RoutePattern[] = []
+
+/** Register the patterns the app cares about (called once at boot). */
+export function registerRoutes(patterns: RoutePattern[]): void {
+	registeredPatterns = patterns
+	routeStore._sync(registeredPatterns)
+}
+
+/**
+ * Navigate programmatically. `to` may be:
+ *   - relative to basePath ("/login") — basePath is prepended
+ *   - already prefixed (e.g. output of resolve(), "/admin/login") — used as-is
+ *   - relative ("login") — basePath + "/" + to
+ *
+ * This reconciliation keeps `goto(resolve('/x'))` working like SvelteKit.
+ */
+export function navigate(to: string, options: { replace?: boolean } = {}): void {
+	const full = to.startsWith(basePath + '/') || to === basePath
+		? to
+		: to.startsWith('/')
+			? basePath + to
+			: basePath + '/' + to
+
+	// Skip no-op navigations (browser scrolls to top otherwise).
+	if (full === window.location.pathname + window.location.search) return
+
+	if (options.replace) {
+		window.history.replaceState({}, '', full)
+	} else {
+		window.history.pushState({}, '', full)
+	}
+	routeStore._sync(registeredPatterns)
+}
+
+/** Alias — matches SvelteKit's `goto()` so ported views keep their call sites. */
+export const goto = navigate
+
+/**
+ * Resolve a relative admin path to an absolute URL that preserves basePath.
+ * Mirrors SvelteKit's `$app/paths.resolve()` so porting route components is
+ * a one-word import swap.
+ */
+export function resolve(path: string): string {
+	if (path.startsWith(basePath)) return path
+	if (path.startsWith('/')) return basePath + path
+	return basePath + '/' + path
+}
+
+/* -------------------------------------------------------------------------- */
+/*  beforeNavigate — dirty-form guard                                         */
+/* -------------------------------------------------------------------------- */
+
+type BeforeNavigateCallback = (cancel: () => void) => void
+
+const beforeNavigateCallbacks = new Set<BeforeNavigateCallback>()
+
+/**
+ * Register a guard that fires before any navigation. Call the passed `cancel`
+ * fn to block the navigation (e.g. when a form is dirty).
+ * Returns an unregister function.
+ */
+export function beforeNavigate(cb: BeforeNavigateCallback): () => void {
+	beforeNavigateCallbacks.add(cb)
+	return () => beforeNavigateCallbacks.delete(cb)
+}
+
+function runBeforeGuards(): boolean {
+	let cancelled = false
+	const cancel = () => {
+		cancelled = true
+	}
+	for (const cb of beforeNavigateCallbacks) cb(cancel)
+	return !cancelled
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Boot / teardown                                                           */
+/* -------------------------------------------------------------------------- */
+
+let clickHandler: ((e: MouseEvent) => void) | null = null
+let popstateHandler: (() => void) | null = null
+
+/**
+ * Start the router. Installs a global click interceptor (for `<a>` links under
+ * the base path) and a popstate listener (for browser back/forward).
+ */
+export function startRouter(): void {
+	if (clickHandler || popstateHandler) return // already started
+
+	clickHandler = (e: MouseEvent) => {
+		if (e.defaultPrevented) return
+		if (e.button !== 0) return // only left click
+		if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return // modifier → let browser handle
+
+		const target = (e.target as Element | null)?.closest('a')
+		if (!target) return
+		if (target.target && target.target !== '_self') return
+		if (target.hasAttribute('download')) return
+		if (target.hasAttribute('data-external')) return
+
+		const href = target.getAttribute('href')
+		if (!href) return
+
+		// Only intercept same-origin, same-base links.
+		const url = new URL(href, window.location.origin)
+		if (url.origin !== window.location.origin) return
+		if (!url.pathname.startsWith(basePath)) return
+
+		if (!runBeforeGuards()) {
+			e.preventDefault()
+			return
+		}
+
+		e.preventDefault()
+		window.history.pushState({}, '', url.pathname + url.search)
+		routeStore._sync(registeredPatterns)
+	}
+
+	popstateHandler = () => {
+		routeStore._sync(registeredPatterns)
+	}
+
+	window.addEventListener('click', clickHandler)
+	window.addEventListener('popstate', popstateHandler)
+	routeStore._sync(registeredPatterns)
+}
+
+export function stopRouter(): void {
+	if (clickHandler) window.removeEventListener('click', clickHandler)
+	if (popstateHandler) window.removeEventListener('popstate', popstateHandler)
+	clickHandler = null
+	popstateHandler = null
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Helpers                                                                   */
+/* -------------------------------------------------------------------------- */
+
+function stripBase(pathname: string): string {
+	if (pathname === basePath) return '/'
+	if (pathname.startsWith(basePath + '/')) return pathname.slice(basePath.length)
+	return pathname
+}
+
+/* -------------------------------------------------------------------------- */
+/*  SvelteKit-compat `page` object                                            */
+/*                                                                            */
+/*  Preserves the `page.params.x` / `page.url.pathname` / `page.route.id`     */
+/*  shape so views ported from SvelteKit need only swap the import path.      */
+/*  Reactivity is inherited from routeStore's internal $state.                */
+/* -------------------------------------------------------------------------- */
+
+export const page = {
+	get params(): Record<string, string> {
+		return routeStore.params
+	},
+	get url(): URL {
+		// Read routeStore.fullPath first to establish a reactive dependency
+		// on the underlying $state. Without this, Svelte consumers wouldn't
+		// re-evaluate when navigation changes the URL.
+		// biome-ignore lint/correctness/noUnusedVariables: reactivity trigger
+		const _trigger = routeStore.fullPath
+		return new URL(window.location.href)
+	},
+	get route(): { id: string } {
+		return { id: routeStore.path }
+	},
+}
+
+export { matchRoute } from './matcher.js'
+export type { RouteMatch, RoutePattern } from './matcher.js'