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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.5.1",
+  "version": "0.6.0-rc.1",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
   "sideEffects": [
@@ -23,75 +23,47 @@
   ],
   "scripts": {
     "package": "svelte-package",
-    "package:watch": "svelte-package --watch",
-    "prepublishOnly": "svelte-package",
+    "check:package": "npm run package && publint --strict && attw --pack . --ignore-rules no-resolution cjs-resolves-to-esm internal-resolution-error",
+    "prepare": "svelte-package",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",
     "test:watch": "vitest",
-    "auth:schema": "better-auth generate --config auth.cli.ts --output src/lib/auth/schema.ts -y",
-    "auth:sql": "drizzle-kit generate"
+    "test:unit": "vitest run --project unit",
+    "test:integration": "vitest run --project integration",
+    "test:component": "vitest run --project component"
   },
   "exports": {
     ".": {
-      "types": "./src/lib/index.ts",
-      "svelte": "./src/lib/index.ts",
-      "default": "./src/lib/index.ts"
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./sveltekit": {
-      "types": "./src/lib/sveltekit/index.ts",
-      "svelte": "./src/lib/sveltekit/index.ts",
-      "default": "./src/lib/sveltekit/index.ts"
+      "types": "./dist/sveltekit/index.d.ts",
+      "svelte": "./dist/sveltekit/index.js",
+      "default": "./dist/sveltekit/index.js"
     },
     "./components": {
-      "types": "./src/lib/components/index.ts",
-      "svelte": "./src/lib/components/index.ts",
-      "default": "./src/lib/components/index.ts"
-    },
-    "./auth": {
-      "types": "./src/lib/auth/index.ts",
-      "svelte": "./src/lib/auth/index.ts",
-      "default": "./src/lib/auth/index.ts"
+      "types": "./dist/components/index.d.ts",
+      "svelte": "./dist/components/index.js",
+      "default": "./dist/components/index.js"
     },
     "./package.json": "./package.json"
   },
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "svelte": "./dist/index.js",
-        "default": "./dist/index.js"
-      },
-      "./sveltekit": {
-        "types": "./dist/sveltekit/index.d.ts",
-        "svelte": "./dist/sveltekit/index.js",
-        "default": "./dist/sveltekit/index.js"
-      },
-      "./components": {
-        "types": "./dist/components/index.d.ts",
-        "svelte": "./dist/components/index.js",
-        "default": "./dist/components/index.js"
-      },
-      "./auth": {
-        "types": "./dist/auth/index.d.ts",
-        "svelte": "./dist/auth/index.js",
-        "default": "./dist/auth/index.js"
-      },
-      "./package.json": "./package.json"
-    }
-  },
   "files": [
     "dist",
     "src/lib"
   ],
   "peerDependencies": {
     "@sveltejs/kit": "^2",
-    "better-auth": "^1.6",
     "carta-md": "^4.11",
-    "drizzle-orm": ">=0.40 <1",
     "svelte": "^5.0.0"
   },
   "dependencies": {
+    "@rodrigodagostino/svelte-sortable-list": "^2.1.17",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
+    "dompurify": "^3.4.7",
     "gray-matter": "^4",
     "hastscript": "^9.0.1",
     "mdast-util-directive": "^3.1.0",
@@ -107,20 +79,24 @@
     "yaml": "^2"
   },
   "devDependencies": {
-    "@better-auth/cli": "^1.4.21",
-    "@cloudflare/workers-types": "^4.20260405.1",
-    "@sveltejs/kit": "^2",
+    "@arethetypeswrong/cli": "^0.18.3",
+    "@cloudflare/vitest-pool-workers": "^0.16",
+    "@cloudflare/workers-types": "^4.20260501.0",
+    "@sveltejs/kit": "^2.61",
     "@sveltejs/package": "^2",
-    "@sveltejs/vite-plugin-svelte": "^7",
-    "@types/better-sqlite3": "^7.6.13",
-    "better-auth": "^1.6.11",
-    "better-sqlite3": "^12.10.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1",
+    "@types/node": "^22.19.19",
+    "@vitest/browser": "^4.1.7",
+    "@vitest/browser-playwright": "^4.1.7",
     "carta-md": "^4.11",
-    "drizzle-kit": "^0.31.10",
-    "drizzle-orm": "^0.45.2",
-    "svelte": "^5",
+    "playwright": "^1.60.0",
+    "publint": "^0.3.21",
+    "svelte": "^5.55",
     "svelte-check": "^4",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.6"
+    "vite": "^8.0",
+    "vitest": "^4.1",
+    "vitest-browser-svelte": "^2.1.1",
+    "wrangler": "^4"
   }
 }

package/src/lib/auth/crypto.ts

@@ -0,0 +1,37 @@
+// Token and session-id generation plus SHA-256 token hashing, on Web Crypto so the
+// code runs unchanged in workerd. The store keeps only the hash of a token, never the
+// token itself (spec 7.1).
+
+/** The session cookie name. */
+export const COOKIE_NAME = 'cairn_session';
+
+/** Magic-link tokens live 10 minutes. */
+export const TOKEN_TTL_MS = 10 * 60 * 1000;
+
+/** Sessions live 30 days. */
+export const SESSION_TTL_MS = 30 * 24 * 60 * 60 * 1000;
+
+function randomBase64Url(byteLength = 32): string {
+  const bytes = new Uint8Array(byteLength);
+  crypto.getRandomValues(bytes);
+  let binary = '';
+  for (const b of bytes) binary += String.fromCharCode(b);
+  return btoa(binary).replaceAll('+', '-').replaceAll('/', '_').replaceAll('=', '');
+}
+
+/** A fresh 256-bit magic-link token, url-safe. */
+export function generateToken(): string {
+  return randomBase64Url(32);
+}
+
+/** A fresh 256-bit session id, url-safe. */
+export function generateSessionId(): 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);
+  const digest = await crypto.subtle.digest('SHA-256', data);
+  return [...new Uint8Array(digest)].map((b) => b.toString(16).padStart(2, '0')).join('');
+}

package/src/lib/auth/store.ts

@@ -0,0 +1,158 @@
+// D1 access for auth, through prepared statements only. No ORM. Each function takes the
+// `AUTH_DB` binding plus primitives, so it is testable against a real local D1 and free of
+// SvelteKit. Callers pass `now`/`expiresAt` in epoch milliseconds.
+import type { D1Database } from '@cloudflare/workers-types';
+import type { Editor, Role } from './types.js';
+
+type EditorCols = { email: string; display_name: string; role: Role };
+
+function toEditor(row: EditorCols): Editor {
+  return { email: row.email, displayName: row.display_name, role: row.role };
+}
+
+/** Look an email up in the allowlist. */
+export async function findEditor(db: D1Database, email: string): Promise<Editor | null> {
+  const row = await db
+    .prepare('SELECT email, display_name, role FROM editor WHERE email = ?')
+    .bind(email)
+    .first<EditorCols>();
+  return row ? toEditor(row) : null;
+}
+
+/** Replace any prior token for this email with a fresh one, atomically. */
+export async function issueToken(
+  db: D1Database,
+  email: string,
+  tokenHash: string,
+  expiresAt: number,
+  now: number,
+): Promise<void> {
+  await db.batch([
+    db.prepare('DELETE FROM magic_token WHERE email = ?').bind(email),
+    db
+      .prepare('INSERT INTO magic_token (token_hash, email, expires_at, created_at) VALUES (?, ?, ?, ?)')
+      .bind(tokenHash, email, expiresAt, now),
+  ]);
+}
+
+/**
+ * Consume a token in one atomic statement. A returned email means the token was present and
+ * unexpired and is now gone, so the link is single-use by construction on strongly-consistent D1.
+ */
+export async function consumeToken(db: D1Database, tokenHash: string, now: number): Promise<string | null> {
+  const row = await db
+    .prepare('DELETE FROM magic_token WHERE token_hash = ? AND expires_at > ? RETURNING email')
+    .bind(tokenHash, now)
+    .first<{ email: string }>();
+  return row?.email ?? null;
+}
+
+/** Create a session row. */
+export async function createSession(
+  db: D1Database,
+  id: string,
+  email: string,
+  expiresAt: number,
+  now: number,
+): Promise<void> {
+  await db
+    .prepare('INSERT INTO session (id, email, expires_at, created_at) VALUES (?, ?, ?, ?)')
+    .bind(id, email, expiresAt, now)
+    .run();
+}
+
+/**
+ * Resolve a session to its editor, joining `editor` so the role is read live. An expired
+ * session or a removed editor resolves to null, which revokes access on the next request.
+ */
+export async function resolveSession(db: D1Database, id: string, now: number): Promise<Editor | null> {
+  const row = await db
+    .prepare(
+      `SELECT e.email AS email, e.display_name AS display_name, e.role AS role
+       FROM session s JOIN editor e ON e.email = s.email
+       WHERE s.id = ? AND s.expires_at > ?`,
+    )
+    .bind(id, now)
+    .first<EditorCols>();
+  return row ? toEditor(row) : null;
+}
+
+/** Delete a session (logout). */
+export async function deleteSession(db: D1Database, id: string): Promise<void> {
+  await db.prepare('DELETE FROM session WHERE id = ?').bind(id).run();
+}
+
+/** The full allowlist, sorted by email. */
+export async function listEditors(db: D1Database): Promise<Editor[]> {
+  const { results } = await db
+    .prepare('SELECT email, display_name, role FROM editor ORDER BY email')
+    .all<EditorCols>();
+  return results.map(toEditor);
+}
+
+/** Add an editor to the allowlist. */
+export async function insertEditor(
+  db: D1Database,
+  email: string,
+  displayName: string,
+  role: Role,
+  now: number,
+): Promise<void> {
+  await db
+    .prepare('INSERT INTO editor (email, display_name, role, created_at) VALUES (?, ?, ?, ?)')
+    .bind(email, displayName, role, now)
+    .run();
+}
+
+/** Remove an editor and cut their live access (sessions and any pending token go too). */
+export async function deleteEditor(db: D1Database, email: string): Promise<void> {
+  await db.batch([
+    db.prepare('DELETE FROM session WHERE email = ?').bind(email),
+    db.prepare('DELETE FROM magic_token WHERE email = ?').bind(email),
+    db.prepare('DELETE FROM editor WHERE email = ?').bind(email),
+  ]);
+}
+
+/**
+ * Remove an owner only if another owner remains. The count is part of the DELETE, so two
+ * concurrent removals cannot both pass a separate check and strand the allowlist at zero
+ * owners. Returns false (and writes nothing) when this is the last owner. On success the
+ * editor's sessions and pending token go too.
+ */
+export async function removeOwnerIfNotLast(db: D1Database, email: string): Promise<boolean> {
+  const res = await db
+    .prepare(
+      `DELETE FROM editor
+       WHERE email = ? AND role = 'owner'
+         AND (SELECT COUNT(*) FROM editor WHERE role = 'owner') > 1`,
+    )
+    .bind(email)
+    .run();
+  if (res.meta.changes !== 1) return false;
+  await db.batch([
+    db.prepare('DELETE FROM session WHERE email = ?').bind(email),
+    db.prepare('DELETE FROM magic_token WHERE email = ?').bind(email),
+  ]);
+  return true;
+}
+
+/** Change an editor's role. The guard reads the new role on the next request. */
+export async function setEditorRole(db: D1Database, email: string, role: Role): Promise<void> {
+  await db.prepare('UPDATE editor SET role = ? WHERE email = ?').bind(role, email).run();
+}
+
+/**
+ * Demote an owner to editor only if another owner remains, in one atomic statement (see
+ * `removeOwnerIfNotLast`). Returns false (and writes nothing) when this is the last owner.
+ */
+export async function demoteOwnerIfNotLast(db: D1Database, email: string): Promise<boolean> {
+  const res = await db
+    .prepare(
+      `UPDATE editor SET role = 'editor'
+       WHERE email = ? AND role = 'owner'
+         AND (SELECT COUNT(*) FROM editor WHERE role = 'owner') > 1`,
+    )
+    .bind(email)
+    .run();
+  return res.meta.changes === 1;
+}

package/src/lib/auth/types.ts

@@ -0,0 +1,27 @@
+import type { D1Database } from '@cloudflare/workers-types';
+
+export type Role = 'owner' | 'editor';
+
+/** The session shape the whole admin reads: guard, loads, content fns, manage-editors. */
+export interface Editor {
+  email: string;
+  displayName: string;
+  role: Role;
+}
+
+/** Worker bindings and vars the auth layer reads; a structural subset of `Platform.env`. */
+export interface AuthEnv {
+  AUTH_DB?: D1Database;
+  /** Canonical origin for confirmation links, never read from a request header (spec 7.1, risk H3). */
+  PUBLIC_ORIGIN?: string;
+  /** Cloudflare Email Sending binding. */
+  EMAIL?: {
+    send(message: {
+      to: string;
+      from: string;
+      subject: string;
+      html: string;
+      text: string;
+    }): Promise<void>;
+  };
+}

package/src/lib/components/AdminLayout.svelte

@@ -1,186 +1,80 @@
+<!--
+@component
+The admin shell: a DaisyUI drawer-and-navbar that wraps every authed admin page. The nav is
+data-driven from the enabled concepts and role-gated (owners see the manage-editors entry). The
+root sets `data-theme="cairn-admin"` and imports the self-contained Warm Stone theme, so the
+admin looks identical on every host regardless of the site's own theme.
+-->
 <script lang="ts">
-  // Neutral admin chrome shared across sites. Signed in: DaisyUI drawer+navbar shell (sidebar
-  // pinned on desktop, slide-over on mobile). Signed out: minimal centered shell. The
-  // `cairn-admin` class on both roots scopes the "Warm Stone" theme; see the style block.
   import type { Snippet } from 'svelte';
-  import type { CairnUser } from '../auth';
+  import type { LayoutData } from '../sveltekit/content-routes.js';
+  import './cairn-admin.css';
 
-  let {
-    data,
-    children,
-  }: {
-    data: {
-      siteName: string;
-      user: CairnUser | null;
-      pathname: string;
-      collections: { type: string; label: string }[];
-      navMenus: { name: string; label: string }[];
-      canManageNav: boolean;
-    };
+  interface Props {
+    /** The layout load's data: site name, user, nav concepts, active path, owner capability. */
+    data: LayoutData;
+    /** The page body. */
     children: Snippet;
-  } = $props();
+  }
+
+  let { data, children }: Props = $props();
 
   interface NavItem {
     href: string;
     label: string;
-    icon: Snippet;
-    active: boolean;
-    /** Owner-only surface; hidden from regular editors. */
     owner?: boolean;
   }
 
-  const nav = $derived<NavItem[]>([
-    ...data.collections.map((collection) => ({
-      href: `/admin/${collection.type}`,
-      label: collection.label,
-      icon: contentIcon,
-      active:
-        data.pathname === `/admin/${collection.type}` ||
-        data.pathname.startsWith(`/admin/edit/${collection.type}/`),
-    })),
-    ...(data.canManageNav && data.navMenus.length
-      ? [{ href: '/admin/nav', label: 'Navigation', icon: navIcon, active: data.pathname.startsWith('/admin/nav') }]
-      : []),
-    {
-      href: '/admin/admins',
-      label: 'Editors',
-      icon: editorsIcon,
-      owner: true,
-      active: data.pathname.startsWith('/admin/admins'),
-    },
+  const navItems: NavItem[] = $derived([
+    ...data.concepts.map((c) => ({ href: `/admin/${c.id}`, label: c.label })),
+    ...(data.navLabel ? [{ href: '/admin/nav', label: data.navLabel }] : []),
+    { href: '/admin/editors', label: 'Editors', owner: true },
   ]);
-  const visibleNav = $derived(nav.filter((item) => !item.owner || data.user?.role === 'owner'));
 
-  // Close the slide-over after a nav tap on mobile.
-  function closeDrawer(): void {
-    const toggle = document.getElementById('admin-drawer');
-    if (toggle instanceof HTMLInputElement) toggle.checked = false;
+  const visibleNav = $derived(navItems.filter((item) => !item.owner || data.canManageEditors));
+
+  function isActive(href: string): boolean {
+    return data.pathname === href || data.pathname.startsWith(`${href}/`);
   }
 </script>
 
-{#snippet contentIcon()}
-  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-  </svg>
-{/snippet}
-
-{#snippet editorsIcon()}
-  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-      d="M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 013-3.87m6-1.13a4 4 0 10-4-4 4 4 0 004 4zm6 0a4 4 0 10-3.5-2.1" />
-  </svg>
-{/snippet}
-
-{#snippet navIcon()}
-  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-      d="M4 6h16M4 12h16M4 18h16" />
-  </svg>
-{/snippet}
-
-<svelte:head>
-  <meta name="robots" content="noindex, nofollow" />
-</svelte:head>
-
-{#if data.user}
-  <div class="cairn-admin drawer min-h-screen bg-base-200 lg:drawer-open" data-pagefind-ignore>
-    <input id="admin-drawer" type="checkbox" class="drawer-toggle" />
-
-    <div class="drawer-content">
-      <!-- Mobile top bar; the desktop sidebar replaces this at lg. -->
-      <div class="navbar bg-base-100 lg:hidden">
-        <div class="flex-1">
-          <span class="px-2 text-xl font-bold">{data.siteName} CMS</span>
-        </div>
-        <div class="flex-none">
-          <label for="admin-drawer" class="btn btn-square btn-ghost" aria-label="Open menu">
-            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
-            </svg>
-          </label>
-        </div>
+<div data-theme="cairn-admin" class="drawer lg:drawer-open min-h-screen bg-base-200 text-base-content">
+  <input id="cairn-drawer" type="checkbox" class="drawer-toggle" />
+
+  <div class="drawer-content flex flex-col">
+    <div class="navbar bg-base-100 border-b border-base-300">
+      <div class="flex-none lg:hidden">
+        <label for="cairn-drawer" aria-label="Open menu" class="btn btn-square btn-ghost">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </label>
       </div>
-
-      <main class="container px-4 py-6 lg:px-8">
-        {@render children()}
-      </main>
+      <div class="flex-1 px-2 font-semibold">{data.siteName}</div>
+      <div class="flex-none px-2 text-sm text-[var(--color-muted)]">{data.user.displayName}</div>
     </div>
 
-    <div class="drawer-side z-10">
-      <label for="admin-drawer" class="drawer-overlay" aria-label="Close menu"></label>
-      <div class="flex min-h-full w-80 flex-col bg-base-100 lg:border-r lg:border-base-300">
-        <ul class="menu menu-lg grow p-4">
-          <li class="menu-title flex flex-row items-center text-xl font-bold text-base-content">
-            <span class="grow">{data.siteName} CMS</span>
-            <label for="admin-drawer" class="ml-3 cursor-pointer lg:hidden" aria-label="Close menu">✕</label>
-          </li>
-          {#each visibleNav as item (item.href)}
-            <li>
-              <a href={item.href} class={item.active ? 'active' : ''} onclick={closeDrawer}>
-                {@render item.icon()}
-                {item.label}
-              </a>
-            </li>
-          {/each}
-        </ul>
-
-        <div class="border-t border-base-300 p-4">
-          <p class="text-sm font-medium">{data.user.name}</p>
-          <p class="text-xs opacity-60">{data.user.email}</p>
-          <form method="POST" action="/admin/auth/logout" class="mt-3">
-            <button type="submit" class="btn btn-ghost btn-sm btn-block justify-start">Sign out</button>
-          </form>
-        </div>
-      </div>
-    </div>
-  </div>
-{:else}
-  <!-- Signed out (login page): no nav, just a centered surface. -->
-  <div class="cairn-admin min-h-screen bg-base-200" data-pagefind-ignore>
-    <div class="mx-auto max-w-3xl px-4 py-8">
+    <main class="flex-1 p-4 lg:p-8">
       {@render children()}
-    </div>
+    </main>
   </div>
-{/if}
-
-<style>
-  /* Warm Stone: a neutral, fully self-contained admin theme (R6), light-only. Overriding the
-     DaisyUI v5 tokens + font on this root re-skins the whole admin subtree by inheritance, so
-     the tool looks identical on every host regardless of the site's own theme. Values are OKLCH
-     (no hex/rgb, per the design-system rule). Warm-gray neutrals (hue ~75), violet accent. */
-  .cairn-admin {
-    color-scheme: light;
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-
-    --color-base-100: oklch(98.5% 0.004 75);
-    --color-base-200: oklch(96% 0.005 75);
-    --color-base-300: oklch(92% 0.008 75);
-    --color-base-content: oklch(28% 0.012 75);
 
-    --color-primary: oklch(52% 0.20 293);
-    --color-primary-content: oklch(98% 0.012 293);
-    --color-secondary: oklch(45% 0.02 75);
-    --color-secondary-content: oklch(98% 0.004 75);
-    --color-accent: oklch(58% 0.16 300);
-    --color-accent-content: oklch(98% 0.012 300);
-    --color-neutral: oklch(32% 0.012 75);
-    --color-neutral-content: oklch(96% 0.004 75);
-
-    --color-info: oklch(60% 0.12 240);
-    --color-info-content: oklch(98% 0.01 240);
-    --color-success: oklch(58% 0.12 150);
-    --color-success-content: oklch(98% 0.01 150);
-    --color-warning: oklch(75% 0.15 70);
-    --color-warning-content: oklch(25% 0.02 70);
-    --color-error: oklch(58% 0.20 25);
-    --color-error-content: oklch(98% 0.01 25);
-
-    --radius-selector: 0.5rem;
-    --radius-field: 0.5rem;
-    --radius-box: 0.75rem;
-    --size-selector: 0.25rem;
-    --size-field: 0.25rem;
-    --border: 1px;
-  }
-</style>
+  <div class="drawer-side">
+    <label for="cairn-drawer" aria-label="Close menu" class="drawer-overlay"></label>
+    <nav class="bg-base-100 min-h-full w-64 border-r border-base-300 p-4" aria-label="Site content">
+      <div class="menu-title mb-2 px-2 text-xs uppercase tracking-wide text-[var(--color-muted)]">Content</div>
+      <ul class="menu menu-lg w-full">
+        {#each visibleNav as item (item.href)}
+          <li>
+            <a href={item.href} class:menu-active={isActive(item.href)} aria-current={isActive(item.href) ? 'page' : undefined}>
+              {item.label}
+            </a>
+          </li>
+        {/each}
+      </ul>
+      <form method="POST" action="/admin/auth/logout" class="mt-6 px-2">
+        <button type="submit" class="btn btn-ghost btn-sm btn-block">Sign out</button>
+      </form>
+    </nav>
+  </div>
+</div>