@glw907/cairn-cms 0.4.0 → 0.5.1

package/src/lib/adapter.ts

@@ -3,11 +3,12 @@
 // This is the single seam that lets one admin surface serve different designs. A site
 // supplies a `CairnAdapter` (see `src/lib/cairn.config.ts`) describing its backend repo,
 // its editable collections (folder + form fields + frontmatter validator), and its preview
-// plugin set. cairn-core never hard-codes a collection, tag, or directive — it reads them
+// plugin set. cairn-core never hard-codes a collection, tag, or directive; it reads them
 // from the adapter. Field descriptors are plain data so a load function can hand them to
-// the editor form across the server→client boundary.
+// the editor form across the server-to-client boundary.
 import type { PreviewPlugins } from './carta';
 import type { RepoRef } from './github';
+import type { ComponentRegistry } from './render';
 
 interface FieldBase {
   /** Frontmatter key and form input name. */
@@ -52,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. */
@@ -60,16 +68,42 @@ 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;
-  /** From: address for magic-link email — a domain-authenticated sender. */
+  /** From: address for magic-link email (must be a domain-authenticated sender). */
   sender: string;
   /** The repository the admin reads content from and commits to. */
   backend: RepoRef;
   /** Site plugin set for the Carta preview (parity with the live render). */
   preview: PreviewPlugins;
   collections: CairnCollection[];
+  /**
+   * The site's component registry: the single declaration of its directive
+   * components (R10a). Rendering parity already flows through `preview`; this
+   * exposes the same registry so the editor's insert-component palette can read
+   * `registry.defs`. Optional: a site with no rich components (e.g. 907.life) may
+   * 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/config.ts

@@ -1,5 +1,5 @@
 // cairn-core: the better-auth instance. Auth is engine code (engine-fat rule), so the whole
-// config — Drizzle/D1 adapter, magic-link (POST-confirm-shaped send), admin roles — lives here.
+// config lives here: Drizzle/D1 adapter, magic-link (POST-confirm-shaped send), admin roles.
 // Instantiated PER REQUEST in hooks.server.ts (the D1 binding is request-scoped); the factory
 // is cheap (no I/O at construction).
 import { betterAuth } from 'better-auth';
@@ -14,7 +14,7 @@ import * as schema from './schema';
 
 // Two-tier roles on the admin plugin's access-control system: `owner` holds every admin
 // statement (manage editors, revoke sessions); `editor` holds none (content-only). `adminRoles`
-// must name a role defined here, so owner — not the plugin's built-in `admin` — is the gate.
+// must name a role defined here, so owner (not the plugin's built-in `admin`) is the gate.
 const ac = createAccessControl(defaultStatements);
 const owner = ac.newRole(defaultStatements);
 const editor = ac.newRole({});
@@ -37,17 +37,17 @@ export interface AuthBranding {
   sender: string;
 }
 
-/** The drizzle adapter result `betterAuth` consumes — the same provider/schema everywhere. */
+/** The drizzle adapter result `betterAuth` consumes (same provider/schema everywhere). */
 type DrizzleDb = Parameters<typeof drizzleAdapter>[0];
 
 /**
  * The shared better-auth config. Kept separate from `createAuth` so the test harness can run
  * the EXACT plugin set (allowlist semantics, expiry, POST-confirm send) over an in-memory
- * SQLite instead of D1. `disableSignUp:true` makes the `user` table the editor allowlist —
+ * SQLite instead of D1. `disableSignUp:true` makes the `user` table the editor allowlist:
  * magic-link never auto-creates, so the only way in is the owner-gated admin `createUser`
  * (see auth/admins.ts). `adminRoles:['owner']` lets owners (not the default `admin` role)
  * drive the admin API. Tokens are stored hashed and consumed atomically on first verify
- * (better-auth GHSA-hc7v-rggr-4hvx) — single-use by construction (C1).
+ * (better-auth GHSA-hc7v-rggr-4hvx), single-use by construction (C1).
  */
 export function buildAuth(opts: {
   database: DrizzleDb;
@@ -70,7 +70,7 @@ export function buildAuth(opts: {
         sendMagicLink: async ({ email, token }, ctx) => {
           // Allowlist gate: better-auth always fires this callback (even for unknown emails, to
           // avoid enumeration) and only blocks user creation at verify. So gate the actual send
-          // here — never email a non-editor. The login UI shows neutral copy either way, so this
+          // here. Never email a non-editor. The login UI shows neutral copy either way, so this
           // leaks nothing; it just stops strangers receiving a dead link.
           const existing = await ctx?.context.internalAdapter.findUserByEmail(email);
           if (!existing?.user) return;

package/src/lib/auth/guard.ts

@@ -1,10 +1,10 @@
 // cairn-core: server-side auth helpers the site route shims delegate to. Each takes the
-// SvelteKit event (typed structurally, so the package never depends on a site's generated
-// `App.*` ambient types) plus the per-request `Auth` from `locals`.
+// SvelteKit event, typed structurally so the package never depends on a site's generated
+// `App.*` ambient types, plus the per-request `Auth` from `locals`.
 import { redirect } from '@sveltejs/kit';
 import type { Auth } from './config';
 
-/** The session shape the whole admin reads — layout, guards, content fns, manage-editors. */
+/** The session shape the whole admin reads: layout, guards, content fns, manage-editors. */
 export interface CairnUser {
   id: string;
   email: string;

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/carta.ts

@@ -1,6 +1,6 @@
 // cairn-core: pure Carta options/transformer wiring for render-only preview.
 //
-// Plugins are passed in, not imported — that seam is what the Pass D adapter formalises.
+// Plugins are passed in rather than imported; that seam is what the Pass D adapter formalises.
 // No `carta-md` import: its index re-exports Svelte components that the node test env
 // can't load. The Svelte component calls `new Carta(previewCartaOptions(...))` directly.
 import type { Pluggable, Processor } from 'unified';
@@ -37,7 +37,7 @@ export function previewTransformers({ remarkPlugins, rehypePlugins }: PreviewPlu
   return [...phase(remarkPlugins, 'remark'), ...phase(rehypePlugins, 'rehype')];
 }
 
-/** Minimal Options subset we populate — avoids importing carta-md (Svelte re-exports). */
+/** Minimal Options subset we populate (avoids importing carta-md, which re-exports Svelte components). */
 interface PreviewCartaOptions {
   sanitizer: false;
   rehypeOptions: { allowDangerousHtml: boolean };

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();
 
@@ -22,17 +25,22 @@
     label: string;
     icon: Snippet;
     active: boolean;
-    /** Owner-only surface — hidden from regular editors. */
+    /** Owner-only surface; hidden from regular editors. */
     owner?: boolean;
   }
 
   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,16 +72,23 @@
   </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">
-      <!-- Mobile top bar — the desktop sidebar replaces this at lg. -->
+      <!-- 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>
@@ -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}

package/src/lib/components/ComponentPalette.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  // The insert-component palette (R10). Reads the site's component registry (R10a) and inserts a
+  // scaffolded directive snippet at the cursor via the `insert` callback. DaisyUI dropdown so it
+  // matches the Warm Stone admin theme. Shown only when the site supplies a non-empty registry; a
+  // plain-markdown site (e.g. 907.life) passes no registry and this renders nothing.
+  import type { ComponentRegistry } from '../render';
+
+  let { registry, insert }: { registry?: ComponentRegistry; insert: (template: string) => void } =
+    $props();
+
+  const defs = $derived(registry?.defs ?? []);
+</script>
+
+{#if defs.length > 0}
+  <div class="dropdown">
+    <button type="button" tabindex="0" class="btn btn-sm btn-ghost">Insert ▾</button>
+    <ul
+      class="dropdown-content menu z-10 mt-1 w-72 rounded-box border border-base-300 bg-base-100 p-2 shadow"
+    >
+      {#each defs as def (def.name)}
+        <li>
+          <button
+            type="button"
+            class="flex flex-col items-start gap-0.5"
+            onclick={() => insert(def.insertTemplate)}
+          >
+            <span class="font-medium">{def.label}</span>
+            <span class="text-xs opacity-60">{def.description}</span>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  </div>
+{/if}

package/src/lib/components/ConfirmPage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  // The scanner-safe confirm surface (C2). A GET renders this static page — nothing is consumed.
-  // The token rides in a hidden field; only the explicit form POST (the route's default action →
+  // The scanner-safe confirm surface (C2). A GET renders this static page and consumes nothing.
+  // The token rides in a hidden field; only the explicit form POST (the route's default action,
   // confirmSignIn) verifies it. Mail scanners GET URLs but don't submit forms, so prefetch can't
   // burn the link. JS-free by design.
   interface Props {

package/src/lib/components/EditPage.svelte

@@ -1,33 +1,55 @@
 <script lang="ts">
-  // The editor: a per-field frontmatter form (driven by the adapter's `fields`) plus a Carta
-  // markdown editor whose preview runs the site's plugin set (passed as `preview`). Data comes
-  // from `editLoad` merged with `adminLayoutLoad` (siteName); `carta-md` is a peer dependency.
+  // The editor: a per-field frontmatter form (driven by the adapter's `fields`) beside a Carta
+  // markdown editor whose preview runs the site plugin set (`preview`). Content-forward layout:
+  // the editor is the prominent column, frontmatter sits in a side column (R4). A cairn control
+  // row hosts the insert-component palette (R10) and the preview toggle (R12); basic formatting
+  // stays on Carta's built-in toolbar (R11). Data comes from `editLoad` merged with the layout
+  // load (siteName); `carta-md` is a peer dependency.
   import { onMount } from 'svelte';
   import { Carta, MarkdownEditor } from 'carta-md';
   import 'carta-md/default.css';
   import { previewCartaOptions, type PreviewPlugins } from '../carta';
   import type { CairnField } from '../adapter';
+  import type { ComponentRegistry } from '../render';
   import type { EditData } from '../sveltekit';
+  import { cartaEditor } from '../editor';
+  import { dateInputValue } from '../frontmatter';
+  import ComponentPalette from './ComponentPalette.svelte';
 
-  let { data, preview }: { data: EditData & { siteName: string }; preview: PreviewPlugins } = $props();
+  let {
+    data,
+    preview,
+    registry,
+  }: { data: EditData & { siteName: string }; preview: PreviewPlugins; registry?: ComponentRegistry } =
+    $props();
 
   // Body is editable state; the Carta editor's preview runs the exact site plugin set, so it
   // matches the live page. A hidden input carries the current value into the form.
-  // svelte-ignore state_referenced_locally — seeding from the initial load is intended.
+  // svelte-ignore state_referenced_locally (seeding from the initial load is intended)
   let body = $state(data.body);
 
-  // svelte-ignore state_referenced_locally — the preview plugin set is fixed for the load.
+  // svelte-ignore state_referenced_locally (the preview plugin set is fixed for the load)
   const carta = new Carta(previewCartaOptions(preview));
+  const editor = cartaEditor(() => carta);
 
-  // Carta's MarkdownEditor must not render on the worker (it pulls Shiki). onMount fires only
-  // in the browser, so SSR renders the plain textarea and the client swaps in the editor —
-  // the kit-free equivalent of the per-site route's `$app/environment` `browser` guard.
+  // Carta's MarkdownEditor must not render on the worker (it pulls Shiki). onMount fires only in
+  // the browser, so SSR renders the plain textarea and the client swaps in the editor.
   let mounted = $state(false);
+
+  // Preview toggle (R12), persisted per user. 'split' shows the live preview beside the editor;
+  // 'tabs' foregrounds the editor full width with the preview one click away.
+  let mode = $state<'split' | 'tabs'>('split');
   onMount(() => {
     mounted = true;
+    const saved = localStorage.getItem('cairn-admin:preview');
+    if (saved === 'tabs' || saved === 'split') mode = saved;
   });
+  function togglePreview() {
+    mode = mode === 'split' ? 'tabs' : 'split';
+    localStorage.setItem('cairn-admin:preview', mode);
+  }
 
-  // svelte-ignore state_referenced_locally — form defaults from the initial load.
+  // svelte-ignore state_referenced_locally (form defaults from the initial load)
   const fm = data.frontmatter as Record<string, unknown>;
 
   function fmString(key: string): string {
@@ -39,31 +61,58 @@
   function fmFreeTags(key: string): string {
     return Array.isArray(fm[key]) ? (fm[key] as unknown[]).map(String).join(', ') : '';
   }
+
+  // Kind-aware header: a story leads with its date; a page leads with its slug/path.
+  const subtitle = $derived(
+    data.kind === 'page'
+      ? `Page · ${data.path}`
+      : `${data.label} · ${dateInputValue(fm['date']) || data.path}`,
+  );
 </script>
 
 <svelte:head>
-  <title>Edit {data.title} · {data.siteName} CMS</title>
+  <title>{data.isNew ? `New ${data.label} entry` : `Edit ${data.title}`} · {data.siteName} CMS</title>
 </svelte:head>
 
 <div class="flex items-center justify-between gap-4">
   <div>
-    <a href="/admin" class="text-sm opacity-70 hover:underline">← Back</a>
-    <h1 class="mt-1 text-2xl font-bold">{data.title}</h1>
-    <p class="text-sm opacity-60">{data.label} · {data.path}</p>
+    <a href="/admin/{data.type}" class="text-sm opacity-70 hover:underline">← Back to {data.label}</a>
+    <h1 class="mt-1 text-2xl font-bold">{data.isNew ? `New ${data.label} entry` : data.title}</h1>
+    <p class="text-sm opacity-60">{subtitle}</p>
   </div>
 </div>
 
 {#if data.saved}
-  <div class="alert alert-success mt-6"><span>Saved — committed to main; the site will redeploy.</span></div>
+  <div class="alert alert-success mt-6"><span>Saved. Committed to main; the site will redeploy.</span></div>
 {:else if data.error}
   <div class="alert alert-error mt-6"><span>{data.error}</span></div>
 {/if}
 
-<form method="POST" action="/admin/save" class="mt-6 flex flex-col gap-5">
+<form method="POST" action="/admin/save" class="mt-6 flex flex-col gap-5 lg:grid lg:grid-cols-[1fr_20rem] lg:items-start">
   <input type="hidden" name="type" value={data.type} />
   <input type="hidden" name="id" value={data.id} />
+  {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
+
+  <!-- Editor column (content-forward: first and widest) -->
+  <div class="flex flex-col gap-3 lg:order-1">
+    <div class="flex items-center justify-between gap-2">
+      <ComponentPalette {registry} insert={(template) => editor.insertComponent(template)} />
+      <button type="button" class="btn btn-sm btn-ghost" onclick={togglePreview}>
+        {mode === 'split' ? 'Hide preview' : 'Show preview'}
+      </button>
+    </div>
+    <div class="rounded-box border border-base-300 bg-base-100 p-2">
+      <input type="hidden" name="body" value={body} />
+      {#if mounted}
+        <MarkdownEditor {carta} bind:value={body} {mode} />
+      {:else}
+        <textarea bind:value={body} rows="20" class="textarea w-full font-mono"></textarea>
+      {/if}
+    </div>
+  </div>
 
-  <fieldset class="grid gap-4 rounded-box border border-base-300 bg-base-100 p-6">
+  <!-- Frontmatter side column -->
+  <fieldset class="grid gap-4 rounded-box border border-base-300 bg-base-100 p-6 lg:order-2">
     {#each data.fields as field (field.name)}
       {#if field.type === 'text' || field.type === 'date'}
         <label class="flex flex-col gap-1">
@@ -72,7 +121,7 @@
             type={field.type === 'date' ? 'date' : 'text'}
             name={field.name}
             required={field.required}
-            value={fmString(field.name)}
+            value={field.type === 'date' ? dateInputValue(fm[field.name]) : fmString(field.name)}
             class="input w-full"
           />
         </label>
@@ -108,18 +157,7 @@
         </label>
       {/if}
     {/each}
-  </fieldset>
-
-  <div class="rounded-box border border-base-300 bg-base-100 p-2">
-    <input type="hidden" name="body" value={body} />
-    {#if mounted}
-      <MarkdownEditor {carta} bind:value={body} mode="tabs" />
-    {:else}
-      <textarea bind:value={body} rows="20" class="textarea w-full font-mono"></textarea>
-    {/if}
-  </div>
 
-  <div class="flex justify-end">
-    <button type="submit" class="btn btn-primary">Save &amp; commit</button>
-  </div>
+    <button type="submit" class="btn btn-primary mt-2">{data.isNew ? 'Create & commit' : 'Save & commit'}</button>
+  </fieldset>
 </form>