@glw907/cairn-cms 0.33.0 → 0.35.0

package/dist/sveltekit/guard.js

@@ -4,6 +4,9 @@
 import { redirect, error } from '@sveltejs/kit';
 import { resolveSession } from '../auth/store.js';
 import { sessionCookieName } from '../auth/crypto.js';
+import { httpsRequiredPage } from './https-required-page.js';
+import { isUnsafeFormRequest, originMatches, validateCsrfToken } from './csrf.js';
+import { csrfRequiredPage } from './csrf-required-page.js';
 /** The login page and the auth endpoints are public; everything else under /admin is gated. */
 function isPublicAdminPath(pathname) {
     return pathname === '/admin/login' || pathname.startsWith('/admin/auth/');
@@ -11,6 +14,19 @@ function isPublicAdminPath(pathname) {
 function isAdminPath(pathname) {
     return pathname === '/admin' || pathname.startsWith('/admin/');
 }
+/**
+ * Local development (`wrangler dev`) legitimately speaks http; a deployed host does not. The hostname
+ * comes from the client `Host` header, so this is UX only: it decides whether to show the help page,
+ * never whether to grant access. The session gate below runs regardless. Do not make it an auth check.
+ */
+function isLocalHost(hostname) {
+    return (hostname === 'localhost' ||
+        hostname === '127.0.0.1' ||
+        hostname === '0.0.0.0' ||
+        hostname === '::1' ||
+        hostname === '[::1]' ||
+        hostname.endsWith('.localhost'));
+}
 /**
  * Attach the baseline security headers to an admin response. No full CSP; see the auth-hardening
  * design. frame-ancestors is the modern clickjacking control and the one CSP directive included.
@@ -23,12 +39,52 @@ function applySecurityHeaders(headers) {
     headers.set('Strict-Transport-Security', 'max-age=63072000; includeSubDomains');
     headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
 }
+/** A branded full-document admin page, hardened with the baseline headers and never cached. */
+function brandedAdminPage(status, body) {
+    const headers = new Headers({ 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-store' });
+    applySecurityHeaders(headers);
+    return new Response(body, { status, headers });
+}
+/** The hardened 400 help page for a deployed admin request that arrived over http. */
+function httpsRequiredResponse(url) {
+    const httpsUrl = new URL(url);
+    httpsUrl.protocol = 'https:';
+    return brandedAdminPage(400, httpsRequiredPage(httpsUrl.toString()));
+}
+/** A plain 403 for a non-admin cross-origin form POST, matching the framework's wording. */
+function csrfForbidden() {
+    return new Response('Cross-site POST form submissions are forbidden', {
+        status: 403,
+        headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+    });
+}
+/** The branded 403 for a failed admin double-submit token check. */
+function csrfRequiredResponse() {
+    return brandedAdminPage(403, csrfRequiredPage());
+}
 /** The SvelteKit `Handle` that guards `/admin/**` and hardens admin responses. */
 export function createAuthGuard() {
     return async function handle({ event, resolve }) {
         const { pathname } = event.url;
-        if (!isAdminPath(pathname))
+        // Rule 2 - non-admin: restore the framework's strict Origin check the consumer disabled when
+        // they set checkOrigin: false to hand cairn the admin CSRF authority.
+        if (!isAdminPath(pathname)) {
+            if (isUnsafeFormRequest(event.request) && !originMatches(event))
+                return csrfForbidden();
             return resolve(event);
+        }
+        // A deployed admin request over http never works: the magic-link form POST would fail the
+        // framework's CSRF guard with an opaque 403. Serve the help page instead, before resolve()
+        // runs that check. This covers the public login/auth paths too, since that is where the form
+        // posts. Local http (wrangler dev) is exempt.
+        if (event.url.protocol === 'http:' && !isLocalHost(event.url.hostname)) {
+            return httpsRequiredResponse(event.url);
+        }
+        // Rule 1 - admin: every unsafe form POST carries a valid double-submit token, else the branded
+        // 403 before resolve() runs. This covers the public login/auth posts too.
+        if (isUnsafeFormRequest(event.request) && !(await validateCsrfToken(event))) {
+            return csrfRequiredResponse();
+        }
         if (!isPublicAdminPath(pathname)) {
             const env = event.platform?.env ?? {};
             const id = event.cookies.get(sessionCookieName(event.url.protocol === 'https:'));

package/dist/sveltekit/https-required-page.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Render the full HTML document for the HTTPS-required page.
+ * @param httpsUrl The same request rebuilt over https, offered as the one-click recovery link.
+ */
+export declare function httpsRequiredPage(httpsUrl: string): string;

package/dist/sveltekit/https-required-page.js

@@ -0,0 +1,35 @@
+// The "this admin needs HTTPS" page. The auth guard serves it when a request reaches a deployed
+// Worker over http, which is the one case that makes the magic-link sign-in fail: the JS-free login
+// form posts over http, and the framework's CSRF guard rejects a form POST whose origin scheme does
+// not match, so the editor would otherwise hit an opaque 403. This page names the problem, says why
+// https is needed, and gives the exact Cloudflare fix. The shared shell lives in
+// static-admin-page.ts. See guard.ts.
+import { escapeHtml, renderStaticAdminPage } from './static-admin-page.js';
+/**
+ * Render the full HTML document for the HTTPS-required page.
+ * @param httpsUrl The same request rebuilt over https, offered as the one-click recovery link.
+ */
+export function httpsRequiredPage(httpsUrl) {
+    const href = escapeHtml(httpsUrl);
+    const inner = `
+  <span class="eyebrow">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+    Secure connection required
+  </span>
+  <h1>This admin needs a secure connection</h1>
+  <p>You opened this page over http. Sign-in only works over https, so open the secure version to continue.</p>
+
+  <a class="cta" href="${href}">
+    Open over HTTPS
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+  </a>
+
+  <div class="fix">
+    <h2>If you run this site</h2>
+    <p>Turn on Always Use HTTPS in Cloudflare. It upgrades every request to https before it reaches the site:</p>
+    <span class="path">SSL/TLS<span class="arrow">&rsaquo;</span>Edge Certificates<span class="arrow">&rsaquo;</span>Always Use HTTPS</span>
+    <p>Keep HSTS on too. The browser then stays on https and sign-in works.</p>
+  </div>
+`;
+    return renderStaticAdminPage({ title: 'HTTPS required · Cairn', innerHtml: inner });
+}

package/dist/sveltekit/static-admin-page.d.ts

@@ -0,0 +1,11 @@
+/** Escape a string for safe interpolation into HTML text and double-quoted attributes. */
+export declare function escapeHtml(value: string): string;
+/**
+ * Render a full self-contained admin page document. The caller supplies trusted inner HTML
+ * (eyebrow, heading, copy, CTA); the helper owns the head, the inlined style, the brand tile,
+ * and the footer.
+ */
+export declare function renderStaticAdminPage(opts: {
+    title: string;
+    innerHtml: string;
+}): string;

package/dist/sveltekit/static-admin-page.js

@@ -0,0 +1,195 @@
+// The shared shell for cairn's edge-served admin pages (HTTPS-required, CSRF-failed). Each is a
+// self-contained document with inlined Warm Stone tokens for both colour schemes and the system
+// font stack, served raw before SvelteKit renders. The cairn glyph is the same public-domain
+// Temaki mark the admin chrome uses. See docs/internal/admin-design-system.md.
+/** Escape a string for safe interpolation into HTML text and double-quoted attributes. */
+export function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+// The cairn stone-stack glyph (Temaki, CC0), drawn in currentColor like CairnLogo.svelte.
+const CAIRN_GLYPH = '<path d="M6.28 14C5.56 14 1 13.89 1 12.91C1 11.46 2.16 11.07 3.2 10.81C4.36 10.51 13.18 9.77 ' +
+    '13.76 10.07C14.46 10.43 13.52 12.49 12.44 12.77C11.28 13.07 10.21 14 8.48 14C7.05 14 9.69 14 ' +
+    '6.28 14ZM6.92 4.5C6.67 4.5 5 4.43 5 3.88C5 3.07 5.75 2.51 5.96 2.35C6.36 2.03 6.32 1.62 6.54 ' +
+    '1.27C6.84 0.79 7.61 0.5 7.88 0.5C8.1 0.5 8.75 0.9 9.23 1.42C9.45 1.66 10 2.77 10 3.12C10 4.22 ' +
+    '9.36 4.5 8.85 4.5C8.33 4.5 8.15 4.5 6.92 4.5ZM3.68 8.22C3 7.73 3.67 6.86 4.57 6.21C5.38 5.63 ' +
+    '5.92 5.96 6.79 5.7C8.33 5.24 9.02 5.72 9.02 5.72L10.9 6.82C12.03 7.63 10.99 7.67 10.38 8.56C9.79 ' +
+    '9.42 8.18 9.11 7.42 9.33C6.78 9.53 5.75 9.71 4.62 8.9L3.68 8.22Z"/>';
+// The verbatim rule set lifted from the original <style> block: the `:root` light tokens, the
+// `@media (prefers-color-scheme: dark)` block, and every rule through `.foot`. It already covers
+// every class both pages use (brand, eyebrow, cta, fix, path, foot).
+const SHARED_STYLE = `:root {
+  color-scheme: light;
+  --bg: oklch(96.5% 0.006 75);
+  --glow: oklch(52% 0.2 293 / 0.06);
+  --panel: oklch(99% 0.004 75);
+  --recessed: oklch(95% 0.008 75);
+  --ink: oklch(26% 0.014 75);
+  --muted: oklch(48% 0.01 75);
+  --subtle: oklch(42% 0.01 75);
+  --primary: oklch(52% 0.2 293);
+  --primary-content: oklch(98% 0.012 293);
+  --border: oklch(93% 0.008 75);
+  --shadow: 0 1px 2px oklch(28% 0.02 75 / 0.05), 0 18px 40px -12px oklch(28% 0.02 75 / 0.16);
+  --radius-box: 1rem;
+  --radius-field: 0.625rem;
+  --font: 'Figtree Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --bg: oklch(15.5% 0.009 75);
+    --glow: oklch(68% 0.18 293 / 0.1);
+    --panel: oklch(24% 0.01 75);
+    --recessed: oklch(20% 0.01 75);
+    --ink: oklch(93% 0.006 75);
+    --muted: oklch(72% 0.01 75);
+    --subtle: oklch(80% 0.008 75);
+    --primary: oklch(68% 0.18 293);
+    --primary-content: oklch(20% 0.04 293);
+    --border: oklch(30% 0.014 75);
+    --shadow: 0 1px 2px oklch(0% 0 0 / 0.35), 0 18px 40px -12px oklch(0% 0 0 / 0.55);
+  }
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  font-family: var(--font);
+  color: var(--ink);
+  background-color: var(--bg);
+  background-image: radial-gradient(80rem 50rem at 50% -20%, var(--glow), transparent 60%);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.55;
+}
+main {
+  width: 100%;
+  max-width: 30rem;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-box);
+  box-shadow: var(--shadow);
+  padding: 2.25rem;
+}
+.brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.75rem; }
+.brand .tile {
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.75rem;
+  background: var(--primary);
+  color: var(--primary-content);
+  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.12);
+}
+.brand .tile svg { width: 1.25rem; height: 1.25rem; }
+.brand .word {
+  font-weight: 700;
+  font-size: 1.25rem;
+  letter-spacing: -0.01em;
+}
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+  margin-bottom: 0.6rem;
+}
+.eyebrow svg { width: 0.85rem; height: 0.85rem; }
+h1 {
+  margin: 0 0 0.75rem;
+  font-size: 1.6rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+}
+p { margin: 0 0 1rem; color: var(--subtle); }
+.cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.25rem 0 0.5rem;
+  padding: 0.7rem 1.15rem;
+  border-radius: var(--radius-field);
+  background: var(--primary);
+  color: var(--primary-content);
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  box-shadow: 0 4px 14px -4px oklch(52% 0.2 293 / 0.5);
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+.cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px oklch(52% 0.2 293 / 0.55); }
+.cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+.cta svg { width: 1rem; height: 1rem; }
+.fix {
+  margin-top: 1.75rem;
+  padding: 1.1rem 1.2rem;
+  background: var(--recessed);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-field);
+}
+.fix h2 {
+  margin: 0 0 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+.fix p { margin: 0 0 0.65rem; font-size: 0.875rem; }
+.fix p:last-child { margin-bottom: 0; }
+.path {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--ink);
+  letter-spacing: 0.01em;
+  margin: 0 0 0.65rem;
+}
+.path .arrow { color: var(--muted); padding: 0 0.35rem; font-weight: 400; }
+.foot {
+  margin-top: 1.75rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--muted);
+}`;
+/**
+ * Render a full self-contained admin page document. The caller supplies trusted inner HTML
+ * (eyebrow, heading, copy, CTA); the helper owns the head, the inlined style, the brand tile,
+ * and the footer.
+ */
+export function renderStaticAdminPage(opts) {
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="robots" content="noindex, nofollow" />
+<title>${escapeHtml(opts.title)}</title>
+<style>
+${SHARED_STYLE}
+</style>
+</head>
+<body>
+<main>
+  <div class="brand">
+    <span class="tile"><svg viewBox="0 0 15 15" fill="currentColor" aria-hidden="true">${CAIRN_GLYPH}</svg></span>
+    <span class="word">Cairn</span>
+  </div>
+${opts.innerHtml}
+  <p class="foot">Powered by Cairn</p>
+</main>
+</body>
+</html>`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
   "sideEffects": [
@@ -30,6 +30,7 @@
     "check:package": "npm run package && publint --strict && attw --pack . --ignore-rules no-resolution cjs-resolves-to-esm internal-resolution-error",
     "check:reference": "npm run package && node scripts/reference-coverage.mjs",
     "check:docs": "node scripts/docs-links.mjs",
+    "check:prose": "node scripts/check-admin-prose.mjs",
     "prepare": "npm run package",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",

package/src/lib/auth/crypto.ts

@@ -14,6 +14,14 @@ export function sessionCookieName(secure: boolean): string {
   return secure ? `__Host-${COOKIE_BASE}` : COOKIE_BASE;
 }
 
+/** The CSRF double-submit cookie base name, __Host- prefixed when the cookie is Secure. */
+const CSRF_COOKIE_BASE = 'cairn_csrf';
+
+/** The CSRF cookie name, mirroring sessionCookieName: __Host- on https, bare on local http. */
+export function csrfCookieName(secure: boolean): string {
+  return secure ? `__Host-${CSRF_COOKIE_BASE}` : CSRF_COOKIE_BASE;
+}
+
 /** Magic-link tokens live 10 minutes. */
 export const TOKEN_TTL_MS = 10 * 60 * 1000;
 
@@ -41,6 +49,11 @@ export function generateSessionId(): string {
   return randomBase64Url(32);
 }
 
+/** A fresh 256-bit double-submit token, url-safe. */
+export function generateCsrfToken(): string {
+  return randomBase64Url(32);
+}
+
 /** The lowercase hex SHA-256 of a token, for storage and lookup. */
 export async function hashToken(token: string): Promise<string> {
   const data = new TextEncoder().encode(token);

package/src/lib/components/AdminLayout.svelte

@@ -7,8 +7,10 @@ flipped by the topbar toggle) and imports the self-contained Warm Stone theme, s
 identical on every host regardless of the site's own theme.
 -->
 <script lang="ts">
-  import { onMount, untrack, type Component, type Snippet } from 'svelte';
+  import { onMount, setContext, untrack, type Component, type Snippet } from 'svelte';
   import type { LayoutData } from '../sveltekit/content-routes.js';
+  import CsrfField from './CsrfField.svelte';
+  import { CSRF_CONTEXT_KEY } from './csrf-context.js';
   import { MenuIcon, LogOutIcon, SunIcon, MoonIcon, ChevronRightIcon, SearchIcon } from './admin-icons.js';
   import CairnLogo from './CairnLogo.svelte';
   import { cairnFaviconHref } from './cairn-favicon.js';
@@ -30,6 +32,10 @@ identical on every host regardless of the site's own theme.
 
   let { data, children }: Props = $props();
 
+  // Hand descendant forms a live getter for the CSRF token layoutLoad issued, so the field stays
+  // correct even if the token ever rotates mid-session.
+  setContext(CSRF_CONTEXT_KEY, () => data.csrf);
+
   // Persist an admin preference for a year, path-scoped to /admin so the cookie never reaches the
   // host's own pages.
   function writeAdminCookie(name: string, value: string) {
@@ -397,6 +403,7 @@ identical on every host regardless of the site's own theme.
             </div>
           </div>
           <form method="POST" action="/admin/auth/logout" class="mt-4">
+            <CsrfField token={data.csrf} />
             <button type="submit" class="btn btn-ghost btn-sm btn-block justify-start">
               <LogOutIcon class="h-4 w-4" /> Sign out
             </button>

package/src/lib/components/ConceptList.svelte

@@ -9,6 +9,7 @@ content sizes. The header New button opens a dialog holding the create form.
   import { slugify } from '../content/ids.js';
   import type { EntrySummary, ListData } from '../sveltekit/content-routes.js';
   import type { InboundLink } from '../content/manifest.js';
+  import CsrfField from './CsrfField.svelte';
   import DeleteDialog from './DeleteDialog.svelte';
   import CairnLogo from './CairnLogo.svelte';
   import { SearchIcon, ArrowUpIcon, ArrowDownIcon, ChevronsUpDownIcon, ChevronLeftIcon, ChevronRightIcon, PlusIcon, Trash2Icon } from './admin-icons.js';
@@ -202,6 +203,7 @@ content sizes. The header New button opens a dialog holding the create form.
                 <DeleteDialog conceptId={data.conceptId} id={entry.id} label={data.label} inboundLinks={deleteRefused.inboundLinks} />
               {:else}
                 <form method="POST" action="?/delete">
+                  <CsrfField />
                   <input type="hidden" name="id" value={entry.id} />
                   <button type="submit" class="btn btn-ghost btn-sm" aria-label="Delete {entry.title}">
                     <Trash2Icon class="h-4 w-4 text-error" />
@@ -246,6 +248,7 @@ content sizes. The header New button opens a dialog holding the create form.
       <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={() => createDialog?.close()}>✕</button>
     </div>
     <form method="POST" action="?/create" onsubmit={() => (creating = true)} class="flex flex-col gap-3">
+      <CsrfField />
       <label class="flex flex-col gap-1">
         <span class="text-sm font-medium">Title</span>
         <input class="input w-full" name="title" bind:value={title} required />

package/src/lib/components/ConfirmPage.svelte

@@ -6,11 +6,12 @@ in a hidden field and consumes nothing; only the explicit POST verifies (spec §
 <script lang="ts">
   import './cairn-admin.css';
   import CairnLogo from './CairnLogo.svelte';
+  import CsrfField from './CsrfField.svelte';
   import { cairnFaviconHref } from './cairn-favicon.js';
 
   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 };
+    /** The confirm load's data: the token to submit, the site name, an optional error, the CSRF token. */
+    data: { token: string; siteName: string; error: string | null; csrf: string };
   }
 
   let { data }: Props = $props();
@@ -41,6 +42,7 @@ in a hidden field and consumes nothing; only the explicit POST verifies (spec §
       <p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Confirm to finish signing in to {data.siteName}.</p>
       <form method="POST">
         <input type="hidden" name="token" value={data.token} />
+        <CsrfField token={data.csrf} />
         <button type="submit" class="btn btn-primary btn-block">Confirm sign-in</button>
       </form>
     {/if}

package/src/lib/components/CsrfField.svelte

@@ -0,0 +1,20 @@
+<!--
+@component
+A hidden CSRF double-submit field for an admin form. Pass `token` directly (the pre-auth pages do),
+or omit it inside the authed shell, where AdminLayout provides the token through context. A form that
+omits this field fails the guard's token check, which is the intended fail-closed signal.
+-->
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { CSRF_CONTEXT_KEY } from './csrf-context.js';
+
+  interface Props {
+    /** The CSRF token. Falls back to the admin context when omitted. */
+    token?: string;
+  }
+  let { token }: Props = $props();
+  const fromContext = getContext<(() => string) | undefined>(CSRF_CONTEXT_KEY);
+  const value = $derived(token ?? fromContext?.() ?? '');
+</script>
+
+<input type="hidden" name="csrf" value={value} />

package/src/lib/components/DeleteDialog.svelte

@@ -6,6 +6,7 @@ each linking to its edit page, so the author repoints or removes those links fir
 <dialog>, following the LinkPicker a11y conventions.
 -->
 <script lang="ts">
+  import CsrfField from './CsrfField.svelte';
   import type { InboundLink } from '../content/manifest.js';
 
   interface Props {
@@ -68,6 +69,7 @@ each linking to its edit page, so the author repoints or removes those links fir
     {:else}
       <p class="mb-3 text-sm">This cannot be undone.</p>
       <form method="POST" action="?/delete" class="flex justify-end gap-2">
+        <CsrfField />
         <input type="hidden" name="concept" value={conceptId} />
         <input type="hidden" name="id" value={id} />
         <button type="button" class="btn btn-sm" onclick={close}>Cancel</button>

package/src/lib/components/EditPage.svelte

@@ -6,6 +6,7 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
 -->
 <script lang="ts">
   import { untrack } from 'svelte';
+  import CsrfField from './CsrfField.svelte';
   import MarkdownEditor from './MarkdownEditor.svelte';
   import ComponentInsertDialog from './ComponentInsertDialog.svelte';
   import LinkPicker from './LinkPicker.svelte';
@@ -221,6 +222,7 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
 {/if}
 
 <form method="POST" action="?/save" onsubmit={() => (saving = true)} class="lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6">
+  <CsrfField />
   {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
 
   <div class="lg:order-1">

package/src/lib/components/LoginPage.svelte

@@ -8,12 +8,13 @@ the allowlist, so the page never leaks membership (spec §7.1).
   import './cairn-admin.css';
   import { onMount } from 'svelte';
   import CairnLogo from './CairnLogo.svelte';
+  import CsrfField from './CsrfField.svelte';
   import { cairnFaviconHref } from './cairn-favicon.js';
   import { warnIfChromeWrapped } from './chrome-guard.js';
 
   interface Props {
-    /** The login load's data: the site name and an optional error. */
-    data: { siteName: string; error: string | null };
+    /** The login load's data: the site name, an optional error, and the CSRF token. */
+    data: { siteName: string; error: string | null; csrf: string };
     /** The action result: `sent` is true once a request was accepted. */
     form: { sent?: boolean } | null;
   }
@@ -43,7 +44,7 @@ the allowlist, so the page never leaks membership (spec §7.1).
     </div>
 
     <h1 class="text-lg font-semibold">Sign in to {data.siteName}</h1>
-    <p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Enter your email and we'll send you a one-time sign-in link. No password to remember.</p>
+    <p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Enter your email. We'll send a one-time sign-in link.</p>
 
     {#if form?.sent}
       <div role="status" class="alert alert-success text-sm">
@@ -54,6 +55,7 @@ the allowlist, so the page never leaks membership (spec §7.1).
         <div role="alert" class="alert alert-error mb-3 text-sm">That link expired. Request a new one below.</div>
       {/if}
       <form method="POST" class="flex flex-col gap-3">
+        <CsrfField token={data.csrf} />
         <label class="flex flex-col gap-1">
           <span class="text-sm font-medium">Email</span>
           <input

package/src/lib/components/ManageEditors.svelte

@@ -6,6 +6,7 @@ last-owner anti-lockout rule itself is enforced server-side (editors-routes). Ac
 named `?/setRole`, `?/remove`, and `?/add` actions.
 -->
 <script lang="ts">
+  import CsrfField from './CsrfField.svelte';
   import type { Editor } from '../auth/types.js';
 
   interface Props {
@@ -45,6 +46,7 @@ named `?/setRole`, `?/remove`, and `?/add` actions.
           </td>
           <td class="flex justify-end gap-2">
             <form method="POST" action="?/setRole">
+              <CsrfField />
               <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}`}>
@@ -52,6 +54,7 @@ named `?/setRole`, `?/remove`, and `?/add` actions.
               </button>
             </form>
             <form method="POST" action="?/remove">
+              <CsrfField />
               <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
@@ -65,6 +68,7 @@ named `?/setRole`, `?/remove`, and `?/add` actions.
 </div>
 
 <form method="POST" action="?/add" class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 grid gap-3 p-4 shadow-[var(--cairn-shadow)] sm:grid-cols-[1fr_1fr_auto_auto] sm:items-end">
+  <CsrfField />
   <label class="flex flex-col gap-1">
     <span class="text-sm font-medium">Name</span>
     <input class="input" name="name" aria-label="Name" required />

package/src/lib/components/NavTree.svelte

@@ -8,6 +8,7 @@ validates on save.
 -->
 <script lang="ts">
   import { untrack } from 'svelte';
+  import CsrfField from './CsrfField.svelte';
   import { SortableList, sortItems } from '@rodrigodagostino/svelte-sortable-list';
   import type { SortableList as SortableListNS } from '@rodrigodagostino/svelte-sortable-list';
   import '@rodrigodagostino/svelte-sortable-list/styles.css';
@@ -98,6 +99,7 @@ validates on save.
 {/if}
 
 <form method="POST" action="?/save">
+  <CsrfField />
   <input type="hidden" name="tree" value={treeJson} />
 
   <div class="mb-2">

package/src/lib/components/RenameDialog.svelte

@@ -6,6 +6,8 @@ dated post keeps its date; only the slug changes. Built on a native <dialog>, fo
 DeleteDialog a11y conventions.
 -->
 <script lang="ts">
+  import CsrfField from './CsrfField.svelte';
+
   interface Props {
     /** The concept this entry belongs to, e.g. "posts". Posted with the confirm. */
     conceptId: string;
@@ -50,6 +52,7 @@ DeleteDialog a11y conventions.
       <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={close}>✕</button>
     </div>
     <form method="POST" action="?/rename" class="flex flex-col gap-3">
+      <CsrfField />
       <input type="hidden" name="concept" value={conceptId} />
       <input type="hidden" name="id" value={id} />
       <label class="flex flex-col gap-1">

package/src/lib/components/csrf-context.ts

@@ -0,0 +1,2 @@
+/** The Svelte context key AdminLayout uses to hand a CSRF-token getter to descendant admin forms. */
+export const CSRF_CONTEXT_KEY = 'cairn:csrf';

package/src/lib/components/index.ts

@@ -3,6 +3,7 @@
 export { default as AdminLayout } from './AdminLayout.svelte';
 export { default as LoginPage } from './LoginPage.svelte';
 export { default as ConfirmPage } from './ConfirmPage.svelte';
+export { default as CsrfField } from './CsrfField.svelte';
 export { default as ConceptList } from './ConceptList.svelte';
 export { default as EditPage } from './EditPage.svelte';
 export { default as ManageEditors } from './ManageEditors.svelte';