@glw907/cairn-cms 0.5.1 → 0.6.0-rc.1

package/src/lib/components/ComponentPalette.svelte

@@ -1,31 +1,47 @@
+<!--
+@component
+The insert-component palette: a dropdown listing the site's registered directive components
+(seam 3). Picking one inserts its template at the cursor through the editor's insert callback.
+Renders nothing when the site configures no registry.
+-->
 <script lang="ts">
-  // The insert-component palette (R10). Reads the site's component registry (R10a) and inserts a
-  // scaffolded directive snippet at the cursor via the `insert` callback. DaisyUI dropdown so it
-  // matches the Warm Stone admin theme. Shown only when the site supplies a non-empty registry; a
-  // plain-markdown site (e.g. 907.life) passes no registry and this renders nothing.
-  import type { ComponentRegistry } from '../render';
+  import type { ComponentRegistry } from '../render/registry.js';
 
-  let { registry, insert }: { registry?: ComponentRegistry; insert: (template: string) => void } =
-    $props();
+  interface Props {
+    /** The site's component registry; the palette derives its catalog from it. */
+    registry?: ComponentRegistry;
+    /** Insert a template at the editor's cursor. */
+    insert: (template: string) => void;
+  }
+
+  let { registry, insert }: Props = $props();
 
   const defs = $derived(registry?.defs ?? []);
+  let open = $state(false);
 </script>
 
 {#if defs.length > 0}
-  <div class="dropdown">
-    <button type="button" tabindex="0" class="btn btn-sm btn-ghost">Insert ▾</button>
-    <ul
-      class="dropdown-content menu z-10 mt-1 w-72 rounded-box border border-base-300 bg-base-100 p-2 shadow"
-    >
+  <div
+    class="dropdown"
+    class:dropdown-open={open}
+    role="presentation"
+    onkeydown={(e) => { if (e.key === 'Escape') open = false; }}
+  >
+    <button
+      type="button"
+      class="btn btn-sm btn-ghost"
+      aria-haspopup="listbox"
+      aria-expanded={open}
+      onclick={() => (open = !open)}
+    >Insert</button>
+    <ul class="dropdown-content menu rounded-box border border-base-300 bg-base-100 z-10 w-56 shadow" role="listbox">
       {#each defs as def (def.name)}
-        <li>
-          <button
-            type="button"
-            class="flex flex-col items-start gap-0.5"
-            onclick={() => insert(def.insertTemplate)}
-          >
-            <span class="font-medium">{def.label}</span>
-            <span class="text-xs opacity-60">{def.description}</span>
+        <li role="option" aria-selected={false}>
+          <button type="button" onclick={() => { insert(def.insertTemplate); open = false; }}>
+            <span class="flex flex-col items-start">
+              <span class="font-medium">{def.label}</span>
+              <span class="text-xs text-[var(--color-muted)]">{def.description}</span>
+            </span>
           </button>
         </li>
       {/each}

package/src/lib/components/ConceptList.svelte

@@ -0,0 +1,81 @@
+<!--
+@component
+One concept's list view: every entry as a link to its editor, with title, date, and a draft badge,
+plus a new-entry form. The slug auto-derives from the title until the author edits the slug field.
+-->
+<script lang="ts">
+  import { slugify } from '../content/ids.js';
+  import type { ListData } from '../sveltekit/content-routes.js';
+
+  interface Props {
+    /** The list load's data: the concept, its entries, and any inline or form errors. */
+    data: ListData;
+  }
+
+  let { data }: Props = $props();
+
+  let title = $state('');
+  let slug = $state('');
+  let slugEdited = $state(false);
+
+  const derivedSlug = $derived(slugEdited ? slug : slugify(title));
+  const slugPlaceholder = $derived(data.dated ? '2026-05-my-entry' : 'about-us');
+</script>
+
+<header class="mb-4 flex items-center justify-between">
+  <h1 class="text-xl font-semibold">{data.label}</h1>
+</header>
+
+{#if data.formError}
+  <div role="alert" class="alert alert-error mb-4 text-sm">{data.formError}</div>
+{/if}
+
+{#if data.error}
+  <div role="alert" class="alert alert-warning mb-4 text-sm">{data.error}</div>
+{/if}
+
+<div class="rounded-box border border-base-300 bg-base-100 mb-6">
+  {#if data.entries.length === 0}
+    <p class="p-4 text-sm opacity-70">No entries yet.</p>
+  {:else}
+    <ul class="menu w-full">
+      {#each data.entries as entry (entry.id)}
+        <li>
+          <a href={`/admin/${data.conceptId}/${entry.id}`} class="flex items-center justify-between">
+            <span>{entry.title}</span>
+            <span class="flex items-center gap-2 text-xs text-[var(--color-muted)]">
+              {#if entry.date}<span>{entry.date}</span>{/if}
+              {#if entry.draft}<span class="badge badge-warning badge-sm">Draft</span>{/if}
+            </span>
+          </a>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<form method="POST" action="?/create" class="rounded-box border border-base-300 bg-base-100 flex flex-col gap-3 p-4">
+  <h2 class="text-sm font-semibold">New entry</h2>
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">Title</span>
+    <input class="input" name="title" aria-label="Title" bind:value={title} required />
+  </label>
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">Slug</span>
+    <input
+      class="input"
+      name="slug"
+      aria-label="Slug"
+      placeholder={slugPlaceholder}
+      value={derivedSlug}
+      oninput={(e) => { slugEdited = true; slug = e.currentTarget.value; }}
+    />
+  </label>
+  {#if data.dated}
+    <label class="flex flex-col gap-1">
+      <span class="text-sm font-medium">Date</span>
+      <input class="input" type="date" name="date" aria-label="Date" />
+    </label>
+  {/if}
+  <button type="submit" class="btn btn-primary self-start">Create</button>
+</form>

package/src/lib/components/ConfirmPage.svelte

@@ -1,31 +1,34 @@
+<!--
+@component
+The scanner-safe confirm page. A GET renders this static "Confirm sign-in" button with the token
+in a hidden field and consumes nothing; only the explicit POST verifies (spec §7.1). JS-free.
+-->
 <script lang="ts">
-  // The scanner-safe confirm surface (C2). A GET renders this static page and consumes nothing.
-  // The token rides in a hidden field; only the explicit form POST (the route's default action,
-  // confirmSignIn) verifies it. Mail scanners GET URLs but don't submit forms, so prefetch can't
-  // burn the link. JS-free by design.
+  import './cairn-admin.css';
+
   interface Props {
+    /** The confirm load's data: the token to submit, the site name, and an optional error. */
     data: { token: string; siteName: string; error: string | null };
   }
+
   let { data }: Props = $props();
 </script>
 
 <svelte:head>
-  <title>Confirm sign-in · {data.siteName} CMS</title>
+  <meta name="robots" content="noindex, nofollow" />
 </svelte:head>
 
-<div class="mx-auto mt-16 max-w-md rounded-box border border-base-300 bg-base-100 p-8">
-  <h1 class="text-2xl font-bold">Confirm sign-in</h1>
-  <p class="mt-1 text-sm opacity-70">to {data.siteName} CMS</p>
-
-  {#if data.error || !data.token}
-    <div class="alert alert-error mt-6">
-      <span>This sign-in link is invalid or expired. Request a new one.</span>
-    </div>
-    <a href="/admin/login" class="btn btn-primary mt-6">Back to sign-in</a>
-  {:else}
-    <form method="POST" class="mt-6 flex flex-col gap-3">
-      <input type="hidden" name="token" value={data.token} />
-      <button type="submit" class="btn btn-primary">Confirm sign-in</button>
-    </form>
-  {/if}
+<div data-theme="cairn-admin" class="bg-base-200 text-base-content flex min-h-screen items-center justify-center p-4">
+  <div class="rounded-box border border-base-300 bg-base-100 w-full max-w-sm p-6 text-center shadow">
+    <h1 class="mb-4 text-lg font-semibold">Sign in to {data.siteName}</h1>
+    {#if data.error || !data.token}
+      <div role="alert" class="alert alert-error text-sm">This sign-in link is invalid or expired.</div>
+      <a href="/admin/login" class="btn btn-ghost btn-sm mt-4">Request a new link</a>
+    {:else}
+      <form method="POST">
+        <input type="hidden" name="token" value={data.token} />
+        <button type="submit" class="btn btn-primary btn-block">Confirm sign-in</button>
+      </form>
+    {/if}
+  </div>
 </div>

package/src/lib/components/EditPage.svelte

@@ -1,163 +1,182 @@
+<!--
+@component
+The differentiated editor: the per-concept frontmatter form (from `data.fields`) beside the Carta
+markdown editor and a live, design-accurate preview. The whole surface is one form posting to the
+`?/save` action; the preview toggle persists per user in localStorage (spec §7.6).
+-->
 <script lang="ts">
-  // The editor: a per-field frontmatter form (driven by the adapter's `fields`) beside a Carta
-  // markdown editor whose preview runs the site plugin set (`preview`). Content-forward layout:
-  // the editor is the prominent column, frontmatter sits in a side column (R4). A cairn control
-  // row hosts the insert-component palette (R10) and the preview toggle (R12); basic formatting
-  // stays on Carta's built-in toolbar (R11). Data comes from `editLoad` merged with the layout
-  // load (siteName); `carta-md` is a peer dependency.
-  import { onMount } from 'svelte';
-  import { Carta, MarkdownEditor } from 'carta-md';
-  import 'carta-md/default.css';
-  import { previewCartaOptions, type PreviewPlugins } from '../carta';
-  import type { CairnField } from '../adapter';
-  import type { ComponentRegistry } from '../render';
-  import type { EditData } from '../sveltekit';
-  import { cartaEditor } from '../editor';
-  import { dateInputValue } from '../frontmatter';
+  import { untrack } from 'svelte';
+  import MarkdownEditor from './MarkdownEditor.svelte';
   import ComponentPalette from './ComponentPalette.svelte';
+  import type { ComponentRegistry } from '../render/registry.js';
+  import type { EditData } from '../sveltekit/content-routes.js';
+  import type { TextareaField, TagsField, FreeTagsField } from '../content/types.js';
+  import { sanitizePreviewHtml } from '../render/sanitize.js';
 
-  let {
-    data,
-    preview,
-    registry,
-  }: { data: EditData & { siteName: string }; preview: PreviewPlugins; registry?: ComponentRegistry } =
-    $props();
+  interface Props {
+    /** The edit load's data, plus the site name for the heading. */
+    data: EditData & { siteName: string };
+    /** The site's component registry, for the insert palette. */
+    registry?: ComponentRegistry;
+    /** Carta preview plugins from the adapter, for the design-accurate preview. */
+    preview?: unknown[];
+    /** The site's design-accurate render pipeline; the preview pane sanitizes its output. */
+    renderPreview?: (md: string) => string | Promise<string>;
+  }
 
-  // Body is editable state; the Carta editor's preview runs the exact site plugin set, so it
-  // matches the live page. A hidden input carries the current value into the form.
-  // svelte-ignore state_referenced_locally (seeding from the initial load is intended)
-  let body = $state(data.body);
+  let { data, registry, preview = [], renderPreview }: Props = $props();
 
-  // svelte-ignore state_referenced_locally (the preview plugin set is fixed for the load)
-  const carta = new Carta(previewCartaOptions(preview));
-  const editor = cartaEditor(() => carta);
+  // `body` is local editor state seeded once from the prop; it diverges as the user types.
+  // untrack() captures the initial value without subscribing to future prop changes.
+  let body = $state(untrack(() => data.body));
+  let showPreview = $state(false);
+  let previewHtml = $state('');
+  let insert = $state.raw<(text: string) => void>(() => {});
 
-  // Carta's MarkdownEditor must not render on the worker (it pulls Shiki). onMount fires only in
-  // the browser, so SSR renders the plain textarea and the client swaps in the editor.
-  let mounted = $state(false);
+  const PREVIEW_KEY = 'cairn-admin:preview';
 
-  // Preview toggle (R12), persisted per user. 'split' shows the live preview beside the editor;
-  // 'tabs' foregrounds the editor full width with the preview one click away.
-  let mode = $state<'split' | 'tabs'>('split');
-  onMount(() => {
-    mounted = true;
-    const saved = localStorage.getItem('cairn-admin:preview');
-    if (saved === 'tabs' || saved === 'split') mode = saved;
+  $effect(() => {
+    // Restore the per-user preference once, on mount.
+    showPreview = localStorage.getItem(PREVIEW_KEY) === '1';
   });
+
   function togglePreview() {
-    mode = mode === 'split' ? 'tabs' : 'split';
-    localStorage.setItem('cairn-admin:preview', mode);
+    showPreview = !showPreview;
+    localStorage.setItem(PREVIEW_KEY, showPreview ? '1' : '0');
   }
 
-  // svelte-ignore state_referenced_locally (form defaults from the initial load)
-  const fm = data.frontmatter as Record<string, unknown>;
+  // Render the design-accurate preview as the body changes, debounced, and sanitize before the DOM.
+  // The sanitize is the one barrier between editor-authored markdown and the page (Carta is unsanitized).
+  // previewRun is a plain counter (not reactive state) used as a latest-wins guard: if a slow earlier
+  // async renderPreview call resolves after a newer one has started, the stale result is discarded.
+  let previewRun = 0;
+  $effect(() => {
+    if (!showPreview || !renderPreview) return;
+    const md = body;
+    const run = ++previewRun;
+    const handle = setTimeout(async () => {
+      try {
+        const html = await renderPreview(md);
+        const safe = await sanitizePreviewHtml(html);
+        if (run === previewRun) previewHtml = safe;
+      } catch {
+        if (run === previewRun) previewHtml = '';
+      }
+    }, 150);
+    return () => clearTimeout(handle);
+  });
 
-  function fmString(key: string): string {
-    return typeof fm[key] === 'string' ? (fm[key] as string) : '';
+  // Coerce a frontmatter value to a string for text/date/textarea inputs.
+  function str(v: unknown): string {
+    return v == null ? '' : String(v);
   }
-  function fmTags(key: string): Set<string> {
-    return new Set(Array.isArray(fm[key]) ? (fm[key] as unknown[]).map(String) : []);
-  }
-  function fmFreeTags(key: string): string {
-    return Array.isArray(fm[key]) ? (fm[key] as unknown[]).map(String).join(', ') : '';
-  }
-
-  // Kind-aware header: a story leads with its date; a page leads with its slug/path.
-  const subtitle = $derived(
-    data.kind === 'page'
-      ? `Page · ${data.path}`
-      : `${data.label} · ${dateInputValue(fm['date']) || data.path}`,
-  );
 </script>
 
-<svelte:head>
-  <title>{data.isNew ? `New ${data.label} entry` : `Edit ${data.title}`} · {data.siteName} CMS</title>
-</svelte:head>
-
-<div class="flex items-center justify-between gap-4">
+<header class="mb-4 flex items-center justify-between gap-2">
   <div>
-    <a href="/admin/{data.type}" class="text-sm opacity-70 hover:underline">← Back to {data.label}</a>
-    <h1 class="mt-1 text-2xl font-bold">{data.isNew ? `New ${data.label} entry` : data.title}</h1>
-    <p class="text-sm opacity-60">{subtitle}</p>
+    <h1 class="text-xl font-semibold">{data.title}</h1>
+    <p class="text-xs text-[var(--color-muted)]">{data.label}: {data.id}</p>
+  </div>
+  <div class="flex items-center gap-2">
+    <ComponentPalette {registry} {insert} />
+    <button
+      type="button"
+      class="btn btn-sm btn-ghost"
+      aria-expanded={showPreview}
+      aria-controls="cairn-preview"
+      onclick={togglePreview}
+    >
+      {showPreview ? 'Hide preview' : 'Show preview'}
+    </button>
   </div>
-</div>
+</header>
 
 {#if data.saved}
-  <div class="alert alert-success mt-6"><span>Saved. Committed to main; the site will redeploy.</span></div>
-{:else if data.error}
-  <div class="alert alert-error mt-6"><span>{data.error}</span></div>
+  <div role="status" class="alert alert-success mb-4 text-sm">Saved.</div>
+{/if}
+{#if data.error}
+  <div role="alert" class="alert alert-error mb-4 text-sm">{data.error}</div>
 {/if}
 
-<form method="POST" action="/admin/save" class="mt-6 flex flex-col gap-5 lg:grid lg:grid-cols-[1fr_20rem] lg:items-start">
-  <input type="hidden" name="type" value={data.type} />
-  <input type="hidden" name="id" value={data.id} />
+<form method="POST" action="?/save" class="lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6">
   {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
 
-  <!-- Editor column (content-forward: first and widest) -->
-  <div class="flex flex-col gap-3 lg:order-1">
-    <div class="flex items-center justify-between gap-2">
-      <ComponentPalette {registry} insert={(template) => editor.insertComponent(template)} />
-      <button type="button" class="btn btn-sm btn-ghost" onclick={togglePreview}>
-        {mode === 'split' ? 'Hide preview' : 'Show preview'}
-      </button>
-    </div>
-    <div class="rounded-box border border-base-300 bg-base-100 p-2">
-      <input type="hidden" name="body" value={body} />
-      {#if mounted}
-        <MarkdownEditor {carta} bind:value={body} {mode} />
-      {:else}
-        <textarea bind:value={body} rows="20" class="textarea w-full font-mono"></textarea>
-      {/if}
+  <div class="lg:order-1">
+    <div class="rounded-box border border-base-300 bg-base-100 overflow-hidden">
+      <MarkdownEditor bind:value={body} name="body" plugins={preview} registerInsert={(fn) => (insert = fn)} />
     </div>
+    {#if showPreview}
+      <section
+        id="cairn-preview"
+        aria-label="Preview"
+        class="rounded-box border border-base-300 bg-base-100 prose mt-4 max-w-none p-4"
+      >
+        {@html previewHtml}
+      </section>
+    {/if}
   </div>
 
-  <!-- Frontmatter side column -->
-  <fieldset class="grid gap-4 rounded-box border border-base-300 bg-base-100 p-6 lg:order-2">
-    {#each data.fields as field (field.name)}
-      {#if field.type === 'text' || field.type === 'date'}
-        <label class="flex flex-col gap-1">
-          <span class="text-sm font-medium">{field.label}</span>
-          <input
-            type={field.type === 'date' ? 'date' : 'text'}
-            name={field.name}
-            required={field.required}
-            value={field.type === 'date' ? dateInputValue(fm[field.name]) : fmString(field.name)}
-            class="input w-full"
-          />
-        </label>
-      {:else if field.type === 'textarea'}
-        <label class="flex flex-col gap-1">
-          <span class="text-sm font-medium">{field.label}</span>
-          <textarea name={field.name} required={field.required} rows={field.rows ?? 4}
-            class="textarea w-full">{fmString(field.name)}</textarea>
-        </label>
-      {:else if field.type === 'tags'}
-        <div class="flex flex-col gap-1">
-          <span class="text-sm font-medium">{field.label}</span>
-          <div class="flex flex-wrap gap-3">
-            {#each field.options as option (option)}
-              <label class="flex items-center gap-2 text-sm">
-                <input type="checkbox" name={field.name} value={option}
-                  checked={fmTags(field.name).has(option)} class="checkbox checkbox-sm" />
-                {option}
-              </label>
-            {/each}
-          </div>
-        </div>
-      {:else if field.type === 'freetags'}
-        <label class="flex flex-col gap-1">
-          <span class="text-sm font-medium">{field.label}</span>
-          <input type="text" name={field.name} value={fmFreeTags(field.name)}
-            placeholder={field.placeholder ?? 'comma, separated'} class="input w-full" />
-        </label>
-      {:else if field.type === 'boolean'}
-        <label class="flex items-center gap-2 text-sm font-medium">
-          <input type="checkbox" name={field.name} checked={fm[field.name] === true} class="checkbox checkbox-sm" />
-          {field.label}
-        </label>
-      {/if}
-    {/each}
-
-    <button type="submit" class="btn btn-primary mt-2">{data.isNew ? 'Create & commit' : 'Save & commit'}</button>
-  </fieldset>
+  <aside class="lg:order-2 mt-4 lg:mt-0">
+    <fieldset class="rounded-box border border-base-300 bg-base-100 flex flex-col gap-3 p-4">
+      <legend class="sr-only">Frontmatter</legend>
+      {#each data.fields as field (field.name)}
+        {#if field.type === 'textarea'}
+          {@const f = field as TextareaField}
+          <label class="flex flex-col gap-1">
+            <span class="text-sm font-medium">{f.label}</span>
+            <textarea class="textarea" name={f.name} aria-label={f.label} rows={f.rows ?? 3}>{str(data.frontmatter[f.name])}</textarea>
+          </label>
+        {:else if field.type === 'date'}
+          <label class="flex flex-col gap-1">
+            <span class="text-sm font-medium">{field.label}</span>
+            <input class="input" type="date" name={field.name} aria-label={field.label} value={str(data.frontmatter[field.name])} />
+          </label>
+        {:else if field.type === 'boolean'}
+          <label class="label cursor-pointer justify-start gap-2">
+            <input class="checkbox checkbox-sm" type="checkbox" name={field.name} aria-label={field.label} checked={data.frontmatter[field.name] === true} />
+            <span class="text-sm">{field.label}</span>
+          </label>
+        {:else if field.type === 'tags'}
+          {@const f = field as TagsField}
+          {@const selected = (data.frontmatter[f.name] ?? []) as string[]}
+          <fieldset class="fieldset">
+            <legend class="fieldset-legend">{f.label}</legend>
+            <div class="flex flex-wrap gap-2">
+              {#each f.options as option (option)}
+                <label class="label cursor-pointer justify-start gap-2">
+                  <input
+                    class="checkbox checkbox-sm"
+                    type="checkbox"
+                    name={f.name}
+                    value={option}
+                    checked={selected.includes(option)}
+                  />
+                  <span class="text-sm">{option}</span>
+                </label>
+              {/each}
+            </div>
+          </fieldset>
+        {:else if field.type === 'freetags'}
+          {@const f = field as FreeTagsField}
+          {@const tagValue = ((data.frontmatter[f.name] ?? []) as string[]).join(', ')}
+          <label class="flex flex-col gap-1">
+            <span class="text-sm font-medium">{f.label}</span>
+            <input
+              class="input"
+              name={f.name}
+              aria-label={f.label}
+              placeholder={f.placeholder}
+              value={tagValue}
+            />
+          </label>
+        {:else}
+          <label class="flex flex-col gap-1">
+            <span class="text-sm font-medium">{field.label}</span>
+            <input class="input" name={field.name} aria-label={field.label} value={str(data.frontmatter[field.name])} required={field.required} />
+          </label>
+        {/if}
+      {/each}
+      <button type="submit" class="btn btn-primary mt-2">Save</button>
+    </fieldset>
+  </aside>
 </form>

package/src/lib/components/LoginPage.svelte

@@ -1,64 +1,54 @@
+<!--
+@component
+The magic-link sign-in page. A plain form POST to the page's default action (the engine's
+`requestAction`); no client SDK. The success message is identical whether or not the email is on
+the allowlist, so the page never leaks membership (spec §7.1).
+-->
 <script lang="ts">
-  // The magic-link sign-in page. Requests a link via the better-auth client (client-side, same
-  // origin). To avoid enumeration the UI shows the same neutral copy whether or not the email is
-  // on the allowlist. The server only emails actual editors (see auth/config.ts send gate).
-  import { createAuthClient } from 'better-auth/svelte';
-  import { magicLinkClient } from 'better-auth/client/plugins';
-
-  // The browser client lives in the one component that needs it (requesting a link). Sign-out
-  // and editor management go through server endpoints, so no shared client module is needed.
-  // A component-local const keeps better-auth's deep client types out of the packaged .d.ts.
-  const authClient = createAuthClient({ plugins: [magicLinkClient()] });
+  import './cairn-admin.css';
 
   interface Props {
-    data: { siteName: string };
+    /** The login load's data: the site name and an optional error. */
+    data: { siteName: string; error: string | null };
+    /** The action result: `sent` is true once a request was accepted. */
+    form: { sent?: boolean } | null;
   }
-  let { data }: Props = $props();
-
-  let email = $state('');
-  let requested = $state(false);
-  let busy = $state(false);
 
-  async function request(event: SubmitEvent) {
-    event.preventDefault();
-    busy = true;
-    // The magic-link email points at our /admin/auth/confirm page (built in config.ts), not a
-    // GET-verify URL, so the result is the same regardless of allowlist membership.
-    await authClient.signIn.magicLink({ email });
-    busy = false;
-    requested = true;
-  }
+  let { data, form }: Props = $props();
 </script>
 
 <svelte:head>
-  <title>Sign in · {data.siteName} CMS</title>
+  <meta name="robots" content="noindex, nofollow" />
 </svelte:head>
 
-<div class="mx-auto mt-16 max-w-md rounded-box border border-base-300 bg-base-100 p-8">
-  <h1 class="text-2xl font-bold">{data.siteName} CMS</h1>
-  <p class="mt-1 text-sm opacity-70">Sign in with your editor email.</p>
+<div data-theme="cairn-admin" class="bg-base-200 text-base-content flex min-h-screen items-center justify-center p-4">
+  <div class="rounded-box border border-base-300 bg-base-100 w-full max-w-sm p-6 shadow">
+    <h1 class="mb-1 text-lg font-semibold">Sign in to {data.siteName}</h1>
+    <p class="mb-4 text-sm text-[var(--color-muted)]">Enter your email and we'll send a sign-in link.</p>
 
-  {#if requested}
-    <div class="alert alert-success mt-6">
-      <span>
-        If that address is on the editor list, a sign-in link is on its way. It expires in 10
-        minutes.
-      </span>
-    </div>
-  {:else}
-    <form onsubmit={request} class="mt-6 flex flex-col gap-3">
-      <input
-        type="email"
-        name="email"
-        bind:value={email}
-        required
-        autocomplete="email"
-        placeholder="you@example.com"
-        class="input w-full"
-      />
-      <button type="submit" class="btn btn-primary" disabled={busy}>
-        {busy ? 'Sending…' : 'Email me a sign-in link'}
-      </button>
-    </form>
-  {/if}
+    {#if form?.sent}
+      <div role="status" class="alert alert-success text-sm">
+        Check your email for a sign-in link. It expires in 10 minutes.
+      </div>
+    {:else}
+      {#if data.error}
+        <div role="alert" class="alert alert-error mb-3 text-sm">That link expired. Request a new one.</div>
+      {/if}
+      <form method="POST" class="flex flex-col gap-3">
+        <label class="flex flex-col gap-1">
+          <span class="text-sm font-medium">Email</span>
+          <input
+            type="email"
+            name="email"
+            required
+            autocomplete="email"
+            aria-label="Email"
+            class="input w-full"
+            placeholder="you@example.com"
+          />
+        </label>
+        <button type="submit" class="btn btn-primary">Send sign-in link</button>
+      </form>
+    {/if}
+  </div>
 </div>