@glw907/cairn-cms 0.5.0 → 0.5.1

package/dist/sveltekit/index.js

@@ -10,9 +10,11 @@
 // logic lives under `@glw907/cairn-cms/auth`; this module is content-only (list/edit/save).
 import { redirect, error } from '@sveltejs/kit';
 import matter from 'gray-matter';
+import { can, requireCapability } from '../auth/capabilities';
 import { listMarkdown, readRaw, commitFile, installationToken, signingSelfTest, CommitConflictError, } from '../github';
 import { serializeMarkdown } from '../content';
 import { findCollection, frontmatterFromForm } from '../adapter';
+import { validateNavTree, extractMenu, parseSiteConfig, setMenu } from '../nav';
 /**
  * Mint a GitHub App installation token for *reads* when the App is configured, else undefined
  * (reads then fall back to anonymous). Authenticated reads get the 5000/hr limit; anonymous
@@ -37,28 +39,132 @@ async function readToken(env) {
     }
 }
 /**
- * Branding + session for every admin page. `siteName` flows from the adapter without pulling
- * its plugin graph into client bundles; the import stays server-side in the layout load.
- * `pathname` lets the shared shell highlight the active nav item without a `$app/*` import
- * (those kit virtual modules have no types outside a kit app, so they can't live in the
- * package); reading `event.url` here also opts the layout load into rerunning on navigation.
+ * Branding, session, and collection nav for every admin page. `siteName` and the collection
+ * list flow from the adapter without pulling its plugin graph into client bundles (the import
+ * stays server-side in the layout load; only `{type,label}` crosses). `pathname` lets the
+ * shared shell highlight the active nav item without a `$app/*` import (those kit virtual
+ * modules have no types outside a kit app); reading `event.url` also opts the layout load into
+ * rerunning on navigation, keeping the active class correct.
  */
 export function adminLayoutLoad(event, adapter) {
-    return { user: event.locals.user, siteName: adapter.siteName, pathname: event.url.pathname };
+    return {
+        user: event.locals.user,
+        siteName: adapter.siteName,
+        pathname: event.url.pathname,
+        collections: adapter.collections.map(({ type, label }) => ({ type, label })),
+        navMenus: adapter.navMenu ? [{ name: adapter.navMenu.menuName, label: adapter.navMenu.label }] : [],
+        canManageNav: can(event.locals.user, 'nav:manage'),
+    };
+}
+/**
+ * The `/admin` index has no content of its own now that each collection is its own page; send
+ * the editor straight to the first collection's entries list (a Sveltia-style landing).
+ */
+export function adminIndexRedirect(adapter) {
+    const first = adapter.collections[0];
+    if (!first)
+        throw error(404, 'No collections configured');
+    throw redirect(307, `/admin/${first.type}`);
 }
-/** List every collection's markdown files. A failed listing degrades to an inline error. */
-export async function adminListLoad(event, adapter) {
+/** Coerce a frontmatter `date` (gray-matter may parse YAML dates to `Date`) to `YYYY-MM-DD`. */
+function entryDate(value) {
+    if (value instanceof Date)
+        return value.toISOString().slice(0, 10);
+    if (typeof value === 'string')
+        return value;
+    return null;
+}
+/**
+ * List one collection's entries, reading each file's frontmatter for the display title, date,
+ * and draft badge. Reads run in parallel; a single failed read degrades that row to the slug
+ * (rather than failing the page), and a failed directory listing returns an inline `error`.
+ * Collections are small here; the 1,000-entry / Git-Trees sharding concern is risk #11, deferred.
+ */
+export async function collectionListLoad(event, adapter) {
+    const collection = findCollection(adapter, event.params.collection);
+    if (!collection)
+        throw error(404, 'Unknown collection');
+    const kind = collection.kind ?? 'story';
+    const canCreate = can(event.locals.user, kind === 'page' ? 'page:create' : 'story:create');
+    const formError = event.url.searchParams.get('error');
     const token = await readToken(event.platform?.env);
-    const collections = await Promise.all(adapter.collections.map(async ({ type, label, dir }) => {
+    let files;
+    try {
+        files = await listMarkdown(adapter.backend, collection.dir, token);
+    }
+    catch (err) {
+        return {
+            type: collection.type,
+            label: collection.label,
+            kind,
+            entries: [],
+            error: err instanceof Error ? err.message : 'Failed to load',
+            formError,
+            canCreate,
+        };
+    }
+    const entries = await Promise.all(files.map(async (file) => {
+        const fallback = {
+            id: file.id,
+            path: file.path,
+            title: file.id,
+            date: null,
+            draft: false,
+        };
         try {
-            return { type, label, files: await listMarkdown(adapter.backend, dir, token) };
+            const raw = await readRaw(adapter.backend, file.path, token);
+            if (raw === null)
+                return fallback;
+            const { data } = matter(raw);
+            return {
+                id: file.id,
+                path: file.path,
+                title: typeof data.title === 'string' ? data.title : file.id,
+                date: entryDate(data.date),
+                draft: data.draft === true,
+            };
         }
-        catch (err) {
-            // A failed listing (rate limit, network) shouldn't 500 the whole admin.
-            return { type, label, files: [], error: err instanceof Error ? err.message : 'Failed to load' };
+        catch {
+            return fallback;
         }
     }));
-    return { collections };
+    return {
+        type: collection.type,
+        label: collection.label,
+        kind,
+        entries,
+        formError,
+        canCreate,
+    };
+}
+// ── /admin/[collection]?/create (POST) ─────────────────────────────────────
+/** A safe filename stem: starts and ends with a lowercase alphanumeric, hyphens allowed within. */
+const SLUG_RE = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/;
+/**
+ * The "New entry" form action. Validates the requested slug, rejects one that already exists,
+ * then redirects into the editor in create mode (`?new=1`, where `editLoad` serves a blank
+ * document and `saveCommit`'s create path commits a new file). cairn is filename-based, so the
+ * slug is the filename stem the author types; a title-driven auto-slug is a later (Pass K) concern.
+ */
+export async function createEntry(event, adapter) {
+    const collection = findCollection(adapter, event.params.collection);
+    if (!collection)
+        throw error(404, 'Unknown collection');
+    const kind = collection.kind ?? 'story';
+    requireCapability(event.locals.user, kind === 'page' ? 'page:create' : 'story:create');
+    const form = await event.request.formData();
+    const id = String(form.get('id') ?? '').trim();
+    const back = (message) => redirect(303, `/admin/${collection.type}?error=${encodeURIComponent(message)}`);
+    if (!SLUG_RE.test(id)) {
+        throw back('Enter a slug using lowercase letters, numbers, and hyphens (for example 2026-05-my-entry).');
+    }
+    const token = await readToken(event.platform?.env);
+    const existing = await readRaw(adapter.backend, `${collection.dir}/${id}.md`, token);
+    if (existing !== null)
+        throw back(`An entry named "${id}" already exists.`);
+    const date = String(form.get('date') ?? '').trim();
+    const dateSuffix = kind === 'story' && date ? `&date=${encodeURIComponent(date)}` : '';
+    throw redirect(303, `/admin/edit/${collection.type}/${id}?new=1${dateSuffix}`);
 }
 export async function editLoad(event, adapter) {
     const collection = findCollection(adapter, event.params.type);
@@ -67,15 +173,23 @@ export async function editLoad(event, adapter) {
     const token = await readToken(event.platform?.env);
     const path = `${collection.dir}/${event.params.id}.md`;
     const raw = await readRaw(adapter.backend, path, token);
-    if (raw === null)
+    const isNew = event.url.searchParams.get('new') === '1';
+    // A missing file is a 404 normally, but in create mode (`?new=1`) it's a blank new document.
+    if (raw === null && !isNew)
         throw error(404, 'Content not found');
-    // Split frontmatter from body server-side; the editor form binds to the frontmatter and
-    // the Carta editor binds to the body, and /admin/save reassembles them on commit.
-    const { data: frontmatter, content: body } = matter(raw);
+    // Split frontmatter from body server-side; the editor form binds to the frontmatter and the
+    // Carta editor to the body, and /admin/save reassembles them on commit. A new document starts
+    // empty so the author fills the fields from scratch.
+    const { data: frontmatter, content: body } = raw === null ? { data: {}, content: '' } : matter(raw);
+    const seedDate = event.url.searchParams.get('date');
+    if (isNew && seedDate && frontmatter.date === undefined) {
+        frontmatter.date = seedDate;
+    }
     return {
         type: event.params.type,
         id: event.params.id,
         label: collection.label,
+        kind: collection.kind ?? 'story',
         fields: collection.fields,
         path,
         body,
@@ -83,6 +197,7 @@ export async function editLoad(event, adapter) {
         title: typeof frontmatter.title === 'string' ? frontmatter.title : event.params.id,
         saved: event.url.searchParams.get('saved') === '1',
         error: event.url.searchParams.get('error'),
+        isNew,
     };
 }
 // ── /admin/save (POST) ──────────────────────────────────────────────────────
@@ -98,6 +213,7 @@ export async function saveCommit(event, adapter) {
     const type = String(form.get('type') ?? '');
     const id = String(form.get('id') ?? '');
     const body = String(form.get('body') ?? '');
+    const newSuffix = form.get('new') === '1' ? '&new=1' : '';
     const collection = findCollection(adapter, type);
     if (!collection || !id)
         throw error(400, 'Bad request');
@@ -109,7 +225,7 @@ export async function saveCommit(event, adapter) {
     }
     catch (err) {
         const message = err instanceof Error ? err.message : 'Invalid frontmatter';
-        throw redirect(303, `/admin/edit/${type}/${id}?error=${encodeURIComponent(message)}`);
+        throw redirect(303, `/admin/edit/${type}/${id}?error=${encodeURIComponent(message)}${newSuffix}`);
     }
     const markdown = serializeMarkdown(frontmatter, body);
     const token = await installationToken({
@@ -125,12 +241,95 @@ export async function saveCommit(event, adapter) {
         // the current version and reapplies. Any other error is unexpected, so rethrow.
         if (err instanceof CommitConflictError) {
             const message = 'This file changed since you opened it. Reload and reapply your edits.';
-            throw redirect(303, `/admin/edit/${type}/${id}?error=${encodeURIComponent(message)}`);
+            throw redirect(303, `/admin/edit/${type}/${id}?error=${encodeURIComponent(message)}${newSuffix}`);
         }
         throw err;
     }
     throw redirect(303, `/admin/edit/${type}/${id}?saved=1`);
 }
+/** List page-collection entries for the picker (one directory listing per page collection). */
+async function navPageOptions(adapter, env) {
+    const token = await readToken(env);
+    const pageCollections = adapter.collections.filter((c) => (c.kind ?? 'story') === 'page');
+    const lists = await Promise.all(pageCollections.map(async (c) => {
+        try {
+            const files = await listMarkdown(adapter.backend, c.dir, token);
+            return files.map((f) => ({ label: f.id, url: `/${f.id}` }));
+        }
+        catch {
+            return [];
+        }
+    }));
+    return lists.flat();
+}
+export async function navLoad(event, adapter) {
+    requireCapability(event.locals.user, 'nav:manage');
+    const config = adapter.navMenu;
+    if (!config)
+        throw error(404, 'No navigation menu configured');
+    const maxDepth = config.maxDepth ?? 2;
+    const menu = { name: config.menuName, label: config.label, maxDepth };
+    // Read the menu from the committed YAML. A missing/unparsable file degrades to an empty tree so
+    // the editor still loads (a first edit then creates the menu); only the read itself is best-effort.
+    const token = await readToken(event.platform?.env);
+    let tree = [];
+    try {
+        const raw = await readRaw(adapter.backend, config.configPath, token);
+        if (raw !== null)
+            tree = extractMenu(parseSiteConfig(raw), config.menuName, maxDepth);
+    }
+    catch (err) {
+        console.error(`cairn nav: failed to read "${config.configPath}":`, err);
+    }
+    return {
+        menu,
+        tree,
+        pages: await navPageOptions(adapter, event.platform?.env),
+        saved: event.url.searchParams.get('saved') === '1',
+        error: event.url.searchParams.get('error'),
+    };
+}
+export async function navSave(event, adapter) {
+    const user = requireCapability(event.locals.user, 'nav:manage');
+    const config = adapter.navMenu;
+    if (!config)
+        throw error(404, 'No navigation menu configured');
+    const maxDepth = config.maxDepth ?? 2;
+    const env = event.platform?.env;
+    if (!env?.GITHUB_APP_ID || !env.GITHUB_APP_INSTALLATION_ID || !env.GITHUB_APP_PRIVATE_KEY_B64) {
+        throw error(500, 'GitHub App is not configured');
+    }
+    const form = await event.request.formData();
+    let tree;
+    try {
+        tree = validateNavTree(JSON.parse(String(form.get('tree') ?? '[]')), maxDepth);
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : 'Invalid navigation';
+        throw redirect(303, `/admin/nav?error=${encodeURIComponent(message)}`);
+    }
+    const token = await installationToken({
+        appId: env.GITHUB_APP_ID,
+        installationId: env.GITHUB_APP_INSTALLATION_ID,
+        privateKeyB64: env.GITHUB_APP_PRIVATE_KEY_B64,
+    });
+    // Read-modify-commit: replace only this menu in the current file, preserving the rest.
+    const raw = await readRaw(adapter.backend, config.configPath, token);
+    if (raw === null)
+        throw error(404, `Site config not found at ${config.configPath}`);
+    try {
+        await commitFile(adapter.backend, config.configPath, setMenu(raw, config.menuName, tree), { message: `Update ${config.label.toLowerCase()}`, author: { name: user.name, email: user.email } }, token);
+    }
+    catch (err) {
+        // Concurrent-edit 409 (C3): fail safe, same as the content save path.
+        if (err instanceof CommitConflictError) {
+            const message = 'The site config changed since you opened it. Reload and reapply your edits.';
+            throw redirect(303, `/admin/nav?error=${encodeURIComponent(message)}`);
+        }
+        throw err;
+    }
+    throw redirect(303, '/admin/nav?saved=1');
+}
 /**
  * Deploy-time health check (M2): signs a dummy App JWT to prove the GitHub App key loads and
  * the PKCS#1→PKCS#8 conversion still works, before an editor hits it on save. Behind the

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
+  "sideEffects": [
+    "**/*.svelte",
+    "**/*.css"
+  ],
   "license": "MIT",
   "author": "Geoff Wright",
   "repository": {
@@ -99,7 +103,8 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "unified": "^11.0.5",
-    "unist-util-visit": "^5.1.0"
+    "unist-util-visit": "^5.1.0",
+    "yaml": "^2"
   },
   "devDependencies": {
     "@better-auth/cli": "^1.4.21",

package/src/lib/adapter.ts

@@ -53,6 +53,13 @@ export interface CairnCollection {
   /** Route `[type]` segment and list key, e.g. `posts`. */
   type: string;
   label: string;
+  /**
+   * Editing shape. `story` (the default when absent) is a dated feed entry; `page` is a
+   * navigation-placed entry with a path-like slug and no date emphasis. Drives the create
+   * form and the editor header. Never gates editing capability: the palette and toolbar are
+   * available to both. (Pass K, R4.)
+   */
+  kind?: 'page' | 'story';
   /** Repo-relative folder holding the collection's markdown files. */
   dir: string;
   /** Editor form fields, rendered in order. */
@@ -61,6 +68,18 @@ export interface CairnCollection {
   validate(data: Record<string, unknown>, source: string): object;
 }
 
+/** A managed navigation menu, read from and committed to the site's YAML config file. */
+export interface NavMenuConfig {
+  /** Repo-relative path to the site-config YAML, e.g. 'src/lib/site.config.yaml'. */
+  configPath: string;
+  /** Key within the file's `menus` map, e.g. 'primary'. */
+  menuName: string;
+  /** Sidebar/admin label for the menu. */
+  label: string;
+  /** Max nesting depth allowed in the editor (1 = flat). Defaults to 2. */
+  maxDepth?: number;
+}
+
 export interface CairnAdapter {
   /** Branding + magic-link email copy. */
   siteName: string;
@@ -79,6 +98,12 @@ export interface CairnAdapter {
    * omit it or supply an empty registry.
    */
   registry?: ComponentRegistry;
+  /**
+   * The navigation menu this site manages from `/admin/nav` (R3/Pass L2). The menu lives in the
+   * site's git-committed YAML config (read at build time by the layout, committed back by the
+   * editor). Omit to hide the nav surface, the same opt-in shape as `registry`.
+   */
+  navMenu?: NavMenuConfig;
 }
 
 /** Look up a collection by its route segment, or undefined if the segment is unknown. */

package/src/lib/auth/capabilities.ts

@@ -0,0 +1,35 @@
+// cairn-core: capability checks. Management surfaces gate on a capability, not on a role name,
+// so the two-tier owner/editor model can grow finer capabilities (and a future role) additively.
+// Creating a page and changing the nav are structural acts, so they sit with owner; editing a
+// page's content and running the story feed are everyday editor work.
+import { error } from '@sveltejs/kit';
+import type { CairnUser } from './guard';
+
+export type Capability =
+  | 'story:create'
+  | 'story:edit'
+  | 'page:edit'
+  | 'page:create'
+  | 'nav:manage'
+  | 'user:manage';
+
+// One source of truth. `'all'` means every capability; otherwise the explicit grant list. A future
+// `manager` role is one more row here, no call-site changes.
+const CAPS_BY_ROLE: Record<CairnUser['role'], readonly Capability[] | 'all'> = {
+  owner: 'all',
+  editor: ['story:create', 'story:edit', 'page:edit'],
+};
+
+/** Does this user hold the capability? A signed-out (null) user holds nothing. */
+export function can(user: CairnUser | null, cap: Capability): boolean {
+  if (!user) return false;
+  const grants = CAPS_BY_ROLE[user.role];
+  return grants === 'all' || grants.includes(cap);
+}
+
+/** Assert the capability for a route load/action: 401 when signed out, 403 when under-privileged. */
+export function requireCapability(user: CairnUser | null, cap: Capability): CairnUser {
+  if (!user) throw error(401, 'Not signed in');
+  if (!can(user, cap)) throw error(403, 'You do not have permission to do that');
+  return user;
+}

package/src/lib/auth/index.ts

@@ -4,3 +4,4 @@
 export { createAuth, type Auth, type AuthEnv, type AuthBranding } from './config';
 export { loadSession, requireSession, confirmSignIn, signOut, type CairnUser } from './guard';
 export { adminsLoad, addAdmin, removeAdmin, setAdminRole, requireOwner, type AdminsData } from './admins';
+export { can, requireCapability, type Capability } from './capabilities';

package/src/lib/components/AdminLayout.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">
-  // Neutral admin chrome, shared across sites so the tool looks identical everywhere (only the
-  // adapter's siteName varies). When signed in it's a responsive DaisyUI drawer+navbar shell
-  // (`drawer lg:drawer-open`, sidebar pinned on desktop, slide-over + hamburger on mobile),
-  // patterned on scosman/CMSaasStarter's `(admin)/(menu)` layout. The nav is data-driven and
-  // role-gated, so a new surface is one entry in `nav` (plus its route + component). Signed out
-  // (the login page lives under this layout) it falls back to a minimal centered shell.
-  // Each site's `admin/+layout.svelte` is a one-line shim that forwards `data` + `children`.
+  // 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';
 
@@ -13,7 +9,14 @@
     data,
     children,
   }: {
-    data: { siteName: string; user: CairnUser | null; pathname: string };
+    data: {
+      siteName: string;
+      user: CairnUser | null;
+      pathname: string;
+      collections: { type: string; label: string }[];
+      navMenus: { name: string; label: string }[];
+      canManageNav: boolean;
+    };
     children: Snippet;
   } = $props();
 
@@ -27,12 +30,17 @@
   }
 
   const nav = $derived<NavItem[]>([
-    {
-      href: '/admin',
-      label: 'Content',
+    ...data.collections.map((collection) => ({
+      href: `/admin/${collection.type}`,
+      label: collection.label,
       icon: contentIcon,
-      active: data.pathname === '/admin' || data.pathname.startsWith('/admin/edit'),
-    },
+      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',
@@ -43,7 +51,7 @@
   ]);
   const visibleNav = $derived(nav.filter((item) => !item.owner || data.user?.role === 'owner'));
 
-  // Close the slide-over after a nav tap on mobile (no-op on desktop where it's pinned open).
+  // 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;
@@ -64,12 +72,19 @@
   </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="drawer min-h-screen bg-base-200 lg:drawer-open" data-pagefind-ignore>
+  <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">
@@ -122,9 +137,50 @@
   </div>
 {:else}
   <!-- Signed out (login page): no nav, just a centered surface. -->
-  <div class="min-h-screen bg-base-200" data-pagefind-ignore>
+  <div class="cairn-admin min-h-screen bg-base-200" data-pagefind-ignore>
     <div class="mx-auto max-w-3xl px-4 py-8">
       {@render children()}
     </div>
   </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>

package/src/lib/components/CollectionList.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  // One collection's entries: a table (title, date, draft badge) linking into the editor, plus a
+  // collapsible "New entry" form. The author types a title; the slug stem derives from it (R4) and
+  // stays editable. A story collection also collects a date, which createEntry forwards so the new
+  // entry opens with its date set. Placeholders differ by kind. The shell (AdminLayout) owns the
+  // chrome and nav; this renders only the body.
+  import type { CollectionListData } from '../sveltekit';
+  import { slugify } from '../slug';
+
+  let { data }: { data: CollectionListData } = $props();
+
+  let title = $state('');
+  let slug = $state('');
+  let slugEdited = $state(false);
+
+  // Keep the slug in sync with the title until the author edits the slug directly.
+  function onTitleInput(value: string) {
+    title = value;
+    if (!slugEdited) slug = slugify(value);
+  }
+
+  const slugPlaceholder = $derived(data.kind === 'page' ? 'about-us' : '2026-05-my-entry');
+</script>
+
+<div class="flex items-center justify-between gap-4">
+  <h1 class="text-2xl font-bold">{data.label}</h1>
+  {#if data.canCreate}
+    <details class="dropdown dropdown-end">
+      <summary class="btn btn-primary btn-sm">New entry</summary>
+      <form
+        method="POST"
+        action="?/create"
+        class="dropdown-content z-10 mt-2 flex w-80 flex-col gap-2 rounded-box border border-base-300 bg-base-100 p-4 shadow"
+      >
+        <label class="flex flex-col gap-1">
+          <span class="text-sm font-medium">Title</span>
+          <input
+            type="text"
+            value={title}
+            oninput={(e) => onTitleInput(e.currentTarget.value)}
+            placeholder="A human title"
+            class="input w-full"
+          />
+        </label>
+
+        {#if data.kind === 'story'}
+          <label class="flex flex-col gap-1">
+            <span class="text-sm font-medium">Date</span>
+            <input type="date" name="date" class="input w-full" />
+          </label>
+        {/if}
+
+        <label class="flex flex-col gap-1">
+          <span class="text-sm font-medium">Slug</span>
+          <input
+            type="text"
+            name="id"
+            required
+            bind:value={slug}
+            oninput={() => (slugEdited = true)}
+            placeholder={slugPlaceholder}
+            pattern="[a-z0-9]([a-z0-9-]*[a-z0-9])?"
+            class="input w-full"
+          />
+          <span class="text-xs opacity-60">Lowercase letters, numbers, and hyphens. Becomes the filename.</span>
+        </label>
+
+        <button type="submit" class="btn btn-primary btn-sm">Create &amp; edit</button>
+      </form>
+    </details>
+  {/if}
+</div>
+
+{#if data.formError}
+  <div class="alert alert-error mt-4"><span>{data.formError}</span></div>
+{/if}
+
+{#if data.error}
+  <div class="alert alert-warning mt-6">Couldn't load {data.label.toLowerCase()}: {data.error}</div>
+{:else if data.entries.length === 0}
+  <p class="mt-6 opacity-60">No entries yet.</p>
+{:else}
+  <ul class="menu mt-6 rounded-box border border-base-300 bg-base-100 p-2">
+    {#each data.entries as entry (entry.path)}
+      <li>
+        <a href="/admin/edit/{data.type}/{entry.id}" class="flex items-center justify-between gap-3">
+          <span class="flex items-center gap-2">
+            <span>{entry.title}</span>
+            {#if entry.draft}<span class="badge badge-warning badge-sm">Draft</span>{/if}
+          </span>
+          {#if entry.date}<span class="text-xs opacity-60">{entry.date}</span>{/if}
+        </a>
+      </li>
+    {/each}
+  </ul>
+{/if}