@glw907/cairn-cms 0.54.0 → 0.56.0

package/dist/sveltekit/content-routes.js

@@ -6,6 +6,8 @@ import { redirect, error, fail } from '@sveltejs/kit';
 import { findConcept } from '../content/concepts.js';
 import { extractCairnLinks, formatCairnToken, rewriteCairnLink } from '../content/links.js';
 import { frontmatterFromForm, parseMarkdown, dateInputValue, serializeMarkdown } from '../content/frontmatter.js';
+import { deriveExcerpt } from '../content/excerpt.js';
+import { asString } from '../content/identity.js';
 import { isValidId, slugify, filenameFromId, composeDatedId, slugFromId, renameId } from '../content/ids.js';
 import { appCredentials } from '../github/credentials.js';
 import { listMarkdown, readRaw, commitFiles } from '../github/repo.js';
@@ -108,14 +110,17 @@ export function createContentRoutes(runtime, deps = {}) {
         try {
             const raw = await readRaw(repo, file.path, token);
             if (raw === null)
-                return { id: file.id, title: file.id, date: null, draft: false, status };
-            const { frontmatter } = parseMarkdown(raw);
+                return { id: file.id, title: file.id, date: null, draft: false, status, summary: null };
+            const { frontmatter, body } = parseMarkdown(raw);
             const title = typeof frontmatter.title === 'string' && frontmatter.title.trim() ? frontmatter.title : file.id;
             const date = dateInputValue(frontmatter.date) || null;
-            return { id: file.id, title, date, draft: frontmatter.draft === true, status };
+            // Normalize an empty excerpt to null, so a pending row matches EntrySummary's `string | null`
+            // contract (the published builder already coalesces with `?? null`).
+            const summary = deriveExcerpt(body, { description: asString(frontmatter.description) }) || null;
+            return { id: file.id, title, date, draft: frontmatter.draft === true, status, summary };
         }
         catch {
-            return { id: file.id, title: file.id, date: null, draft: false, status };
+            return { id: file.id, title: file.id, date: null, draft: false, status, summary: null };
         }
     }
     /** Read an entry's list row from its pending branch, so a pending title or draft change shows
@@ -149,7 +154,7 @@ export function createContentRoutes(runtime, deps = {}) {
         const formError = event.url.searchParams.get('error');
         const publishedAllRaw = event.url.searchParams.get('publishedAll');
         const publishedAll = publishedAllRaw !== null && /^\d+$/.test(publishedAllRaw) ? Number(publishedAllRaw) : null;
-        const base = { conceptId: concept.id, label: concept.label, dated: concept.routing.dated, formError, publishedAll };
+        const base = { conceptId: concept.id, label: concept.label, singular: concept.singular, dated: concept.routing.dated, formError, publishedAll };
         let token;
         try {
             token = await mintToken(event.platform?.env ?? {});
@@ -177,7 +182,7 @@ export function createContentRoutes(runtime, deps = {}) {
                 .sort((a, b) => b.id.localeCompare(a.id));
             const entries = await Promise.all(rows.map((e) => pendingIds.has(e.id)
                 ? pendingRow(concept, e.id, 'edited', token)
-                : { id: e.id, title: e.title, date: e.date ?? null, draft: e.draft, status: 'published' }));
+                : { id: e.id, title: e.title, date: e.date ?? null, draft: e.draft, status: 'published', summary: e.summary ?? null }));
             const listed = new Set(rows.map((e) => e.id));
             const newRows = await Promise.all([...pendingIds].filter((id) => !listed.has(id)).map((id) => pendingRow(concept, id, 'new', token)));
             return { ...base, entries: [...entries, ...newRows], error: null };

package/dist/sveltekit/index.d.ts

@@ -10,3 +10,4 @@ export { createCairnAdmin, type CairnAdminDeps, type AdminData } from './cairn-a
 export { healthLoad, type HealthData } from './health.js';
 export type { RequestContext, CookieJar, HandleInput } from './types.js';
 export type { GithubKeyEnv } from '../github/credentials.js';
+export type { AuthEnv } from '../auth/types.js';

package/dist/vite/index.d.ts

@@ -25,10 +25,12 @@ export declare function buildManifestFromVite(opts: CairnManifestOptions, root:
  *  buildStart, evaluates it through a nested Vite SSR load so a manifest drift fails the build. */
 export declare function cairnManifest(opts: CairnManifestOptions): Plugin;
 /** Regenerate the committed manifest from the consumer's corpus and write it to the configured
- *  manifestPath. It loads the consumer's Vite config from `cwd`, reads the cairnManifest plugin's
- *  options off the instance, evaluates the write-mode virtual module through the build's own
- *  resolution, and writes the serialized manifest. The cairn-manifest bin calls this; it is exported
- *  so the write logic is testable apart from the CLI shell. */
+ *  manifestPath. It searches for the consumer's Vite config from `cwd`, derives the authoritative
+ *  Vite root from the loaded config (so a configured `root` or a non-root cwd resolves correctly),
+ *  reads the cairnManifest plugin's options off the instance, evaluates the write-mode virtual
+ *  module through the build's own resolution, and writes the serialized manifest under the Vite
+ *  root. The cairn-manifest bin calls this; it is exported so the write logic is testable apart
+ *  from the CLI shell. */
 export declare function writeManifest(cwd?: string): Promise<void>;
 /** The repo and sender facts cairn-doctor derives off the consumer's adapter. */
 export interface AdapterFacts {

package/dist/vite/index.js

@@ -1,5 +1,6 @@
 import { writeFile, mkdir } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
+import { resolveViteRoot } from './resolve-root.js';
 /** The key the cairnManifest plugin stashes its options under, so the write path can read them off the
  *  plugin instance in the consumer's loaded config without re-parsing the config file. */
 const CAIRN_OPTIONS = Symbol.for('cairn-cms.manifest-options');
@@ -121,10 +122,12 @@ export function cairnManifest(opts) {
     return plugin;
 }
 /** Regenerate the committed manifest from the consumer's corpus and write it to the configured
- *  manifestPath. It loads the consumer's Vite config from `cwd`, reads the cairnManifest plugin's
- *  options off the instance, evaluates the write-mode virtual module through the build's own
- *  resolution, and writes the serialized manifest. The cairn-manifest bin calls this; it is exported
- *  so the write logic is testable apart from the CLI shell. */
+ *  manifestPath. It searches for the consumer's Vite config from `cwd`, derives the authoritative
+ *  Vite root from the loaded config (so a configured `root` or a non-root cwd resolves correctly),
+ *  reads the cairnManifest plugin's options off the instance, evaluates the write-mode virtual
+ *  module through the build's own resolution, and writes the serialized manifest under the Vite
+ *  root. The cairn-manifest bin calls this; it is exported so the write logic is testable apart
+ *  from the CLI shell. */
 export async function writeManifest(cwd = process.cwd()) {
     const { loadConfigFromFile } = await import('vite');
     const loaded = await loadConfigFromFile({ command: 'build', mode: 'production' }, undefined, cwd);
@@ -135,11 +138,12 @@ export async function writeManifest(cwd = process.cwd()) {
     if (!opts) {
         throw new Error('cairn-manifest: the Vite config has no cairnManifest() plugin. Add it so the bin shares the build options.');
     }
-    const serialized = await buildManifestFromVite(opts, cwd);
+    const root = resolveViteRoot(loaded, cwd);
+    const serialized = await buildManifestFromVite(opts, root);
     const manifestPath = opts.manifestPath ?? DEFAULT_MANIFEST_PATH;
     // The manifest path is app-root-absolute (a leading slash relative to the project), so resolve it
-    // against cwd, not the filesystem root.
-    const outPath = join(cwd, manifestPath.replace(/^\//, ''));
+    // against the Vite root, not the filesystem root or the config-search cwd.
+    const outPath = join(root, manifestPath.replace(/^\//, ''));
     await mkdir(dirname(outPath), { recursive: true });
     await writeFile(outPath, serialized);
 }

package/dist/vite/resolve-root.d.ts

@@ -0,0 +1,16 @@
+/** The shape of `loadConfigFromFile`'s result that the root derivation reads: the config file's own
+ *  path and its `root` field. Typed structurally so the helper is testable without a real load. */
+export interface LoadedViteConfig {
+    /** The resolved path of the config file Vite loaded. */
+    path: string;
+    /** The user config, of which only `root` is read here. */
+    config: {
+        root?: string;
+    };
+}
+/** The authoritative Vite root for the manifest bin, derived from the loaded config the way Vite
+ *  resolves a relative `root`: against the config file's own directory, not cwd. An absolute `root`
+ *  stands as given, and no `root` falls back to `cwd` (the directory the bin was run from). This
+ *  separates the config-search dir (cwd) from the Vite root, so a non-root cwd or a config that
+ *  sets `root` reads and writes the manifest under the real app root. */
+export declare function resolveViteRoot(loaded: LoadedViteConfig, cwd: string): string;

package/dist/vite/resolve-root.js

@@ -0,0 +1,16 @@
+// The manifest bin's root derivation, split out so it is unit-testable without widening the public
+// /vite surface (only src/lib/vite/index.ts is the package subpath; this sibling is internal).
+import { dirname, isAbsolute, resolve } from 'node:path';
+/** The authoritative Vite root for the manifest bin, derived from the loaded config the way Vite
+ *  resolves a relative `root`: against the config file's own directory, not cwd. An absolute `root`
+ *  stands as given, and no `root` falls back to `cwd` (the directory the bin was run from). This
+ *  separates the config-search dir (cwd) from the Vite root, so a non-root cwd or a config that
+ *  sets `root` reads and writes the manifest under the real app root. */
+export function resolveViteRoot(loaded, cwd) {
+    const root = loaded.config.root;
+    if (!root)
+        return cwd;
+    if (isAbsolute(root))
+        return root;
+    return resolve(dirname(loaded.path), root);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.54.0",
+  "version": "0.56.0",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
   "sideEffects": [
@@ -29,6 +29,7 @@
     "package": "svelte-package && node scripts/build-admin-css.mjs && chmod +x dist/vite/bin.js dist/doctor/bin.js",
     "check:package": "npm run package && publint --strict && attw --pack . --ignore-rules no-resolution cjs-resolves-to-esm internal-resolution-error",
     "check:reference": "npm run package && node scripts/reference-coverage.mjs",
+    "check:reference:signatures": "npm run package && node scripts/check-reference-signatures.mjs",
     "check:readiness": "npm run package && node scripts/check-readiness.mjs",
     "check:docs": "node scripts/docs-links.mjs",
     "check:prose": "node scripts/check-admin-prose.mjs",

package/src/lib/components/ConceptList.svelte

@@ -1,9 +1,11 @@
 <!--
 @component
-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.
+One concept's list view, dressed to the office gold standard. A triage bar partitions by publish
+state (a bordered segmented control with live counts) beside an orthogonal Hidden toggle. The list
+is an enriched sortable table: each row carries a title with a muted summary sub-line, the date, the
+publish-state badge, and a delete action. A draft row de-emphasizes and carries an eye-off Hidden
+tag by the title. A trailing New row at the foot of the card opens the same create dialog as the
+header button. Filtering, sorting, and paging run over the loaded entries in component state.
 -->
 <script lang="ts">
   import { slugify } from '../content/ids.js';
@@ -12,6 +14,7 @@ content sizes. The header New button opens a dialog holding the create form.
   import DeleteDialog from './DeleteDialog.svelte';
   import CairnLogo from './CairnLogo.svelte';
   import { SearchIcon, ArrowUpIcon, ArrowDownIcon, ChevronsUpDownIcon, ChevronLeftIcon, ChevronRightIcon, PlusIcon, Trash2Icon } from './admin-icons.js';
+  import EyeOffIcon from '@lucide/svelte/icons/eye-off';
 
   interface Props {
     /** The list load's data: the concept, its entries, and any inline or form errors. */
@@ -31,7 +34,14 @@ content sizes. The header New button opens a dialog holding the create form.
   );
 
   type SortKey = 'title' | 'date';
+  // The triage runs on two independent axes. A pick-one publish-state partition (`all` passes
+  // everything, `pending` is new + edited, `published` is live-as-is) and a separate Hidden
+  // toggle that composes with it. They are orthogonal: a published-but-hidden entry is on main
+  // (so it counts as Published) and also hidden from the public site (so it counts as Hidden).
+  type Partition = 'all' | 'pending' | 'published';
   let query = $state('');
+  let partition = $state<Partition>('all');
+  let hiddenOnly = $state(false);
   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);
@@ -45,10 +55,82 @@ content sizes. The header New button opens a dialog holding the create form.
     return Number.isNaN(parsed.getTime()) ? iso : dateFmt.format(parsed);
   }
 
+  // Triage counts over the full loaded set, each axis counted independently. Pending is new +
+  // edited (status !== 'published'); Published is live-as-is (status === 'published'); Hidden is
+  // the draft rows. The axes overlap: a published-but-hidden entry counts in BOTH Published and
+  // Hidden. All is the unconditional total.
+  const counts = $derived({
+    all: data.entries.length,
+    pending: data.entries.filter((e) => e.status !== 'published').length,
+    published: data.entries.filter((e) => e.status === 'published').length,
+    hidden: data.entries.filter((e) => e.draft).length,
+  });
+
+  // The three publish-state segments, in display order. Each names its partition value, its label,
+  // and the count axis it shows; the markup loops this so the segments share one block.
+  const segments: { value: Partition; label: string; count: () => number }[] = [
+    { value: 'all', label: 'All', count: () => counts.all },
+    { value: 'pending', label: 'Pending edits', count: () => counts.pending },
+    { value: 'published', label: 'Published', count: () => counts.published },
+  ];
+
+  function matchesPartition(entry: EntrySummary): boolean {
+    switch (partition) {
+      case 'pending':
+        return entry.status !== 'published';
+      case 'published':
+        return entry.status === 'published';
+      default:
+        return true;
+    }
+  }
+
+  // Compose the partition and the Hidden axis with the search query; sort and paging run
+  // downstream. Hidden is orthogonal: when on, it narrows the partition to its draft rows.
   const filtered = $derived(
-    data.entries.filter((e) => e.title.toLowerCase().includes(query.trim().toLowerCase())),
+    data.entries.filter(
+      (e) =>
+        matchesPartition(e) &&
+        (!hiddenOnly || e.draft === true) &&
+        e.title.toLowerCase().includes(query.trim().toLowerCase()),
+    ),
   );
 
+  function setPartition(next: Partition) {
+    partition = next;
+    page = 1;
+  }
+
+  function toggleHidden() {
+    hiddenOnly = !hiddenOnly;
+    page = 1;
+  }
+
+  function clearSearch() {
+    query = '';
+    page = 1;
+  }
+
+  // The triage controls dress to the established footer grammar (the design system's segmented /
+  // check-and-tint recipe). Each helper returns a verbatim Tailwind string so the admin CSS
+  // build's @source scan reads the utilities whole. The scoped button reset (cairn-admin.css)
+  // already strips UA chrome from these bare buttons.
+  //
+  // A segment of the bordered publish-state control: the shared group border carries the pick-one
+  // semantics, so a segment stays borderless; the active one tints and bolds.
+  function segButtonClass(pressed: boolean): string {
+    return `inline-flex items-center gap-1.5 px-3 py-1 text-[0.8125rem] font-normal ${pressed ? 'bg-primary/10 text-primary font-medium' : 'text-[var(--color-muted)]'}`;
+  }
+  // The standalone Hidden toggle: rounded, transparent until hover, check-and-tint when pressed.
+  function hiddenToggleClass(pressed: boolean): string {
+    return `inline-flex items-center gap-1.5 rounded-lg px-3 py-1 text-[0.8125rem] font-normal hover:bg-base-content/[0.06] ${pressed ? 'bg-primary/10 text-primary font-medium' : 'text-[var(--color-muted)]'}`;
+  }
+  // Hidden is a row treatment: a draft row de-emphasizes its TITLE by opacity (the title is
+  // high-contrast base-content, so it stays above the AA text floor when dimmed). The already-muted
+  // summary line is left at full strength: stacking opacity on muted text drops it below 4.5:1 in
+  // the light theme, so the dimmed title plus the eye-off tag carry the "hidden" read instead.
+  const draftDim = 'opacity-[0.62]';
+
   // 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 {
@@ -101,6 +183,10 @@ content sizes. The header New button opens a dialog holding the create form.
   });
   const derivedSlug = $derived(slugEdited ? slug : slugify(title));
   const slugPlaceholder = $derived(data.dated ? 'my-entry' : 'about-us');
+  // The create affordances name one new item, so they read in the singular ("New post"). The
+  // descriptor resolves `singular` (defaulting it to the label), so the fallback here only guards an
+  // older caller that ships no `singular` on its ListData.
+  const createNoun = $derived(data.singular ?? data.label);
 
   // Shared column-header typography: small uppercase muted labels. The sort buttons add their own
   // flex layout and a hover affordance on top of this.
@@ -116,6 +202,12 @@ content sizes. The header New button opens a dialog holding the create form.
   );
 </script>
 
+<!-- The non-color selected cue for the triage controls (WCAG 1.4.1): a small check glyph that
+     renders only inside the active segment or toggle, so hue never carries the state alone. -->
+{#snippet check()}
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
+{/snippet}
+
 <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">
@@ -124,7 +216,7 @@ content sizes. The header New button opens a dialog holding the create form.
       <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}
+      <PlusIcon class="h-4 w-4" /> New {createNoun}
     </button>
   </div>
 </header>
@@ -159,82 +251,131 @@ content sizes. The header New button opens a dialog holding the create form.
   </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>
+{#if data.entries.length > 0}
+  <!-- The triage filters on two independent axes, dressed to the footer grammar. The publish-state
+       partition is one bordered segmented control: the shared border carries the pick-one semantics
+       and the active segment tints with a check (the non-color cue, WCAG 1.4.1). The Hidden toggle
+       is a separate standalone check-and-tint toggle that composes with the active partition. Each
+       count dims to muted when zero, so a sparse list never jumps. -->
+  <div class="mb-4 flex flex-wrap items-center gap-3">
+    <div role="group" aria-label="Filter by publish state" class="bg-base-100 inline-flex items-center overflow-hidden rounded-lg border border-[var(--cairn-card-border)]">
+      {#each segments as seg, i (seg.value)}
+        <button type="button" class="{segButtonClass(partition === seg.value)} {i > 0 ? 'border-l border-[var(--cairn-card-border)]' : ''}" aria-pressed={partition === seg.value} onclick={() => setPartition(seg.value)}>
+          {#if partition === seg.value}{@render check()}{/if}
+          {seg.label}<span class="tabular-nums">{seg.count()}</span>
+        </button>
+      {/each}
     </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>
+    <span class="h-5 w-px bg-[var(--cairn-card-border)]" aria-hidden="true"></span>
+    <button type="button" class={hiddenToggleClass(hiddenOnly)} aria-pressed={hiddenOnly} onclick={toggleHidden}>
+      {#if hiddenOnly}{@render check()}{/if}
+      Hidden<span class="tabular-nums">{counts.hidden}</span>
+    </button>
+  </div>
+{/if}
+
+{#if data.entries.length === 0}
+  <!-- The empty state owns the content area (no card): the cairn mark, concept-named copy, and the
+       create CTA centered on a tall fill, so a first-run office reads as composed. -->
+  <div class="flex min-h-[56vh] flex-col items-center justify-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>
-  {: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'}
+    <button type="button" class="btn btn-primary btn-sm" aria-haspopup="dialog" onclick={() => createDialog?.showModal()}>
+      <PlusIcon class="h-4 w-4" /> New {createNoun}
+    </button>
+  </div>
+{:else}
+  <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 mb-4 overflow-x-auto shadow-[var(--cairn-shadow)]">
+    {#if sorted.length === 0}
+      <!-- A filter or a search narrowed the list to zero; the entries exist, none match. Offer the
+           way back: a search query clears, a filter is named in the copy. -->
+      <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" />
+        {#if query.trim()}
+          <p class="text-sm text-[var(--color-muted)]">No {data.label.toLowerCase()} match <span class="font-medium text-base-content">"{query}"</span>.</p>
+          <button type="button" class="text-[0.8125rem] font-medium text-primary underline [text-underline-offset:2px]" onclick={clearSearch}>Clear search</button>
+        {:else}
+          <p class="text-sm text-[var(--color-muted)]">No {data.label.toLowerCase()} match this filter.</p>
+        {/if}
+      </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}
-          <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>
-              <div class="flex flex-wrap items-center gap-1">
+            {#if data.dated}
+              <th class="hidden w-28 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} w-28">Status</th>
+            <th class="w-12 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 class="max-w-0">
+                <a class="block truncate font-semibold hover:text-primary hover:underline {entry.draft ? draftDim : ''}" href={`/admin/${data.conceptId}/${entry.id}`}>{entry.title}</a>
+                {#if entry.draft}
+                  <!-- Hidden is a row treatment, not a status badge: the row de-emphasizes and an
+                       eye-off tag sits by the title, leaving the Status cell to its publish badge. -->
+                  <span class="mt-0.5 inline-flex items-center gap-1 text-[0.6875rem] font-semibold uppercase tracking-[0.02em] text-[var(--color-muted)]">
+                    <EyeOffIcon class="h-3 w-3" aria-hidden="true" />Hidden
+                  </span>
+                {/if}
+                {#if entry.summary}
+                  <div data-summary class="mt-0.5 truncate text-[0.8125rem] text-[var(--color-muted)]">{entry.summary}</div>
+                {/if}
+              </td>
+              {#if data.dated}<td class="hidden w-28 text-sm tabular-nums text-[var(--color-muted)] sm:table-cell">{formatDate(entry.date)}</td>{/if}
+              <td class="w-28">
                 {#if entry.status === 'new'}<span class="badge badge-info badge-sm font-medium">New</span>
-                {:else if entry.status === 'edited'}<span class="badge badge-warning badge-sm font-medium">Edited</span>
+                {:else if entry.status === 'edited'}<span class="badge badge-sm border-transparent bg-primary/10 font-medium text-primary">Edited</span>
                 {:else}<span class="badge badge-ghost badge-sm font-medium">Published</span>{/if}
-                {#if entry.draft}<span class="badge badge-neutral badge-sm font-medium">Hidden</span>{/if}
-              </div>
-            </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} pending={entry.status !== 'published'} />
-              {:else}
-                <form method="POST" action="?/delete">
-                  <CsrfField />
-                  <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>
+              </td>
+              <td class="w-12 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} pending={entry.status !== 'published'} />
+                {:else}
+                  <form method="POST" action="?/delete">
+                    <CsrfField />
+                    <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>
+      <!-- The create affordance baked into the list body: a full-width borderless foot row so a
+           short list always shows its next step rather than just stopping. Same action as the
+           header New button. -->
+      <button type="button" class="flex w-full items-center gap-2 border-t border-[var(--cairn-card-border)] px-6 py-3 text-sm font-medium text-primary hover:bg-primary/[0.06]" aria-haspopup="dialog" onclick={() => createDialog?.showModal()}>
+        <PlusIcon class="h-4 w-4" /> New {createNoun}
+      </button>
+    {/if}
+  </div>
+{/if}
 
 {#if data.entries.length > 0}
   <div class="mb-6 flex flex-wrap items-center justify-between gap-2 text-sm">
@@ -262,7 +403,7 @@ content sizes. The header New button opens a dialog holding the create form.
 <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>
+      <h2 id="cairn-create-dialog-title" class="text-base font-semibold">New {createNoun}</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">