@quoin-cms/admin 0.1.0

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

@@ -0,0 +1,110 @@
+<script lang="ts">
+import { CalendarClock } from 'lucide-svelte'
+
+let {
+	open = $bindable(false),
+	initialValue = '',
+	isSubmitting = false,
+	onSchedule,
+}: {
+	open?: boolean
+	initialValue?: string
+	isSubmitting?: boolean
+	onSchedule: (isoDate: string) => void
+} = $props()
+
+// Default: 1 hour from now, formatted for datetime-local input (YYYY-MM-DDTHH:mm)
+function defaultValue(): string {
+	const d = new Date(Date.now() + 60 * 60 * 1000)
+	const pad = (n: number) => String(n).padStart(2, '0')
+	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+
+// svelte-ignore state_referenced_locally
+let value = $state(initialValue || defaultValue())
+let error = $state('')
+
+$effect(() => {
+	if (open && !value) value = defaultValue()
+})
+
+function handleSubmit() {
+	error = ''
+	if (!value) {
+		error = 'Pick a date and time'
+		return
+	}
+	const picked = new Date(value)
+	if (isNaN(picked.getTime())) {
+		error = 'Invalid date'
+		return
+	}
+	if (picked.getTime() <= Date.now()) {
+		error = 'Time must be in the future'
+		return
+	}
+	onSchedule(picked.toISOString())
+}
+
+function close() {
+	open = false
+	error = ''
+}
+</script>
+
+{#if open}
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+		onclick={close}
+		role="presentation"
+	>
+		<div
+			class="w-full max-w-md rounded-lg border border-border bg-card shadow-xl"
+			onclick={(e) => e.stopPropagation()}
+			role="dialog"
+			aria-modal="true"
+		>
+			<div class="flex items-center gap-3 border-b border-border/60 px-5 py-4">
+				<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+					<CalendarClock class="h-5 w-5" />
+				</div>
+				<div>
+					<h2 class="text-sm font-semibold text-foreground">Schedule Publish</h2>
+					<p class="text-xs text-muted-foreground">Post will publish automatically at the selected time.</p>
+				</div>
+			</div>
+
+			<div class="px-5 py-5 space-y-2">
+				<label class="block text-xs font-medium text-foreground" for="schedule-datetime">Publish at</label>
+				<input
+					id="schedule-datetime"
+					type="datetime-local"
+					bind:value
+					class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+				/>
+				{#if error}
+					<p class="text-xs text-destructive">{error}</p>
+				{/if}
+			</div>
+
+			<div class="flex justify-end gap-2 border-t border-border/60 px-5 py-3">
+				<button
+					type="button"
+					onclick={close}
+					disabled={isSubmitting}
+					class="rounded-lg px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-secondary hover:text-foreground disabled:opacity-50"
+				>
+					Cancel
+				</button>
+				<button
+					type="button"
+					onclick={handleSubmit}
+					disabled={isSubmitting}
+					class="rounded-lg bg-primary px-4 py-1.5 text-xs font-semibold text-primary-foreground hover:bg-primary/90 disabled:opacity-60"
+				>
+					{isSubmitting ? 'Scheduling…' : 'Schedule'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { resolve } from '$lib/router/index.svelte.js'
+import { History } from 'lucide-svelte'
+
+let {
+	collectionKey,
+	recordId,
+}: {
+	collectionKey: string
+	recordId: string
+} = $props()
+</script>
+
+<a
+	href={resolve(`/${collectionKey}/${recordId}/versions`)}
+	class="inline-flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground"
+>
+	<History class="h-3.5 w-3.5" />
+	View version history
+</a>

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import BlockCard from './BlockCard.svelte';
+
+  interface Props {
+    field: { name: string; label?: string; labels?: { singular?: string; plural?: string } };
+    value: any[];
+    onChange: (next: any[]) => void;
+  }
+  let { field, value, onChange }: Props = $props();
+
+  const rows = $derived(Array.isArray(value) ? value : []);
+  const singular = $derived(field.labels?.singular ?? 'Item');
+
+  function genId(): string {
+    return crypto.randomUUID(); // browser UUIDv4 — server Sanitize will upgrade to v7 if absent
+  }
+
+  function add() {
+    onChange([...rows, { id: genId() }]);
+  }
+  function update(i: number, next: any) {
+    const out = [...rows];
+    out[i] = next;
+    onChange(out);
+  }
+  function remove(i: number) {
+    onChange(rows.filter((_, j) => j !== i));
+  }
+  function moveUp(i: number) {
+    if (i === 0) return;
+    const out = [...rows];
+    [out[i - 1], out[i]] = [out[i], out[i - 1]];
+    onChange(out);
+  }
+  function moveDown(i: number) {
+    if (i === rows.length - 1) return;
+    const out = [...rows];
+    [out[i], out[i + 1]] = [out[i + 1], out[i]];
+    onChange(out);
+  }
+</script>
+
+<div class="array-field">
+  {#if field.label}<label>{field.label}</label>{/if}
+  {#each rows as row, i (row.id)}
+    <BlockCard
+      title="{singular} #{i + 1}"
+      value={row}
+      canMoveUp={i > 0}
+      canMoveDown={i < rows.length - 1}
+      onChange={(next) => update(i, next)}
+      onMoveUp={() => moveUp(i)}
+      onMoveDown={() => moveDown(i)}
+      onDelete={() => remove(i)}
+    />
+  {/each}
+  <button type="button" onclick={add}>+ Add {singular}</button>
+</div>
+
+<style>
+  .array-field label { display: block; font-weight: 600; margin-bottom: 8px; }
+</style>

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+  interface Props {
+    title: string;     // e.g. "Block #1 · hero"
+    value: Record<string, any>;
+    canMoveUp: boolean;
+    canMoveDown: boolean;
+    onChange: (next: Record<string, any>) => void;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onDelete: () => void;
+  }
+  let { title, value, canMoveUp, canMoveDown, onChange, onMoveUp, onMoveDown, onDelete }: Props = $props();
+
+  // Strip `id` from the textarea (read-only system field).
+  const visible = $derived.by(() => {
+    const { id, ...rest } = value;
+    return rest;
+  });
+
+  let text = $state(JSON.stringify(visible, null, 2));
+  let parseError = $state('');
+
+  function save() {
+    try {
+      const parsed = JSON.parse(text);
+      parseError = '';
+      onChange({ ...parsed, id: value.id });
+    } catch (e: any) {
+      parseError = e.message;
+    }
+  }
+
+  // Re-sync textarea if value changes externally (e.g. reorder)
+  $effect(() => {
+    text = JSON.stringify(visible, null, 2);
+  });
+</script>
+
+<div class="card">
+  <header>
+    <span class="title">{title}</span>
+    <div class="actions">
+      <button type="button" disabled={!canMoveUp} onclick={onMoveUp} aria-label="Move up">▲</button>
+      <button type="button" disabled={!canMoveDown} onclick={onMoveDown} aria-label="Move down">▼</button>
+      <button type="button" onclick={onDelete} aria-label="Delete">×</button>
+    </div>
+  </header>
+  <textarea bind:value={text} rows="6" class:error={!!parseError}></textarea>
+  {#if parseError}
+    <p class="parse-error">{parseError}</p>
+  {/if}
+  <button type="button" onclick={save}>Save</button>
+</div>
+
+<style>
+  .card { border: 1px solid #ddd; border-radius: 4px; padding: 12px; margin-bottom: 12px; }
+  header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+  .title { font-weight: 600; font-family: monospace; font-size: 13px; }
+  .actions button { margin-left: 4px; }
+  textarea { width: 100%; font-family: monospace; font-size: 13px; }
+  textarea.error { border-color: #c00; }
+  .parse-error { color: #c00; font-size: 12px; margin: 4px 0; }
+</style>

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

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import BlockCard from './BlockCard.svelte';
+
+  interface BlockDef {
+    slug: string;
+    label: string;
+    fields?: any[];
+  }
+  interface Props {
+    field: {
+      name: string;
+      label?: string;
+      blocks: BlockDef[]; // resolved (registry pre-merged)
+      allowedBlocks?: string[];
+    };
+    value: any[];
+    onChange: (next: any[]) => void;
+  }
+  let { field, value, onChange }: Props = $props();
+
+  const rows = $derived(Array.isArray(value) ? value : []);
+  let pickerSlug = $state(field.blocks[0]?.slug ?? '');
+
+  function genId(): string {
+    return crypto.randomUUID();
+  }
+  function defaultsFor(slug: string): Record<string, any> {
+    return { id: genId(), blockType: slug };
+  }
+  function add() {
+    if (!pickerSlug) return;
+    onChange([...rows, defaultsFor(pickerSlug)]);
+  }
+  function update(i: number, next: any) {
+    const out = [...rows];
+    out[i] = next;
+    onChange(out);
+  }
+  function remove(i: number) {
+    onChange(rows.filter((_, j) => j !== i));
+  }
+  function moveUp(i: number) {
+    if (i === 0) return;
+    const out = [...rows];
+    [out[i - 1], out[i]] = [out[i], out[i - 1]];
+    onChange(out);
+  }
+  function moveDown(i: number) {
+    if (i === rows.length - 1) return;
+    const out = [...rows];
+    [out[i], out[i + 1]] = [out[i + 1], out[i]];
+    onChange(out);
+  }
+</script>
+
+<div class="blocks-field">
+  {#if field.label}<label>{field.label}</label>{/if}
+  {#each rows as row, i (row.id)}
+    <BlockCard
+      title="Block #{i + 1} · {row.blockType ?? '?'}"
+      value={row}
+      canMoveUp={i > 0}
+      canMoveDown={i < rows.length - 1}
+      onChange={(next) => update(i, next)}
+      onMoveUp={() => moveUp(i)}
+      onMoveDown={() => moveDown(i)}
+      onDelete={() => remove(i)}
+    />
+  {/each}
+  <div class="add-bar">
+    <select bind:value={pickerSlug}>
+      {#each field.blocks as b}
+        <option value={b.slug}>{b.label}</option>
+      {/each}
+    </select>
+    <button type="button" onclick={add}>+ Add Block</button>
+  </div>
+</div>
+
+<style>
+  .blocks-field label { display: block; font-weight: 600; margin-bottom: 8px; }
+  .add-bar { display: flex; gap: 8px; margin-top: 8px; }
+</style>

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: boolean
+	error?: string
+} = $props()
+</script>
+
+<div>
+  <label class="flex items-center gap-2 cursor-pointer">
+    <input
+      type="checkbox"
+      bind:checked={value}
+      class="h-4 w-4 rounded border accent-primary"
+    />
+    <span class="text-sm font-medium">{field.label}</span>
+  </label>
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: string
+	error?: string
+} = $props()
+
+// <input type="color"> requires a valid #rrggbb value
+let colorValue = $derived(value && /^#[0-9a-fA-F]{6}$/.test(value) ? value : '#000000')
+
+function handleColorInput(e: Event) {
+	value = (e.target as HTMLInputElement).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>
+  <div class="flex items-center gap-2">
+    <input
+      type="color"
+      value={colorValue}
+      oninput={handleColorInput}
+      class="h-10 w-12 cursor-pointer rounded border p-1"
+    />
+    <input
+      id={field.name}
+      type="text"
+      bind:value
+      class="h-10 flex-1 rounded-md border bg-background px-3 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-ring {error ? 'border-destructive' : ''}"
+      placeholder="#000000"
+      maxlength={7}
+    />
+  </div>
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { FieldSchema } from '$lib/types/schema.js'
+
+let {
+	field,
+	value = $bindable(),
+	error,
+}: {
+	field: FieldSchema
+	value?: string | null
+	error?: string
+} = $props()
+
+// Convert stored ISO 8601 string to the YYYY-MM-DDTHH:mm format
+// expected by <input type="datetime-local">.
+function toLocalInput(iso: string | null | undefined): string {
+	if (!iso) return ''
+	const d = new Date(iso)
+	if (isNaN(d.getTime())) return ''
+	const pad = (n: number) => String(n).padStart(2, '0')
+	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+
+let inputValue = $derived(toLocalInput(value as any))
+
+function onInput(e: Event) {
+	const v = (e.target as HTMLInputElement).value
+	if (!v) {
+		value = null
+		return
+	}
+	const d = new Date(v)
+	value = isNaN(d.getTime()) ? null : d.toISOString()
+}
+</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="datetime-local"
+    value={inputValue}
+    oninput={onInput}
+    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' : ''}"
+  />
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,30 @@
+<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="email"
+    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}
+  />
+  {#if error}
+    <p class="mt-1 text-xs text-destructive">{error}</p>
+  {/if}
+</div>