@glw907/cairn-cms 0.54.0 → 0.55.0

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.55.0
+
+The office list rises to the gold standard. The post and page list gains a triage filter layer and
+self-describing rows, so a concept with a handful of entries reads as content rather than a few bare
+titles.
+
+Above the list, a triage bar filters by publish state in the admin's segmented check-and-tint
+grammar: All, Pending edits (the entries on a `cairn/` branch, whether branch-only or live with held
+edits), and Published, each with a live count, plus an orthogonal Hidden toggle for the draft
+entries. The counts come from the loaded set, so they are exact, and the filtering runs client-side
+over the entries already in hand. Search composes with the active filter.
+
+Each row now describes itself. A summary line sits under the title, drawn from the entry's
+description or, lacking one, a short excerpt of its body. The Edited badge tints in the brand violet
+as the one state to act on, mirroring the "Publish site (N)" count; Hidden reads as a de-emphasized
+row with an eye-off tag rather than a competing badge; and the foot of the list carries a quiet
+"New" row so a short list always shows its next step. A concept with no entries centers its empty
+state on the page.
+
+One data change feeds the rows: the content manifest now indexes a per-entry `summary`, built by the
+same excerpt helper the public delivery already uses. Because the manifest is verified whole-string,
+a site's committed manifest is stale until it is regenerated once.
+
+Consumers must: regenerate the content manifest (`npm run cairn:manifest` or `npx cairn-manifest`,
+then commit). The `cairnManifest` build fails closed until the regenerated manifest with the new
+`summary` keys is committed.
+
 ## 0.54.0
 
 The editor takes the shell. On an edit route the page is now one context, the desk: the edit page's

package/dist/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 {
@@ -116,6 +198,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">
@@ -159,82 +247,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 {data.label}
+    </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 {data.label}
+      </button>
+    {/if}
+  </div>
+{/if}
 
 {#if data.entries.length > 0}
   <div class="mb-6 flex flex-wrap items-center justify-between gap-2 text-sm">

package/dist/components/ConceptList.svelte.d.ts

@@ -8,10 +8,12 @@ interface Props {
     form?: Partial<DeleteRefusal> | null;
 }
 /**
- * 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.
  */
 declare const ConceptList: import("svelte").Component<Props, {}, "">;
 type ConceptList = ReturnType<typeof ConceptList>;

package/dist/components/cairn-admin.css

@@ -3440,6 +3440,10 @@
     }
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .mt-0\.5 {
+    margin-top: calc(var(--spacing) * .5);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -3985,6 +3989,10 @@
     min-height: 50vh;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .min-h-\[56vh\] {
+    min-height: 56vh;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .min-h-full {
     min-height: 100%;
   }
@@ -4051,6 +4059,10 @@
     width: calc(var(--spacing) * 12);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .w-44 {
     width: calc(var(--spacing) * 44);
   }
@@ -4083,6 +4095,10 @@
     width: 1px;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-0 {
+    max-width: calc(var(--spacing) * 0);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-3xl {
     max-width: var(--container-3xl);
   }
@@ -4481,6 +4497,10 @@
     border-color: var(--color-base-300);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .border-transparent {
+    border-color: #0000;
+  }
+
   @layer daisyui.l1.l2 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) :where(:not(ul, details, .menu-title, .btn)).menu-active {
       --tw-outline-style: none;
@@ -4712,6 +4732,10 @@
     padding-block: calc(var(--spacing) * 2);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .py-3\.5 {
     padding-block: calc(var(--spacing) * 3.5);
   }
@@ -4886,6 +4910,11 @@
     letter-spacing: -.01em;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .tracking-\[0\.02em\] {
+    --tw-tracking: .02em;
+    letter-spacing: .02em;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .tracking-\[0\.08em\] {
     --tw-tracking: .08em;
     letter-spacing: .08em;
@@ -4987,6 +5016,11 @@
     font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
+  }
+
   @layer daisyui.l1.l2 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .link-hover {
       text-decoration-line: none;
@@ -5053,6 +5087,10 @@
     opacity: .7;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .opacity-\[0\.62\] {
+    opacity: .62;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5306,6 +5344,18 @@
     }
   }
 
+  @media (hover: hover) {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .hover\:bg-primary\/\[0\.06\]:hover {
+      background-color: var(--color-primary);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .hover\:bg-primary\/\[0\.06\]:hover {
+        background-color: color-mix(in oklab, var(--color-primary) 6%, transparent);
+      }
+    }
+  }
+
   @media (hover: hover) {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .hover\:text-\[var\(--color-primary\)\]:hover {
       color: var(--color-primary);

package/dist/content/manifest.d.ts

@@ -7,6 +7,7 @@ export interface ManifestEntry {
     title: string;
     date?: string;
     permalink: string;
+    summary?: string;
     draft: boolean;
     links: CairnRef[];
 }

package/dist/content/manifest.js

@@ -4,6 +4,7 @@
 // it; the save path patches one entry and commits it with the content in one commit. Each entry
 // carries its identity and its outbound cairn: edges, so the manifest is the link graph.
 import { parseMarkdown } from './frontmatter.js';
+import { deriveExcerpt } from './excerpt.js';
 import { entryIdentity, asString } from './identity.js';
 import { extractCairnLinks } from './links.js';
 /** Build one manifest entry from a content file. Drafts are included and flagged. The id, date, and
@@ -18,6 +19,9 @@ export function manifestEntryFromFile(descriptor, file) {
         title: asString(frontmatter.title) ?? id,
         date,
         permalink,
+        // Coalesce an empty excerpt to undefined, so an empty-body entry carries no summary key at all
+        // (matching serialize's optional-spread) and the in-memory and serialized shapes agree.
+        summary: deriveExcerpt(body, { description: asString(frontmatter.description) }) || undefined,
         draft: frontmatter.draft === true,
         links: extractCairnLinks(body),
     };
@@ -38,6 +42,7 @@ export function serializeManifest(manifest) {
         title: e.title,
         ...(e.date ? { date: e.date } : {}),
         permalink: e.permalink,
+        ...(e.summary ? { summary: e.summary } : {}),
         draft: e.draft,
         links: [...e.links].sort(compareRef).map((r) => ({ concept: r.concept, id: r.id })),
     }));
@@ -68,6 +73,7 @@ export function parseManifest(raw) {
             typeof e.permalink === 'string' &&
             typeof e.draft === 'boolean' &&
             (e.date === undefined || typeof e.date === 'string') &&
+            (e.summary === undefined || typeof e.summary === 'string') &&
             Array.isArray(e.links);
         if (!ok) {
             throw new Error(`content manifest: malformed entry ${JSON.stringify(e)}`);

package/dist/delivery/content-index.js

@@ -4,7 +4,7 @@
 // every operation reads the descriptor and its routing rule, never a hardcoded concept id.
 import { parseMarkdown } from '../content/frontmatter.js';
 import { entryId, entryIdentity, asDate, asString, asTags } from '../content/identity.js';
-import { deriveExcerpt, wordCount } from './excerpt.js';
+import { deriveExcerpt, wordCount } from '../content/excerpt.js';
 /** Map a Vite eager `?raw` glob record (`{ path: raw }`) to `RawFile[]`. */
 export function fromGlob(record) {
     return Object.entries(record).map(([path, raw]) => ({ path, raw }));

package/dist/delivery/data.d.ts

@@ -5,7 +5,7 @@ export type { SiteResolver, ConceptIndex } from './site-resolver.js';
 export { createSiteIndexes } from './site-indexes.js';
 export type { SiteIndexes, SiteGlobs } from './site-indexes.js';
 export { siteDescriptors } from './site-descriptors.js';
-export { deriveExcerpt, wordCount } from './excerpt.js';
+export { deriveExcerpt, wordCount } from '../content/excerpt.js';
 export { buildRssFeed, buildJsonFeed } from './feeds.js';
 export type { FeedChannel, FeedItem } from './feeds.js';
 export { buildSitemap } from './sitemap.js';

package/dist/delivery/data.js

@@ -5,7 +5,7 @@ export { createContentIndex, fromGlob } from './content-index.js';
 export { createSiteResolver, buildLinkResolver } from './site-resolver.js';
 export { createSiteIndexes } from './site-indexes.js';
 export { siteDescriptors } from './site-descriptors.js';
-export { deriveExcerpt, wordCount } from './excerpt.js';
+export { deriveExcerpt, wordCount } from '../content/excerpt.js';
 export { buildRssFeed, buildJsonFeed } from './feeds.js';
 export { buildSitemap } from './sitemap.js';
 export { buildRobots } from './robots.js';

package/dist/sveltekit/content-routes.d.ts

@@ -44,6 +44,9 @@ export interface EntrySummary {
     draft: boolean;
     /** Publish state derived from the ref set: live as-is, live with pending edits, or branch-only. */
     status: 'published' | 'edited' | 'new';
+    /** The row's one-line summary: the manifest's indexed excerpt for a published row, the branch
+     *  frontmatter/body excerpt for a pending one, and null when neither yields text. */
+    summary: string | null;
 }
 /** The concept list view's data. */
 export interface ListData {

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
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
   "sideEffects": [

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 {
@@ -116,6 +198,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">
@@ -159,82 +247,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 {data.label}
+    </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 {data.label}
+      </button>
+    {/if}
+  </div>
+{/if}
 
 {#if data.entries.length > 0}
   <div class="mb-6 flex flex-wrap items-center justify-between gap-2 text-sm">

package/src/lib/content/manifest.ts

@@ -4,6 +4,7 @@
 // it; the save path patches one entry and commits it with the content in one commit. Each entry
 // carries its identity and its outbound cairn: edges, so the manifest is the link graph.
 import { parseMarkdown } from './frontmatter.js';
+import { deriveExcerpt } from './excerpt.js';
 import { entryIdentity, asString } from './identity.js';
 import { extractCairnLinks, type CairnRef, type LinkResolve } from './links.js';
 import type { ConceptDescriptor } from './types.js';
@@ -15,6 +16,7 @@ export interface ManifestEntry {
   title: string;
   date?: string;
   permalink: string;
+  summary?: string;
   draft: boolean;
   links: CairnRef[];
 }
@@ -47,6 +49,9 @@ export function manifestEntryFromFile(descriptor: ConceptDescriptor, file: { pat
     title: asString(frontmatter.title) ?? id,
     date,
     permalink,
+    // Coalesce an empty excerpt to undefined, so an empty-body entry carries no summary key at all
+    // (matching serialize's optional-spread) and the in-memory and serialized shapes agree.
+    summary: deriveExcerpt(body, { description: asString(frontmatter.description) }) || undefined,
     draft: frontmatter.draft === true,
     links: extractCairnLinks(body),
   };
@@ -70,6 +75,7 @@ export function serializeManifest(manifest: Manifest): string {
     title: e.title,
     ...(e.date ? { date: e.date } : {}),
     permalink: e.permalink,
+    ...(e.summary ? { summary: e.summary } : {}),
     draft: e.draft,
     links: [...e.links].sort(compareRef).map((r) => ({ concept: r.concept, id: r.id })),
   }));
@@ -102,6 +108,7 @@ export function parseManifest(raw: string): Manifest {
       typeof e.permalink === 'string' &&
       typeof e.draft === 'boolean' &&
       (e.date === undefined || typeof e.date === 'string') &&
+      (e.summary === undefined || typeof e.summary === 'string') &&
       Array.isArray(e.links);
     if (!ok) {
       throw new Error(`content manifest: malformed entry ${JSON.stringify(e)}`);

package/src/lib/delivery/content-index.ts

@@ -4,7 +4,7 @@
 // every operation reads the descriptor and its routing rule, never a hardcoded concept id.
 import { parseMarkdown } from '../content/frontmatter.js';
 import { entryId, entryIdentity, asDate, asString, asTags } from '../content/identity.js';
-import { deriveExcerpt, wordCount } from './excerpt.js';
+import { deriveExcerpt, wordCount } from '../content/excerpt.js';
 import type { ConceptDescriptor } from '../content/types.js';
 
 /** A raw content file before parsing: the glob key and the file's full markdown text. */

package/src/lib/delivery/data.ts

@@ -8,7 +8,7 @@ export type { SiteResolver, ConceptIndex } from './site-resolver.js';
 export { createSiteIndexes } from './site-indexes.js';
 export type { SiteIndexes, SiteGlobs } from './site-indexes.js';
 export { siteDescriptors } from './site-descriptors.js';
-export { deriveExcerpt, wordCount } from './excerpt.js';
+export { deriveExcerpt, wordCount } from '../content/excerpt.js';
 export { buildRssFeed, buildJsonFeed } from './feeds.js';
 export type { FeedChannel, FeedItem } from './feeds.js';
 export { buildSitemap } from './sitemap.js';

package/src/lib/sveltekit/content-routes.ts

@@ -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, type GithubKeyEnv } from '../github/credentials.js';
 import { listMarkdown, readRaw, commitFiles, type FileChange } from '../github/repo.js';
@@ -56,6 +58,9 @@ export interface EntrySummary {
   draft: boolean;
   /** Publish state derived from the ref set: live as-is, live with pending edits, or branch-only. */
   status: 'published' | 'edited' | 'new';
+  /** The row's one-line summary: the manifest's indexed excerpt for a published row, the branch
+   *  frontmatter/body excerpt for a pending one, and null when neither yields text. */
+  summary: string | null;
 }
 
 /** The concept list view's data. */
@@ -251,13 +256,16 @@ export function createContentRoutes(runtime: CairnRuntime, deps: ContentRoutesDe
   ): Promise<EntrySummary> {
     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);
+      if (raw === null) 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 };
     }
   }
 
@@ -329,7 +337,7 @@ export function createContentRoutes(runtime: CairnRuntime, deps: ContentRoutesDe
         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' as const },
+            : { id: e.id, title: e.title, date: e.date ?? null, draft: e.draft, status: 'published' as const, summary: e.summary ?? null },
         ),
       );
       const listed = new Set(rows.map((e) => e.id));