@glw907/cairn-cms 0.33.0 → 0.35.0

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.35.0
+
+cairn now owns CSRF for the admin. A consuming site disables SvelteKit's global `checkOrigin`, and
+cairn's guard becomes the single authority. Every unsafe admin form POST must carry a valid
+`__Host-cairn_csrf` double-submit token (the cookie name is `cairn_csrf` bare on local http). The
+token is issued lazily and stably by the login, confirm, and admin shell loads, rendered as a hidden
+`csrf` field by the new `CsrfField` export, and validated centrally in the guard. A failed check
+serves a branded 403 page in place of the framework's raw text. The session cookie stays a second
+layer. The token tolerates a missing `Origin`, so the JS-free magic-link sign-in works from a
+browser that omits the header. The guard restores the strict `Origin === url.origin` check for the
+site's own non-admin form POSTs, so handing cairn the admin authority is not a net loss elsewhere.
+
+The `CsrfField` component is a new export from `@glw907/cairn-cms/components`. The `LoginPage` and
+`ConfirmPage` data now carries `csrf`, and `AdminLayout`'s `LayoutData` now carries `csrf`, which the
+shell provides to its descendant forms through context.
+
+Consumers must: set `csrf: { checkOrigin: false }` in `kit` in `svelte.config.js`. Without it the
+framework's global check rejects the JS-free auth POST and the admin sign-in fails.
+
+## 0.34.0
+
+A deployed admin request that arrives over http now gets a clear, branded help page instead of the
+framework's opaque CSRF 403. The magic-link sign-in posts a JS-free form, and the framework rejects a
+form POST unless the request carries a matching https origin, so an admin reached over http cannot sign
+in. The auth guard detects that case on a deployed host and serves a self-contained page that names the
+problem, links to the https version for one-click recovery, and gives the exact Cloudflare fix (Always
+Use HTTPS). The page matches the admin design system in light and dark. Local `wrangler dev` over http
+is exempt.
+
+The release also adds a `check:prose` gate (`scripts/check-admin-prose.mjs`, in CI) that scans the admin
+components' user-facing strings for AI-writing tells, since the component copy ships compiled and a
+consuming site's prose tooling never sees it.
+
+Consumers may: force HTTPS at the edge (Always Use HTTPS plus HSTS), which the deploy guide now requires.
+The help page is a fallback for the window before that is set, not a substitute.
+
 ## 0.33.0
 
 The admin isolates itself from host chrome. A dev-only guard in the admin and login roots walks the

package/dist/auth/crypto.d.ts

@@ -4,6 +4,8 @@
  * dev the prefix is dropped, since __Host- requires Secure and the dev cookie cannot set it.
  */
 export declare function sessionCookieName(secure: boolean): string;
+/** The CSRF cookie name, mirroring sessionCookieName: __Host- on https, bare on local http. */
+export declare function csrfCookieName(secure: boolean): string;
 /** Magic-link tokens live 10 minutes. */
 export declare const TOKEN_TTL_MS: number;
 /** Sessions live 30 days. */
@@ -14,5 +16,7 @@ export declare const SEND_COOLDOWN_MS: number;
 export declare function generateToken(): string;
 /** A fresh 256-bit session id, url-safe. */
 export declare function generateSessionId(): string;
+/** A fresh 256-bit double-submit token, url-safe. */
+export declare function generateCsrfToken(): string;
 /** The lowercase hex SHA-256 of a token, for storage and lookup. */
 export declare function hashToken(token: string): Promise<string>;

package/dist/auth/crypto.js

@@ -11,6 +11,12 @@ const COOKIE_BASE = 'cairn_session';
 export function sessionCookieName(secure) {
     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) {
+    return secure ? `__Host-${CSRF_COOKIE_BASE}` : CSRF_COOKIE_BASE;
+}
 /** Magic-link tokens live 10 minutes. */
 export const TOKEN_TTL_MS = 10 * 60 * 1000;
 /** Sessions live 30 days. */
@@ -33,6 +39,10 @@ export function generateToken() {
 export function generateSessionId() {
     return randomBase64Url(32);
 }
+/** A fresh 256-bit double-submit token, url-safe. */
+export function generateCsrfToken() {
+    return randomBase64Url(32);
+}
 /** The lowercase hex SHA-256 of a token, for storage and lookup. */
 export async function hashToken(token) {
     const data = new TextEncoder().encode(token);

package/dist/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/dist/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/dist/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/dist/components/ConfirmPage.svelte.d.ts

@@ -1,10 +1,11 @@
 import './cairn-admin.css';
 interface Props {
-    /** The confirm load's data: the token to submit, the site name, and an optional error. */
+    /** 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;
     };
 }
 /**

package/dist/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/dist/components/CsrfField.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    /** The CSRF token. Falls back to the admin context when omitted. */
+    token?: string;
+}
+/**
+ * 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.
+ */
+declare const CsrfField: import("svelte").Component<Props, {}, "">;
+type CsrfField = ReturnType<typeof CsrfField>;
+export default CsrfField;

package/dist/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/dist/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/dist/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/dist/components/LoginPage.svelte.d.ts

@@ -1,9 +1,10 @@
 import './cairn-admin.css';
 interface Props {
-    /** The login load's data: the site name and an optional error. */
+    /** 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: {

package/dist/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/dist/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/dist/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/dist/components/csrf-context.d.ts

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

package/dist/components/csrf-context.js

@@ -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/dist/components/index.d.ts

@@ -1,6 +1,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';

package/dist/components/index.js

@@ -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';

package/dist/sveltekit/auth-routes.d.ts

@@ -8,6 +8,7 @@ export declare function createAuthRoutes(config: AuthRoutesConfig): {
     loginLoad: (event: RequestContext) => {
         siteName: string;
         error: string | null;
+        csrf: string;
     };
     requestAction: (event: RequestContext) => Promise<{
         sent: true;
@@ -16,6 +17,7 @@ export declare function createAuthRoutes(config: AuthRoutesConfig): {
         token: string;
         siteName: string;
         error: string | null;
+        csrf: string;
     };
     confirmAction: (event: RequestContext) => Promise<never>;
     logoutAction: (event: RequestContext) => Promise<never>;

package/dist/sveltekit/auth-routes.js

@@ -6,6 +6,7 @@ import { requireOrigin, requireDb } from '../env.js';
 import { generateToken, generateSessionId, hashToken, TOKEN_TTL_MS, SESSION_TTL_MS, SEND_COOLDOWN_MS, sessionCookieName, } from '../auth/crypto.js';
 import { findEditor, issueToken, consumeToken, createSession, deleteSession, recentlyIssued } from '../auth/store.js';
 import { buildMagicLinkMessage, cloudflareSend } from '../email.js';
+import { issueCsrfToken } from './csrf.js';
 export function createAuthRoutes(config) {
     const send = config.send ?? cloudflareSend;
     /**
@@ -45,13 +46,18 @@ export function createAuthRoutes(config) {
         }
         return { sent: true };
     }
-    /** GET /admin/login. Public. Carries the site name and an optional `?error` for the form. */
+    /** GET /admin/login. Public. Carries the site name, an optional `?error`, and the CSRF token. */
     function loginLoad(event) {
-        return { siteName: config.branding.siteName, error: event.url.searchParams.get('error') };
+        return {
+            siteName: config.branding.siteName,
+            error: event.url.searchParams.get('error'),
+            csrf: issueCsrfToken(event),
+        };
     }
     /**
      * GET /admin/auth/confirm. Renders the confirm page and consumes nothing; only the POST
-     * verifies. Sets Referrer-Policy: no-referrer so the token does not leak to a referrer.
+     * verifies. Sets Referrer-Policy: no-referrer so the token does not leak to a referrer, and
+     * issues the CSRF token so the confirm form can render the hidden field.
      */
     function confirmLoad(event) {
         event.setHeaders({ 'Referrer-Policy': 'no-referrer' });
@@ -59,6 +65,7 @@ export function createAuthRoutes(config) {
             token: event.url.searchParams.get('token') ?? '',
             siteName: config.branding.siteName,
             error: event.url.searchParams.get('error'),
+            csrf: issueCsrfToken(event),
         };
     }
     /**

package/dist/sveltekit/content-routes.d.ts

@@ -1,6 +1,7 @@
 import { fail } from '@sveltejs/kit';
 import { type GithubKeyEnv } from '../github/credentials.js';
 import { type LinkTarget, type InboundLink } from '../content/manifest.js';
+import type { CookieJar } from './types.js';
 import type { CairnRuntime, FrontmatterField } from '../content/types.js';
 import type { Editor, Role } from '../auth/types.js';
 /** A sidebar concept entry: just enough to render the nav without shipping validators to the client. */
@@ -26,6 +27,8 @@ export interface LayoutData {
     /** The nav group labels the user has collapsed, from the persisted cookie. Read at SSR so a
      *  collapsed group renders collapsed with no flash. Empty when none are collapsed. */
     collapsedNav: string[];
+    /** The session's CSRF double-submit token, rendered as a hidden field in every admin form. */
+    csrf: string;
 }
 /** One row in a concept's list view. */
 export interface EntrySummary {
@@ -78,10 +81,9 @@ export interface ContentEvent {
     platform?: {
         env?: GithubKeyEnv;
     };
-    /** SvelteKit's cookie jar; the layout load reads the persisted admin theme. Optional for non-route callers. */
-    cookies?: {
-        get(name: string): string | undefined;
-    };
+    /** SvelteKit's cookie jar. The layout load reads the persisted admin theme and issues the CSRF
+     *  token. Optional for non-route callers. */
+    cookies?: CookieJar;
 }
 /** Injectable dependencies; tests stub the token mint to avoid signing a real key. */
 export interface ContentRoutesDeps {

package/dist/sveltekit/content-routes.js

@@ -13,6 +13,7 @@ import { listMarkdown, readRaw, commitFiles } from '../github/repo.js';
 import { cachedInstallationToken } from '../github/signing.js';
 import { emptyManifest, manifestEntryFromFile, parseManifest, serializeManifest, upsertEntry, removeEntry, inboundLinks } from '../content/manifest.js';
 import { CommitConflictError } from '../github/types.js';
+import { issueCsrfToken } from './csrf.js';
 /** The signed-in editor the guard resolved, or a login redirect. Kept local to decouple event shapes. */
 function sessionOf(event) {
     const editor = event.locals.editor;
@@ -47,6 +48,7 @@ export function createContentRoutes(runtime, deps = {}) {
             navLabel: runtime.navMenu?.label ?? null,
             theme,
             collapsedNav,
+            csrf: event.cookies ? issueCsrfToken({ url: event.url, cookies: event.cookies }) : '',
         };
     }
     /** Redirect /admin to the first concept's list (spec §7.6: land on the first concept). */

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

@@ -0,0 +1,2 @@
+/** Render the full HTML document for the CSRF-failed page. */
+export declare function csrfRequiredPage(): string;

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

@@ -0,0 +1,25 @@
+// The branded 403 the guard serves when an admin form POST fails the double-submit token check.
+// A sibling to https-required-page, built through the shared shell. It names the likely cause and
+// offers a fresh sign-in, and it does not mention Origin headers (the token path does not read them).
+import { renderStaticAdminPage } from './static-admin-page.js';
+/** Render the full HTML document for the CSRF-failed page. */
+export function csrfRequiredPage() {
+    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"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+    Security check
+  </span>
+  <h1>Let's try that again</h1>
+  <p>Your sign-in form could not be verified. This usually means the page was open across a browser restart, or cookies are blocked for this site.</p>
+
+  <a class="cta" href="/admin/login">
+    Back to sign-in
+    <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 it keeps happening</h2>
+    <p>Allow cookies for this site, then open the sign-in page fresh and request a new link.</p>
+  </div>`;
+    return renderStaticAdminPage({ title: 'Security check · Cairn', innerHtml: inner });
+}

package/dist/sveltekit/csrf.d.ts

@@ -0,0 +1,18 @@
+import type { CookieJar, RequestContext } from './types.js';
+/** True for a request SvelteKit's CSRF guard screens: an unsafe method with a form content type. */
+export declare function isUnsafeFormRequest(request: Request): boolean;
+/** The faithful framework check: the Origin header equals the request's own origin. */
+export declare function originMatches(event: Pick<RequestContext, 'url' | 'request'>): boolean;
+/** A length-checked constant-time compare, so the token check leaks no timing. */
+export declare function tokensMatch(a: string, b: string): boolean;
+/**
+ * Return the session's CSRF token, minting and setting it when absent. Lazy and stable: a second
+ * open admin tab reuses the same value, so its form field still matches the cookie. Session-scoped
+ * (no maxAge), HttpOnly (the server sets both halves), SameSite=Strict, and __Host- on https.
+ */
+export declare function issueCsrfToken(event: {
+    url: URL;
+    cookies: CookieJar;
+}): string;
+/** Validate the double-submit token on an admin form POST, reading the field from a body clone. */
+export declare function validateCsrfToken(event: RequestContext): Promise<boolean>;

package/dist/sveltekit/csrf.js

@@ -0,0 +1,60 @@
+// cairn owns CSRF for the admin once a site disables SvelteKit's global checkOrigin. These helpers
+// back the guard's two rules and the loads that issue the double-submit token. See
+// docs/superpowers/specs/2026-06-08-cairn-login-csrf-ownership-design.md.
+import { csrfCookieName, generateCsrfToken } from '../auth/crypto.js';
+const UNSAFE_METHODS = new Set(['POST', 'PUT', 'PATCH', 'DELETE']);
+const FORM_CONTENT_TYPES = new Set([
+    'application/x-www-form-urlencoded',
+    'multipart/form-data',
+    'text/plain',
+]);
+/** True for a request SvelteKit's CSRF guard screens: an unsafe method with a form content type. */
+export function isUnsafeFormRequest(request) {
+    if (!UNSAFE_METHODS.has(request.method))
+        return false;
+    const type = (request.headers.get('content-type') ?? '').split(';', 1)[0].trim().toLowerCase();
+    return FORM_CONTENT_TYPES.has(type);
+}
+/** The faithful framework check: the Origin header equals the request's own origin. */
+export function originMatches(event) {
+    return event.request.headers.get('origin') === event.url.origin;
+}
+/** A length-checked constant-time compare, so the token check leaks no timing. */
+export function tokensMatch(a, b) {
+    if (a.length === 0 || a.length !== b.length)
+        return false;
+    let diff = 0;
+    for (let i = 0; i < a.length; i++)
+        diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
+    return diff === 0;
+}
+/**
+ * Return the session's CSRF token, minting and setting it when absent. Lazy and stable: a second
+ * open admin tab reuses the same value, so its form field still matches the cookie. Session-scoped
+ * (no maxAge), HttpOnly (the server sets both halves), SameSite=Strict, and __Host- on https.
+ */
+export function issueCsrfToken(event) {
+    const secure = event.url.protocol === 'https:';
+    const name = csrfCookieName(secure);
+    const existing = event.cookies.get(name);
+    if (existing)
+        return existing;
+    const token = generateCsrfToken();
+    event.cookies.set(name, token, { path: '/', httpOnly: true, secure, sameSite: 'strict' });
+    return token;
+}
+/** Validate the double-submit token on an admin form POST, reading the field from a body clone. */
+export async function validateCsrfToken(event) {
+    const cookie = event.cookies.get(csrfCookieName(event.url.protocol === 'https:'));
+    if (!cookie)
+        return false;
+    let submitted = '';
+    try {
+        const form = await event.request.clone().formData();
+        submitted = String(form.get('csrf') ?? '');
+    }
+    catch {
+        return false;
+    }
+    return tokensMatch(submitted, cookie);
+}