@glw907/cairn-cms 0.29.0 → 0.34.0

package/src/lib/components/ConceptList.svelte

@@ -1,19 +1,96 @@
 <!--
 @component
-One concept's list view: every entry as a link to its editor, with title, date, and a draft badge,
-plus a new-entry form. The slug auto-derives from the title until the author edits the slug field.
+One concept's list view as a DaisyUI data-table: a search filter, a result count, sortable Title and
+Date headers, a status badge, a formatted date, and client-side pagination with a page-size control.
+Filtering, sorting, and paging run over the loaded entries in component state, which suits typical
+content sizes. The header New button opens a dialog holding the create form.
 -->
 <script lang="ts">
   import { slugify } from '../content/ids.js';
-  import type { ListData } from '../sveltekit/content-routes.js';
+  import type { EntrySummary, ListData } from '../sveltekit/content-routes.js';
+  import type { InboundLink } from '../content/manifest.js';
+  import DeleteDialog from './DeleteDialog.svelte';
+  import CairnLogo from './CairnLogo.svelte';
+  import { SearchIcon, ArrowUpIcon, ArrowDownIcon, ChevronsUpDownIcon, ChevronLeftIcon, ChevronRightIcon, PlusIcon, Trash2Icon } from './admin-icons.js';
 
   interface Props {
     /** The list load's data: the concept, its entries, and any inline or form errors. */
     data: ListData;
+    /** The `?/delete` action result. A blocked delete returns the refused entry id and the inbound
+     *  links that link to it (the flat `fail(409, { inboundLinks, id })` shape), so the list names
+     *  the blockers and refuses (block-until-clean). */
+    form?: { id?: string; inboundLinks?: InboundLink[] } | null;
   }
 
-  let { data }: Props = $props();
+  let { data, form = null }: Props = $props();
 
+  // The entry a `?/delete` refused, and its inbound links, keyed by the posted id. Null when the
+  // last submit succeeded, refused nothing, or none ran.
+  const deleteRefused = $derived(
+    form?.inboundLinks?.length ? { id: form.id, inboundLinks: form.inboundLinks } : null,
+  );
+
+  type SortKey = 'title' | 'date';
+  let query = $state('');
+  let sortKey = $state<SortKey>('date');
+  // Newest first by default: a dated concept reads most-recent-on-top, the usual CMS convention.
+  let sortAsc = $state(false);
+  let pageSize = $state(10);
+  let page = $state(1);
+
+  const dateFmt = new Intl.DateTimeFormat(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+  function formatDate(iso: string | null): string {
+    if (!iso) return '';
+    const parsed = new Date(`${iso}T00:00:00`);
+    return Number.isNaN(parsed.getTime()) ? iso : dateFmt.format(parsed);
+  }
+
+  const filtered = $derived(
+    data.entries.filter((e) => e.title.toLowerCase().includes(query.trim().toLowerCase())),
+  );
+
+  // Sort key for one entry: the lowercased title, or the ISO date string (lexical order is
+  // chronological). A null date sorts as the empty string.
+  function sortValue(entry: EntrySummary): string {
+    if (sortKey === 'title') return entry.title.toLowerCase();
+    return entry.date ?? '';
+  }
+
+  // Codepoint compare, matching the prior `<`/`>` ordering exactly. Avoids localeCompare so the
+  // order stays identical to before this refactor.
+  function compareStrings(a: string, b: string): number {
+    if (a < b) return -1;
+    if (a > b) return 1;
+    return 0;
+  }
+
+  const sorted = $derived(
+    [...filtered].sort((a, b) => {
+      const cmp = compareStrings(sortValue(a), sortValue(b));
+      return sortAsc ? cmp : -cmp;
+    }),
+  );
+
+  const pageCount = $derived(Math.max(1, Math.ceil(sorted.length / pageSize)));
+  // Clamp the page when filtering shrinks the result set below the current page.
+  $effect(() => {
+    if (page > pageCount) page = pageCount;
+  });
+  const pageRows = $derived(sorted.slice((page - 1) * pageSize, page * pageSize));
+
+  function toggleSort(key: SortKey) {
+    if (sortKey === key) sortAsc = !sortAsc;
+    else {
+      sortKey = key;
+      sortAsc = true;
+    }
+    page = 1;
+  }
+
+  // --- create form state, shown in a header-triggered dialog ---
+  let createDialog = $state<HTMLDialogElement>();
+  // Pending from submit until the create navigation lands, so the button shows a calm working state.
+  let creating = $state(false);
   let title = $state('');
   let slug = $state('');
   let slugEdited = $state(false);
@@ -22,64 +99,182 @@ plus a new-entry form. The slug auto-derives from the title until the author edi
   $effect(() => {
     dateDefault = new Date().toISOString().slice(0, 10);
   });
-
   const derivedSlug = $derived(slugEdited ? slug : slugify(title));
   const slugPlaceholder = $derived(data.dated ? 'my-entry' : 'about-us');
+
+  // Shared column-header typography: small uppercase muted labels. The sort buttons add their own
+  // flex layout and a hover affordance on top of this.
+  const headerLabel = 'text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]';
+  const sortButton = `inline-flex items-center gap-1 ${headerLabel} hover:text-base-content`;
 </script>
 
-<header class="mb-4 flex items-center justify-between">
-  <h1 class="text-xl font-semibold">{data.label}</h1>
+<header class="mb-6 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
+  <h1 class="text-2xl font-bold tracking-tight font-[family-name:var(--font-display)]">{data.label}</h1>
+  <div class="flex items-center gap-3 sm:flex-1 sm:flex-wrap sm:justify-end">
+    <label class="input input-sm min-w-0 flex-1 sm:max-w-xs">
+      <SearchIcon class="h-4 w-4 opacity-60" aria-hidden="true" />
+      <input type="search" aria-label="Search {data.label}" bind:value={query} placeholder="Search {data.label.toLowerCase()}" oninput={() => (page = 1)} />
+    </label>
+    <button type="button" class="btn btn-primary btn-sm shrink-0" aria-haspopup="dialog" onclick={() => createDialog?.showModal()}>
+      <PlusIcon class="h-4 w-4" /> New {data.label}
+    </button>
+  </div>
 </header>
 
 {#if data.formError}
   <div role="alert" class="alert alert-error mb-4 text-sm">{data.formError}</div>
 {/if}
-
 {#if data.error}
   <div role="alert" class="alert alert-warning mb-4 text-sm">{data.error}</div>
 {/if}
 
-<div class="rounded-box border border-base-300 bg-base-100 mb-6">
-  {#if data.entries.length === 0}
-    <p class="p-4 text-sm opacity-70">No entries yet.</p>
-  {:else}
-    <ul class="menu w-full">
-      {#each data.entries as entry (entry.id)}
+{#if deleteRefused}
+  <!-- A `?/delete` was refused: name the blockers up front, matching the editor's refusal banner,
+       so the author sees why without re-opening a dialog. -->
+  <div role="alert" aria-label="This {data.label.toLowerCase()} could not be deleted" class="alert alert-error mb-4 flex-col items-start text-sm">
+    <p class="font-medium">This {data.label.toLowerCase()} could not be deleted.</p>
+    <p>{deleteRefused.inboundLinks.length} {deleteRefused.inboundLinks.length === 1 ? 'page links' : 'pages link'} to it. Remove or repoint the {deleteRefused.inboundLinks.length === 1 ? 'link' : 'links'} listed below, then delete again.</p>
+    <ul class="mt-1 w-full">
+      {#each deleteRefused.inboundLinks as link (link.concept + '/' + link.id)}
         <li>
-          <a href={`/admin/${data.conceptId}/${entry.id}`} class="flex items-center justify-between">
-            <span>{entry.title}</span>
-            <span class="flex items-center gap-2 text-xs text-[var(--color-muted)]">
-              {#if entry.date}<span>{entry.date}</span>{/if}
-              {#if entry.draft}<span class="badge badge-warning badge-sm">Draft</span>{/if}
-            </span>
-          </a>
+          <a class="link" href={`/admin/${link.concept}/${link.id}`}>{link.title}</a>
         </li>
       {/each}
     </ul>
+  </div>
+{/if}
+
+<div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 mb-4 overflow-x-auto shadow-[var(--cairn-shadow)]">
+  {#if data.entries.length === 0}
+    <div class="flex flex-col items-center gap-4 px-6 py-16 text-center">
+      <CairnLogo class="h-12 w-12 text-primary opacity-30" />
+      <div class="space-y-1">
+        <p class="font-semibold text-base-content">No {data.label.toLowerCase()} yet</p>
+        <p class="text-sm text-[var(--color-muted)]">Stack your first one and it will show up here.</p>
+      </div>
+      <button type="button" class="btn btn-primary btn-sm" aria-haspopup="dialog" onclick={() => createDialog?.showModal()}>
+        <PlusIcon class="h-4 w-4" /> New {data.label}
+      </button>
+    </div>
+  {:else if sorted.length === 0}
+    <div role="status" class="flex flex-col items-center gap-3 px-6 py-14 text-center">
+      <SearchIcon class="h-8 w-8 text-[var(--color-subtle)] opacity-40" aria-hidden="true" />
+      <p class="text-sm text-[var(--color-muted)]">No {data.label.toLowerCase()} match <span class="font-medium text-base-content">"{query}"</span>.</p>
+    </div>
+  {:else}
+    <table class="table">
+      <thead>
+        <tr class="border-base-300">
+          <th aria-sort={sortKey === 'title' ? (sortAsc ? 'ascending' : 'descending') : 'none'}>
+            <button type="button" class={sortButton} aria-label="Sort by title" onclick={() => toggleSort('title')}>
+              Title
+              {#if sortKey === 'title'}
+                {#if sortAsc}<ArrowUpIcon class="h-3 w-3" aria-hidden="true" />{:else}<ArrowDownIcon class="h-3 w-3" aria-hidden="true" />{/if}
+              {:else}<ChevronsUpDownIcon class="h-3 w-3 opacity-40" aria-hidden="true" />{/if}
+            </button>
+          </th>
+          {#if data.dated}
+            <th class="hidden sm:table-cell" aria-sort={sortKey === 'date' ? (sortAsc ? 'ascending' : 'descending') : 'none'}>
+              <button type="button" class={sortButton} aria-label="Sort by date" onclick={() => toggleSort('date')}>
+                Date
+                {#if sortKey === 'date'}
+                  {#if sortAsc}<ArrowUpIcon class="h-3 w-3" aria-hidden="true" />{:else}<ArrowDownIcon class="h-3 w-3" aria-hidden="true" />{/if}
+                {:else}<ChevronsUpDownIcon class="h-3 w-3 opacity-40" aria-hidden="true" />{/if}
+              </button>
+            </th>
+          {/if}
+          <th class={headerLabel}>Status</th>
+          <th class="text-right"><span class="sr-only">Actions</span></th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each pageRows as entry (entry.id)}
+          <tr class="transition-colors hover:bg-base-200/60">
+            <td><a class="font-medium hover:text-primary hover:underline" href={`/admin/${data.conceptId}/${entry.id}`}>{entry.title}</a></td>
+            {#if data.dated}<td class="hidden text-sm text-[var(--color-muted)] sm:table-cell">{formatDate(entry.date)}</td>{/if}
+            <td>
+              {#if entry.draft}<span class="badge badge-warning badge-sm font-medium">Draft</span>
+              {:else}<span class="badge badge-ghost badge-sm font-medium">Published</span>{/if}
+            </td>
+            <td class="text-right">
+              {#if deleteRefused?.id === entry.id}
+                <!-- A prior delete was refused: DeleteDialog names the blockers and offers no confirm. -->
+                <DeleteDialog conceptId={data.conceptId} id={entry.id} label={data.label} inboundLinks={deleteRefused.inboundLinks} />
+              {:else}
+                <form method="POST" action="?/delete">
+                  <input type="hidden" name="id" value={entry.id} />
+                  <button type="submit" class="btn btn-ghost btn-sm" aria-label="Delete {entry.title}">
+                    <Trash2Icon class="h-4 w-4 text-error" />
+                  </button>
+                </form>
+              {/if}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
   {/if}
 </div>
 
-<form method="POST" action="?/create" class="rounded-box border border-base-300 bg-base-100 flex flex-col gap-3 p-4">
-  <h2 class="text-sm font-semibold">New entry</h2>
-  <label class="flex flex-col gap-1">
-    <span class="text-sm font-medium">Title</span>
-    <input class="input" name="title" bind:value={title} required />
-  </label>
-  <label class="flex flex-col gap-1">
-    <span class="text-sm font-medium">Slug</span>
-    <input
-      class="input"
-      name="slug"
-      placeholder={slugPlaceholder}
-      value={derivedSlug}
-      oninput={(e) => { slugEdited = true; slug = e.currentTarget.value; }}
-    />
-  </label>
-  {#if data.dated}
-    <label class="flex flex-col gap-1">
-      <span class="text-sm font-medium">Date</span>
-      <input class="input" type="date" name="date" value={dateDefault} />
-    </label>
-  {/if}
-  <button type="submit" class="btn btn-primary self-start">Create</button>
-</form>
+{#if data.entries.length > 0}
+  <div class="mb-6 flex flex-wrap items-center justify-between gap-2 text-sm">
+    <span role="status" class="text-[var(--color-muted)]">{sorted.length} of {data.entries.length}</span>
+    <div class="flex items-center gap-2">
+      <label class="flex items-center gap-1">
+        <span class="sr-only">Rows per page</span>
+        <select class="select select-sm" bind:value={pageSize} onchange={() => (page = 1)} aria-label="Rows per page">
+          <option value={10}>10</option>
+          <option value={25}>25</option>
+          <option value={50}>50</option>
+        </select>
+      </label>
+      <button type="button" class="btn btn-sm btn-ghost" aria-label="Previous page" disabled={page <= 1} onclick={() => (page -= 1)}>
+        <ChevronLeftIcon class="h-4 w-4" />
+      </button>
+      <span>Page {page} of {pageCount}</span>
+      <button type="button" class="btn btn-sm btn-ghost" aria-label="Next page" disabled={page >= pageCount} onclick={() => (page += 1)}>
+        <ChevronRightIcon class="h-4 w-4" />
+      </button>
+    </div>
+  </div>
+{/if}
+
+<dialog class="modal" aria-labelledby="cairn-create-dialog-title" bind:this={createDialog}>
+  <div class="modal-box">
+    <div class="mb-3 flex items-center justify-between">
+      <h2 id="cairn-create-dialog-title" class="text-base font-semibold">New {data.label}</h2>
+      <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={() => createDialog?.close()}>✕</button>
+    </div>
+    <form method="POST" action="?/create" onsubmit={() => (creating = true)} class="flex flex-col gap-3">
+      <label class="flex flex-col gap-1">
+        <span class="text-sm font-medium">Title</span>
+        <input class="input w-full" name="title" bind:value={title} required />
+      </label>
+      <label class="flex flex-col gap-1">
+        <span class="text-sm font-medium">Slug</span>
+        <input
+          class="input w-full"
+          name="slug"
+          placeholder={slugPlaceholder}
+          value={derivedSlug}
+          oninput={(e) => { slugEdited = true; slug = e.currentTarget.value; }}
+        />
+      </label>
+      {#if data.dated}
+        <label class="flex flex-col gap-1">
+          <span class="text-sm font-medium">Date</span>
+          <input class="input w-full" type="date" name="date" value={dateDefault} />
+        </label>
+      {/if}
+      <div class="modal-action">
+        <button type="button" class="btn btn-sm" onclick={() => createDialog?.close()}>Cancel</button>
+        <button type="submit" class="btn btn-sm btn-primary" disabled={creating}>
+          {#if creating}<span class="loading loading-spinner loading-xs" aria-hidden="true"></span> Creating…{:else}Create{/if}
+        </button>
+      </div>
+    </form>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button tabindex="-1" aria-label="Close">close</button>
+  </form>
+</dialog>

package/src/lib/components/ConfirmPage.svelte

@@ -5,6 +5,8 @@ in a hidden field and consumes nothing; only the explicit POST verifies (spec §
 -->
 <script lang="ts">
   import './cairn-admin.css';
+  import CairnLogo from './CairnLogo.svelte';
+  import { cairnFaviconHref } from './cairn-favicon.js';
 
   interface Props {
     /** The confirm load's data: the token to submit, the site name, and an optional error. */
@@ -15,20 +17,35 @@ in a hidden field and consumes nothing; only the explicit POST verifies (spec §
 </script>
 
 <svelte:head>
+  <title>Confirm sign-in · Cairn</title>
+  <link rel="icon" href={cairnFaviconHref} />
   <meta name="robots" content="noindex, nofollow" />
 </svelte:head>
 
-<div data-theme="cairn-admin" class="bg-base-200 text-base-content flex min-h-screen items-center justify-center p-4">
-  <div class="rounded-box border border-base-300 bg-base-100 w-full max-w-sm p-6 text-center shadow">
-    <h1 class="mb-4 text-lg font-semibold">Sign in to {data.siteName}</h1>
+<!-- data-theme on a bare wrapper: the scoped sheet styles descendants, so the layout classes go one
+     level in (a class on the theme element itself would not match). -->
+<div data-theme="cairn-admin">
+  <div class="flex min-h-screen flex-col items-center justify-center gap-6 bg-base-200 p-4 text-base-content">
+  <div class="w-full max-w-sm rounded-box border border-[var(--cairn-card-border)] bg-base-100 p-7 text-center shadow-[var(--cairn-shadow)]">
+    <div class="mb-6 flex items-center justify-center gap-2">
+      <CairnLogo class="h-8 w-8 text-primary" />
+      <span class="text-xl font-bold tracking-[-0.01em] font-[family-name:var(--font-display)]">Cairn</span>
+    </div>
+
     {#if data.error || !data.token}
+      <h1 class="mb-2 text-lg font-semibold">This link didn't work</h1>
       <div role="alert" class="alert alert-error text-sm">This sign-in link is invalid or expired.</div>
       <a href="/admin/login" class="btn btn-ghost btn-sm mt-4">Request a new link</a>
     {:else}
+      <h1 class="text-lg font-semibold">Almost there</h1>
+      <p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Confirm to finish signing in to {data.siteName}.</p>
       <form method="POST">
         <input type="hidden" name="token" value={data.token} />
         <button type="submit" class="btn btn-primary btn-block">Confirm sign-in</button>
       </form>
     {/if}
   </div>
+
+  <p class="text-xs text-[var(--color-muted)]">Powered by Cairn</p>
+  </div>
 </div>

package/src/lib/components/EditPage.svelte

@@ -42,6 +42,9 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   // body, so it falls back to the committed data.body. untrack() captures the initial value without
   // subscribing to future prop changes.
   let body = $state(untrack(() => form?.body ?? data.body));
+  // True from the moment the save form submits until the navigation it triggers replaces the page,
+  // so the Save button shows a calm "Saving…" state instead of looking inert.
+  let saving = $state(false);
   let showPreview = $state(false);
   let previewHtml = $state('');
   let insert = $state.raw<(text: string) => void>(() => {});
@@ -148,9 +151,9 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   }
 </script>
 
-<header class="mb-4 flex items-center justify-between gap-2">
+<header class="mb-6 flex items-center justify-between gap-2">
   <div>
-    <h1 class="text-xl font-semibold">{data.title}</h1>
+    <h1 class="text-2xl font-bold tracking-tight font-[family-name:var(--font-display)]">{data.title}</h1>
     <p class="text-xs text-[var(--color-muted)]">{data.label}: {data.id}</p>
   </div>
   <div class="flex items-center gap-2">
@@ -217,11 +220,11 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   </div>
 {/if}
 
-<form method="POST" action="?/save" class="lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6">
+<form method="POST" action="?/save" onsubmit={() => (saving = true)} class="lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6">
   {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
 
   <div class="lg:order-1">
-    <div class="rounded-box border border-base-300 bg-base-100 overflow-hidden">
+    <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 overflow-hidden shadow-[var(--cairn-shadow)]">
       <MarkdownEditor
         bind:value={body}
         name="body"
@@ -234,7 +237,7 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
       <section
         id="cairn-preview"
         aria-label="Preview"
-        class="rounded-box border border-base-300 bg-base-100 prose mt-4 max-w-none p-4"
+        class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 prose mt-4 max-w-none p-4 shadow-[var(--cairn-shadow)]"
       >
         {@html previewHtml}
       </section>
@@ -242,7 +245,7 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   </div>
 
   <aside class="lg:order-2 mt-4 lg:mt-0">
-    <fieldset class="rounded-box border border-base-300 bg-base-100 flex flex-col gap-3 p-4">
+    <fieldset class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 flex flex-col gap-3 p-4 shadow-[var(--cairn-shadow)]">
       <legend class="sr-only">Frontmatter</legend>
       {#each data.fields as field (field.name)}
         {#if field.type === 'textarea'}
@@ -301,7 +304,9 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
           </label>
         {/if}
       {/each}
-      <button type="submit" class="btn btn-primary mt-2">Save</button>
+      <button type="submit" class="btn btn-primary mt-3" disabled={saving}>
+        {#if saving}<span class="loading loading-spinner loading-sm" aria-hidden="true"></span> Saving…{:else}Save{/if}
+      </button>
     </fieldset>
   </aside>
 </form>

package/src/lib/components/LoginPage.svelte

@@ -6,6 +6,10 @@ the allowlist, so the page never leaks membership (spec §7.1).
 -->
 <script lang="ts">
   import './cairn-admin.css';
+  import { onMount } from 'svelte';
+  import CairnLogo from './CairnLogo.svelte';
+  import { cairnFaviconHref } from './cairn-favicon.js';
+  import { warnIfChromeWrapped } from './chrome-guard.js';
 
   interface Props {
     /** The login load's data: the site name and an optional error. */
@@ -15,16 +19,31 @@ the allowlist, so the page never leaks membership (spec §7.1).
   }
 
   let { data, form }: Props = $props();
+
+  let rootEl = $state<HTMLElement>();
+  onMount(() => {
+    if (rootEl) warnIfChromeWrapped(rootEl);
+  });
 </script>
 
 <svelte:head>
+  <title>Sign in · Cairn</title>
+  <link rel="icon" href={cairnFaviconHref} />
   <meta name="robots" content="noindex, nofollow" />
 </svelte:head>
 
-<div data-theme="cairn-admin" class="bg-base-200 text-base-content flex min-h-screen items-center justify-center p-4">
-  <div class="rounded-box border border-base-300 bg-base-100 w-full max-w-sm p-6 shadow">
-    <h1 class="mb-1 text-lg font-semibold">Sign in to {data.siteName}</h1>
-    <p class="mb-4 text-sm text-[var(--color-muted)]">Enter your email and we'll send a sign-in link.</p>
+<!-- data-theme on a bare wrapper: the scoped sheet styles descendants, so the layout classes go one
+     level in (a class on the theme element itself would not match). -->
+<div data-theme="cairn-admin" bind:this={rootEl}>
+  <div class="flex min-h-screen flex-col items-center justify-center gap-6 bg-base-200 p-4 text-base-content">
+  <div class="w-full max-w-sm rounded-box border border-[var(--cairn-card-border)] bg-base-100 p-7 shadow-[var(--cairn-shadow)]">
+    <div class="mb-6 flex items-center gap-2">
+      <CairnLogo class="h-8 w-8 text-primary" />
+      <span class="text-xl font-bold tracking-[-0.01em] font-[family-name:var(--font-display)]">Cairn</span>
+    </div>
+
+    <h1 class="text-lg font-semibold">Sign in to {data.siteName}</h1>
+    <p class="mt-1 mb-5 text-sm text-[var(--color-muted)]">Enter your email. We'll send a one-time sign-in link.</p>
 
     {#if form?.sent}
       <div role="status" class="alert alert-success text-sm">
@@ -32,7 +51,7 @@ the allowlist, so the page never leaks membership (spec §7.1).
       </div>
     {:else}
       {#if data.error}
-        <div role="alert" class="alert alert-error mb-3 text-sm">That link expired. Request a new one.</div>
+        <div role="alert" class="alert alert-error mb-3 text-sm">That link expired. Request a new one below.</div>
       {/if}
       <form method="POST" class="flex flex-col gap-3">
         <label class="flex flex-col gap-1">
@@ -51,4 +70,7 @@ the allowlist, so the page never leaks membership (spec §7.1).
       </form>
     {/if}
   </div>
+
+  <p class="text-xs text-[var(--color-muted)]">Powered by Cairn</p>
+  </div>
 </div>

package/src/lib/components/ManageEditors.svelte

@@ -16,20 +16,23 @@ named `?/setRole`, `?/remove`, and `?/add` actions.
   }
 
   let { data, form }: Props = $props();
+
+  // Eyebrow styling for the table column headers, matching the concept list.
+  const col = 'text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]';
 </script>
 
-<header class="mb-4">
-  <h1 class="text-xl font-semibold">Editors</h1>
+<header class="mb-6">
+  <h1 class="text-2xl font-bold tracking-tight font-[family-name:var(--font-display)]">Editors</h1>
 </header>
 
 {#if form?.error}
   <div role="alert" class="alert alert-error mb-4 text-sm">{form.error}</div>
 {/if}
 
-<div class="overflow-x-auto rounded-box border border-base-300 bg-base-100 mb-6">
+<div class="overflow-x-auto rounded-box border border-[var(--cairn-card-border)] bg-base-100 mb-4 shadow-[var(--cairn-shadow)]">
   <table class="table">
     <thead>
-      <tr><th scope="col">Name</th><th scope="col">Email</th><th scope="col">Role</th><th scope="col"><span class="sr-only">Actions</span></th></tr>
+      <tr><th scope="col" class={col}>Name</th><th scope="col" class={col}>Email</th><th scope="col" class={col}>Role</th><th scope="col"><span class="sr-only">Actions</span></th></tr>
     </thead>
     <tbody>
       {#each data.editors as editor (editor.email)}
@@ -61,7 +64,7 @@ named `?/setRole`, `?/remove`, and `?/add` actions.
   </table>
 </div>
 
-<form method="POST" action="?/add" class="rounded-box border border-base-300 bg-base-100 grid gap-3 p-4 sm:grid-cols-[1fr_1fr_auto_auto] sm:items-end">
+<form method="POST" action="?/add" class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 grid gap-3 p-4 shadow-[var(--cairn-shadow)] sm:grid-cols-[1fr_1fr_auto_auto] sm:items-end">
   <label class="flex flex-col gap-1">
     <span class="text-sm font-medium">Name</span>
     <input class="input" name="name" aria-label="Name" required />

package/src/lib/components/NavTree.svelte

@@ -88,7 +88,7 @@ validates on save.
   }
 </script>
 
-<h1 class="mb-4 text-xl font-semibold">{data.menu.label}</h1>
+<h1 class="mb-6 text-2xl font-bold tracking-tight font-[family-name:var(--font-display)]">{data.menu.label}</h1>
 
 {#if data.saved}
   <div role="status" class="alert alert-success mb-4 text-sm">Navigation saved.</div>
@@ -104,7 +104,7 @@ validates on save.
     <button type="button" class="btn btn-sm" onclick={addRow}>Add item</button>
   </div>
 
-  <div class="sortable-list-area" style="min-height:2.5rem">
+  <div class="sortable-list-area rounded-box border border-[var(--cairn-card-border)] bg-base-100 p-2 shadow-[var(--cairn-shadow)]" style="min-height:2.5rem">
     <SortableList.Root ondragend={handleDragEnd} aria-label="Navigation items">
       {#each rows as row, index (row.id)}
         <SortableList.Item id={row.id} {index} aria-label={`${row.label || 'Untitled'}, level ${row.depth + 1}`}>

package/src/lib/components/admin-icons.ts

@@ -0,0 +1,15 @@
+// The fixed set of Lucide glyphs the admin chrome uses, each a per-icon import so only these ship.
+// Components import from here, which keeps one import surface and documents the chrome's icon set.
+export { default as MenuIcon } from '@lucide/svelte/icons/menu';
+export { default as SearchIcon } from '@lucide/svelte/icons/search';
+export { default as ArrowUpIcon } from '@lucide/svelte/icons/arrow-up';
+export { default as ArrowDownIcon } from '@lucide/svelte/icons/arrow-down';
+export { default as ChevronsUpDownIcon } from '@lucide/svelte/icons/chevrons-up-down';
+export { default as PencilIcon } from '@lucide/svelte/icons/pencil';
+export { default as Trash2Icon } from '@lucide/svelte/icons/trash-2';
+export { default as PlusIcon } from '@lucide/svelte/icons/plus';
+export { default as LogOutIcon } from '@lucide/svelte/icons/log-out';
+export { default as SunIcon } from '@lucide/svelte/icons/sun';
+export { default as MoonIcon } from '@lucide/svelte/icons/moon';
+export { default as ChevronLeftIcon } from '@lucide/svelte/icons/chevron-left';
+export { default as ChevronRightIcon } from '@lucide/svelte/icons/chevron-right';