@glw907/cairn-cms 0.29.0 → 0.34.0

package/src/lib/sveltekit/content-routes.ts

@@ -22,15 +22,20 @@ export interface NavConcept {
   label: string;
 }
 
-/** The admin layout's data: site identity, the signed-in user, the nav, and the active path. */
+/** The admin layout's data: site identity, the signed-in user, the nav, the active path, and theme. */
 export interface LayoutData {
   siteName: string;
-  user: { displayName: string; role: Role };
+  user: { displayName: string; email: string; role: Role };
   concepts: NavConcept[];
   pathname: string;
   canManageEditors: boolean;
   /** The nav menu's label when the site configures one; gates the Navigation nav entry. Null otherwise. */
   navLabel: string | null;
+  /** The admin theme resolved for SSR: the persisted cookie choice, or the light default. */
+  theme: 'cairn-admin' | 'cairn-admin-dark';
+  /** 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[];
 }
 
 /** One row in a concept's list view. */
@@ -83,6 +88,8 @@ export interface ContentEvent {
   request: Request;
   locals: { editor?: Editor | null };
   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 };
 }
 
 /** Injectable dependencies; tests stub the token mint to avoid signing a real key. */
@@ -109,16 +116,24 @@ export function createContentRoutes(runtime: CairnRuntime, deps: ContentRoutesDe
   const mintToken =
     deps.mintToken ?? ((env: GithubKeyEnv) => cachedInstallationToken(appCredentials(runtime.backend, env)));
 
-  /** Layout load for every admin page: the nav, the user, and the active path. */
+  /** Layout load for every admin page: the nav, the user, the active path, and the resolved theme. */
   function layoutLoad(event: ContentEvent): LayoutData {
     const editor = sessionOf(event);
+    const cookieTheme = event.cookies?.get('cairn-admin-theme');
+    const theme = cookieTheme === 'cairn-admin-dark' ? 'cairn-admin-dark' : 'cairn-admin';
+    const cookieCollapsed = event.cookies?.get('cairn-admin-nav-collapsed');
+    const collapsedNav = cookieCollapsed
+      ? cookieCollapsed.split(',').map((part) => decodeURIComponent(part)).filter(Boolean)
+      : [];
     return {
       siteName: runtime.siteName,
-      user: { displayName: editor.displayName, role: editor.role },
+      user: { displayName: editor.displayName, email: editor.email, role: editor.role },
       concepts: runtime.concepts.map((c) => ({ id: c.id, label: c.label })),
       pathname: event.url.pathname,
       canManageEditors: editor.role === 'owner',
       navLabel: runtime.navMenu?.label ?? null,
+      theme,
+      collapsedNav,
     };
   }
 
@@ -338,14 +353,17 @@ export function createContentRoutes(runtime: CairnRuntime, deps: ContentRoutesDe
     throw redirect(303, `/admin/${concept.id}/${id}?${savedQuery}`);
   }
 
-  /** Delete an entry. Block-until-clean: refuse while inbound links exist (naming them), else commit
-   *  the file removal and the manifest patch in one commit. The inbound recheck here is the
-   *  authoritative gate, closing the load-to-delete race. */
-  async function deleteAction(event: ContentEvent): Promise<ReturnType<typeof fail> | never> {
-    const editor = sessionOf(event);
-    const concept = conceptOf(runtime, event.params);
-    const id = event.params.id ?? '';
-    if (!isValidId(id)) throw error(400, 'Invalid entry id');
+  /** The shared delete core. Block-until-clean: refuse while inbound links exist (naming them), else
+   *  commit the file removal and the manifest patch in one commit. The inbound recheck here is the
+   *  authoritative gate, closing the load-to-delete race. Both the editor delete (id from params) and
+   *  the list delete (id from the form body) call this with an already-validated id, so the guard is
+   *  enforced once. */
+  async function deleteEntry(
+    event: ContentEvent,
+    concept: ConceptDescriptor,
+    id: string,
+    editor: Editor,
+  ): Promise<ReturnType<typeof fail> | never> {
     const path = `${concept.dir}/${filenameFromId(id)}`;
     const token = await mintToken(event.platform?.env ?? {});
 
@@ -355,7 +373,7 @@ export function createContentRoutes(runtime: CairnRuntime, deps: ContentRoutesDe
     const manifest = manifestRaw === null ? emptyManifest() : parseManifest(manifestRaw);
     const inbound = inboundLinks(manifest, concept.id, id);
     if (inbound.length) {
-      return fail(409, { inboundLinks: inbound });
+      return fail(409, { inboundLinks: inbound, id });
     }
 
     const nextManifest = serializeManifest(removeEntry(manifest, concept.id, id));
@@ -379,6 +397,25 @@ export function createContentRoutes(runtime: CairnRuntime, deps: ContentRoutesDe
     throw redirect(303, `/admin/${concept.id}`);
   }
 
+  /** Delete an entry from its editor. The id comes from the route param. */
+  async function deleteAction(event: ContentEvent): Promise<ReturnType<typeof fail> | never> {
+    const editor = sessionOf(event);
+    const concept = conceptOf(runtime, event.params);
+    const id = event.params.id ?? '';
+    if (!isValidId(id)) throw error(400, 'Invalid entry id');
+    return deleteEntry(event, concept, id, editor);
+  }
+
+  /** Delete an entry from the concept list. The id comes from the form body. */
+  async function listDeleteAction(event: ContentEvent): Promise<ReturnType<typeof fail> | never> {
+    const editor = sessionOf(event);
+    const concept = conceptOf(runtime, event.params);
+    const form = await event.request.formData();
+    const id = String(form.get('id') ?? '');
+    if (!isValidId(id)) throw error(400, 'Invalid entry id');
+    return deleteEntry(event, concept, id, editor);
+  }
+
   /** Rename an entry: change its slug, move the file, and rewrite every inbound cairn token in one
    *  atomic commit, so no internal link breaks. The collision check and the inbound recompute here
    *  are the authoritative gate. The same last-writer-wins manifest race as save and delete applies,
@@ -466,5 +503,5 @@ export function createContentRoutes(runtime: CairnRuntime, deps: ContentRoutesDe
     throw redirect(303, `/admin/${concept.id}/${newId}?renamed=1`);
   }
 
-  return { layoutLoad, indexRedirect, listLoad, createAction, editLoad, saveAction, deleteAction, renameAction, mintToken };
+  return { layoutLoad, indexRedirect, listLoad, createAction, editLoad, saveAction, deleteAction, listDeleteAction, renameAction, mintToken };
 }

package/src/lib/sveltekit/guard.ts

@@ -4,6 +4,7 @@
 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 type { Editor } from '../auth/types.js';
 import type { HandleInput, RequestContext } from './types.js';
 
@@ -16,6 +17,22 @@ function isAdminPath(pathname: string): boolean {
   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: string): boolean {
+  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.
@@ -29,11 +46,30 @@ function applySecurityHeaders(headers: Headers): void {
   headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
 }
 
+/** The hardened 400 help page for a deployed admin request that arrived over http. */
+function httpsRequiredResponse(url: URL): Response {
+  const httpsUrl = new URL(url);
+  httpsUrl.protocol = 'https:';
+  const headers = new Headers({
+    'Content-Type': 'text/html; charset=utf-8',
+    'Cache-Control': 'no-store',
+  });
+  applySecurityHeaders(headers);
+  return new Response(httpsRequiredPage(httpsUrl.toString()), { status: 400, headers });
+}
+
 /** The SvelteKit `Handle` that guards `/admin/**` and hardens admin responses. */
 export function createAuthGuard() {
   return async function handle({ event, resolve }: HandleInput): Promise<Response> {
     const { pathname } = event.url;
     if (!isAdminPath(pathname)) 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);
+    }
     if (!isPublicAdminPath(pathname)) {
       const env = event.platform?.env ?? {};
       const id = event.cookies.get(sessionCookieName(event.url.protocol === 'https:'));

package/src/lib/sveltekit/https-required-page.ts

@@ -0,0 +1,220 @@
+// The standalone "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.
+//
+// It is served raw from the edge, before SvelteKit renders anything, so it carries no external
+// request: the Warm Stone tokens are inlined for both colour schemes and the type falls back to the
+// system stack (the shipped admin fonts are not reachable from here). 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. */
+function escapeHtml(value: string): string {
+  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"/>';
+
+/**
+ * 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: string): string {
+  const href = escapeHtml(httpsUrl);
+  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>HTTPS required · Cairn</title>
+<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);
+}
+</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>
+
+  <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>
+
+  <p class="foot">Powered by Cairn</p>
+</main>
+</body>
+</html>`;
+}