@glw907/cairn-cms 0.5.0 → 0.6.0-rc.0

package/src/lib/components/EditPage.svelte

@@ -1,125 +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`) plus a Carta
-  // markdown editor whose preview runs the site's plugin set (passed as `preview`). Data comes
-  // from `editLoad` merged with `adminLayoutLoad` (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 { EditData } from '../sveltekit';
+  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 }: { data: EditData & { siteName: string }; preview: PreviewPlugins } = $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));
+  // `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.
-  // This is the kit-free equivalent of the per-site route's `$app/environment` `browser` guard.
-  let mounted = $state(false);
-  onMount(() => {
-    mounted = true;
-  });
+  const PREVIEW_KEY = 'cairn-admin:preview';
 
-  // svelte-ignore state_referenced_locally (form defaults from the initial load)
-  const fm = data.frontmatter as Record<string, unknown>;
+  $effect(() => {
+    // Restore the per-user preference once, on mount.
+    showPreview = localStorage.getItem(PREVIEW_KEY) === '1';
+  });
 
-  function fmString(key: string): string {
-    return typeof fm[key] === 'string' ? (fm[key] as string) : '';
+  function togglePreview() {
+    showPreview = !showPreview;
+    localStorage.setItem(PREVIEW_KEY, showPreview ? '1' : '0');
   }
-  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(', ') : '';
+
+  // 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);
+  });
+
+  // Coerce a frontmatter value to a string for text/date/textarea inputs.
+  function str(v: unknown): string {
+    return v == null ? '' : String(v);
   }
 </script>
 
-<svelte:head>
-  <title>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" class="text-sm opacity-70 hover:underline">← Back</a>
-    <h1 class="mt-1 text-2xl font-bold">{data.title}</h1>
-    <p class="text-sm opacity-60">{data.label} · {data.path}</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">
-  <input type="hidden" name="type" value={data.type} />
-  <input type="hidden" name="id" value={data.id} />
-
-  <fieldset class="grid gap-4 rounded-box border border-base-300 bg-base-100 p-6">
-    {#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={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}
-  </fieldset>
+<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}
 
-  <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="tabs" />
-    {:else}
-      <textarea bind:value={body} rows="20" class="textarea w-full font-mono"></textarea>
+  <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>
 
-  <div class="flex justify-end">
-    <button type="submit" class="btn btn-primary">Save &amp; commit</button>
-  </div>
+  <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>

package/src/lib/components/ManageEditors.svelte

@@ -0,0 +1,81 @@
+<!--
+@component
+The owner-gated editor management surface: a table of editors with role-flip and remove actions,
+and an add-editor form. The acting owner's own row disables its destructive controls; the
+last-owner anti-lockout rule itself is enforced server-side (editors-routes). Actions post to the
+named `?/setRole`, `?/remove`, and `?/add` actions.
+-->
+<script lang="ts">
+  import type { Editor } from '../auth/types.js';
+
+  interface Props {
+    /** The editors load's data, plus the site name. */
+    data: { editors: Editor[]; self: string; siteName: string };
+    /** The last action's result (an error message when it failed). */
+    form: { error?: string; ok?: boolean } | null;
+  }
+
+  let { data, form }: Props = $props();
+</script>
+
+<header class="mb-4">
+  <h1 class="text-xl font-semibold">Editors</h1>
+</header>
+
+{#if form?.error}
+  <div role="alert" class="alert alert-error mb-4 text-sm">{form.error}</div>
+{/if}
+
+<div class="overflow-x-auto rounded-box border border-base-300 bg-base-100 mb-6">
+  <table class="table">
+    <thead>
+      <tr><th scope="col">Name</th><th scope="col">Email</th><th scope="col">Role</th><th scope="col"><span class="sr-only">Actions</span></th></tr>
+    </thead>
+    <tbody>
+      {#each data.editors as editor (editor.email)}
+        {@const isSelf = editor.email === data.self}
+        <tr>
+          <td>{editor.displayName}</td>
+          <td>{editor.email}</td>
+          <td>
+            <span class="badge {editor.role === 'owner' ? 'badge-primary' : 'badge-ghost'}">{editor.role}</span>
+          </td>
+          <td class="flex justify-end gap-2">
+            <form method="POST" action="?/setRole">
+              <input type="hidden" name="email" value={editor.email} />
+              <input type="hidden" name="role" value={editor.role === 'owner' ? 'editor' : 'owner'} />
+              <button type="submit" class="btn btn-ghost btn-xs" disabled={isSelf} aria-label={`Toggle role for ${editor.displayName}`}>
+                {editor.role === 'owner' ? 'Make editor' : 'Make owner'}
+              </button>
+            </form>
+            <form method="POST" action="?/remove">
+              <input type="hidden" name="email" value={editor.email} />
+              <button type="submit" class="btn btn-ghost btn-xs text-error" disabled={isSelf} aria-label={`Remove ${editor.displayName}`}>
+                Remove
+              </button>
+            </form>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<form method="POST" action="?/add" class="rounded-box border border-base-300 bg-base-100 grid gap-3 p-4 sm:grid-cols-[1fr_1fr_auto_auto] sm:items-end">
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">Name</span>
+    <input class="input" name="name" aria-label="Name" required />
+  </label>
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">Email</span>
+    <input class="input" type="email" name="email" aria-label="Email" autocomplete="off" required />
+  </label>
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">Role</span>
+    <select class="select" name="role" aria-label="Role">
+      <option value="editor">editor</option>
+      <option value="owner">owner</option>
+    </select>
+  </label>
+  <button type="submit" class="btn btn-primary">Add editor</button>
+</form>

package/src/lib/components/MarkdownEditor.svelte

@@ -0,0 +1,81 @@
+<!--
+@component
+The `MarkdownEditor` seam (spec §6, seam 5): a thin wrapper over Carta exposing a bindable value
+and a cursor-insert callback. Carta and Shiki are client-only, so the editor mounts after the
+component does; until then the hidden field still carries the value so the form submits correctly.
+Swapping Carta for a bare CodeMirror editor stays a one-file change.
+-->
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  interface Props {
+    /** The markdown source; bindable so the parent reads edits back. */
+    value: string;
+    /** The hidden field name the value is mirrored to for form submit. */
+    name: string;
+    /** Carta extensions from the adapter, for the design-accurate preview. */
+    plugins?: unknown[];
+    /** Receives a `(text) => void` that inserts at the cursor; the palette calls it. */
+    registerInsert?: (insert: (text: string) => void) => void;
+  }
+
+  let { value = $bindable(), name, plugins = [], registerInsert }: Props = $props();
+
+  // Local structural type for the Carta editing surface this seam uses. carta-md re-exports its
+  // Svelte components from the package entry, so its `Carta` class is not reachable as a named
+  // export under NodeNext; a structural type stays compatible without naming it (the shape
+  // legacy/src/lib/editor.ts relied on, verified against carta-md@4.11).
+  interface CartaInput {
+    getSelection(): { start: number };
+    insertAt(position: number, text: string): void;
+    update(): boolean;
+  }
+  interface CartaLike {
+    input?: CartaInput;
+  }
+
+  let mounted = $state(false);
+  // Carta and the MarkdownEditor component load only in the browser, after mount, so the server
+  // bundle never pulls in Carta or Shiki (guarded by the carta-boundary test). The component keeps
+  // its real type, so `value` stays bindable; the Carta constructor is reached through a cast
+  // because the package entry does not surface the class by name.
+  let Editor = $state<(typeof import('carta-md'))['MarkdownEditor'] | null>(null);
+  let carta = $state<CartaLike | null>(null);
+
+  onMount(async () => {
+    const mod = await import('carta-md');
+    const CartaCtor = (
+      mod as unknown as { Carta: new (options: { extensions?: unknown[]; sanitizer: false }) => CartaLike }
+    ).Carta;
+    const instance = new CartaCtor({
+      extensions: plugins,
+      // Sanitization is the site adapter's concern; the seam passes raw markdown through.
+      sanitizer: false,
+    });
+    carta = instance;
+    Editor = mod.MarkdownEditor;
+    // Insert at the current cursor through carta.input once the editor is mounted; fall back to
+    // appending while input is not yet populated (the pre-mount textarea phase).
+    registerInsert?.((text: string) => {
+      const inp = instance.input;
+      if (inp) {
+        const pos = inp.getSelection().start;
+        const prefix = pos > 0 ? '\n\n' : '';
+        inp.insertAt(pos, `${prefix}${text}`);
+        inp.update();
+      } else {
+        value = value ? `${value}\n\n${text}` : text;
+      }
+    });
+    mounted = true;
+  });
+</script>
+
+<input type="hidden" {name} value={value} />
+
+{#if mounted && Editor && carta}
+  {@const EditorComponent = Editor}
+  <EditorComponent carta={carta as never} bind:value theme="default" mode="tabs" />
+{:else}
+  <textarea class="textarea min-h-64 w-full font-mono text-sm" bind:value aria-label="Markdown source"></textarea>
+{/if}