@glw907/cairn-cms 0.53.0 → 0.55.0

package/CHANGELOG.md

@@ -2,6 +2,57 @@
 
 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
+sticky header dissolves into the single topbar (one band in three clusters, the way back and the
+status and the lifecycle actions), the nav drawer opens closed and the breadcrumb is the way out,
+the frontmatter fields move behind a right slide-over panel, and a zen toggle (and `Ctrl+Shift+.`)
+fades the remaining chrome to leave the manuscript alone, with a floating chip carrying the save
+state and the way out. List and settings pages keep the office chrome unchanged.
+
+The editor ergonomics round out alongside it: the directive rail pitch widens to 8px and the
+caret-active rail reads by strength alone (no width step), wrapped quote and list lines hang under
+their content, directive containers fold from the rail band (a chevron on the opener row, a folded
+row with an `N lines` pill, the safety invariant that an edit or selection never hides text), the
+format keymap completes (inline code, quote, both lists, the heading pair) and the page-level
+actions get keys, a `Ctrl+/` sheet lists every shortcut, and `####` gains a real heading size step.
+The everyday formats (inline code, strikethrough, table) promote onto the strip, and the footer
+controls dress as what they are: a segmented posture control, check-and-tint mode toggles, and a
+plain Markdown-help link. The whole admin picks up the same grade of polish, including a scoped
+reset so every bare admin button sheds its native chrome.
+
+Consumers may: nothing is required, the new chrome and the editor behaviors apply in place. A site
+that embeds `MarkdownEditor` directly gets the rail, hang, fold, and keymap changes automatically;
+the editor's public props are unchanged.
+
 ## 0.53.0
 
 An iterative design session on the editor-as-home direction, shipped as one window.

package/dist/components/AdminLayout.svelte

@@ -11,6 +11,7 @@ identical on every host regardless of the site's own theme.
   import type { LayoutData } from '../sveltekit/content-routes.js';
   import CsrfField from './CsrfField.svelte';
   import { CSRF_CONTEXT_KEY } from './csrf-context.js';
+  import { provideTopbar, type TopbarHolder } from './topbar-context.js';
   import { MenuIcon, LogOutIcon, SunIcon, MoonIcon, ChevronRightIcon, SearchIcon } from './admin-icons.js';
   import CairnLogo from './CairnLogo.svelte';
   import { cairnFaviconHref } from './cairn-favicon.js';
@@ -225,6 +226,16 @@ identical on every host regardless of the site's own theme.
 
   // The browser-tab title: the deepest breadcrumb (the active concept or entry), then the brand.
   const pageTitle = $derived(crumbs.length ? crumbs[crumbs.length - 1].label : 'Admin');
+
+  // A desk route is an open document (/admin/<concept>/<id>): the third path segment is the entry.
+  // The band has one job there, so the topbar drops the palette trigger and the site-wide Publish
+  // button and renders the document's own desk controls instead.
+  const isDeskRoute = $derived(data.pathname.split('/').filter(Boolean).length > 2);
+
+  // The topbar context portal: a reactive holder a descendant document fills with its desk snippet.
+  // EditPage registers on mount and nulls it on teardown; the office routes leave it null.
+  let topbar = $state<TopbarHolder>({ desk: null, zen: false });
+  provideTopbar(topbar);
 </script>
 
 <svelte:head>
@@ -239,16 +250,30 @@ identical on every host regardless of the site's own theme.
      itself never matches. Keeping the drawer and its base/utility classes one level in lets the
      scoped sheet style them. -->
 <div data-theme={theme} bind:this={rootEl}>
-  <div class="drawer lg:drawer-open min-h-screen bg-base-200 text-base-content">
+  <!-- The persistent desktop sidebar (lg:drawer-open) recedes inside an open document: a desk route
+       renders the drawer shell without it, so the nav starts closed at desktop width and the
+       manuscript takes the shell. This resolves at SSR from data.pathname (isDeskRoute), never in an
+       effect, so the chrome-free state does not flash. The checkbox still governs the overlay, so the
+       toggle (and Cmd/Ctrl+B) reopens the nav over the document on demand. -->
+  <div class="drawer min-h-screen bg-base-200 text-base-content" class:lg:drawer-open={!isDeskRoute}>
     <input id="cairn-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
 
     <div class="drawer-content flex flex-col">
+      <!-- Zen (rung 4) drops the whole topbar element, not just its contents: a desk document
+           registers zen through the topbar holder and the band slides away entirely. The desk's
+           three clusters include AdminLayout-owned chrome (the drawer toggle, the breadcrumb), so
+           emptying the band would leave that chrome behind; the band must be GONE. The manuscript
+           and EditPage's own floating zen chip carry on below. -->
+      {#if !topbar.zen}
       <!-- The topbar is a flat, opaque continuation of the sidebar's brand band: same surface and the
            same hairline, no shadow, so the two form one clean header strip across the sidebar seam.
            The height is pinned to the brand band's h-16 (a content-driven navbar drifts with font
            metrics, and the two border-bottoms stop meeting at the seam). -->
       <div class="navbar bg-base-100 border-b border-[var(--cairn-card-border)] sticky top-0 z-30 h-16 min-h-16 gap-2 px-4 py-0 lg:px-8">
-        <div class="flex-none lg:hidden">
+        <!-- The drawer toggle is hidden at desktop width on the office routes (the persistent sidebar
+             stands in for it); on a desk route the sidebar is closed, so the toggle stays visible and
+             reopens the nav as an overlay. -->
+        <div class="flex-none" class:lg:hidden={!isDeskRoute}>
           <label for="cairn-drawer" aria-label="Open menu" class="btn btn-square btn-ghost">
             <MenuIcon class="h-5 w-5" />
           </label>
@@ -268,25 +293,32 @@ identical on every host regardless of the site's own theme.
             <span class="font-semibold tracking-tight">{data.siteName}</span>
           {/if}
         </div>
-        <!-- The command-palette trigger fills the center: a quick jump-to over the admin, opened here
-             or with Cmd/Ctrl+K. -->
-        <div class="flex min-w-0 flex-1 justify-center">
-          <button
-            type="button"
-            onclick={openPalette}
-            class="flex w-full max-w-md items-center gap-2 rounded-field border border-[var(--cairn-card-border)] bg-base-200/70 px-3 py-1.5 text-sm text-[var(--color-muted)] transition-colors hover:bg-base-200 hover:text-base-content"
-          >
-            <SearchIcon class="h-4 w-4 shrink-0" aria-hidden="true" />
-            <span class="truncate">Search or jump to&hellip;</span>
-            <kbd class="ml-auto hidden rounded border border-[var(--cairn-card-border)] px-1.5 text-[0.6875rem] font-medium sm:inline">&#8984;K</kbd>
-          </button>
-        </div>
-        {#if pendingCount > 0}
-          <div class="flex-none">
-            <button type="button" class="btn btn-primary btn-sm" aria-haspopup="dialog" onclick={() => publishAllDialog?.showModal()}>
-              Publish site ({pendingCount})
+        {#if isDeskRoute}
+          <!-- An open document takes the band: the registered desk snippet (the status and action
+               clusters) fills the row to the right of the breadcrumb. The palette trigger and the
+               site-wide Publish button stand down so the band has one job here. -->
+          {@render topbar.desk?.()}
+        {:else}
+          <!-- The command-palette trigger fills the center: a quick jump-to over the admin, opened
+               here or with Cmd/Ctrl+K. -->
+          <div class="flex min-w-0 flex-1 justify-center">
+            <button
+              type="button"
+              onclick={openPalette}
+              class="flex w-full max-w-md items-center gap-2 rounded-field border border-[var(--cairn-card-border)] bg-base-200/70 px-3 py-1.5 text-sm text-[var(--color-muted)] transition-colors hover:bg-base-200 hover:text-base-content"
+            >
+              <SearchIcon class="h-4 w-4 shrink-0" aria-hidden="true" />
+              <span class="truncate">Search or jump to&hellip;</span>
+              <kbd class="ml-auto hidden rounded border border-[var(--cairn-card-border)] px-1.5 text-[0.6875rem] font-medium sm:inline">&#8984;K</kbd>
             </button>
           </div>
+          {#if pendingCount > 0}
+            <div class="flex-none">
+              <button type="button" class="btn btn-primary btn-sm" aria-haspopup="dialog" onclick={() => publishAllDialog?.showModal()}>
+                Publish site ({pendingCount})
+              </button>
+            </div>
+          {/if}
         {/if}
         <div class="flex-none">
           <button type="button" class="btn btn-square btn-ghost" aria-label="Toggle theme" onclick={toggleTheme}>
@@ -294,6 +326,7 @@ identical on every host regardless of the site's own theme.
           </button>
         </div>
       </div>
+      {/if}
 
       <main class="flex-1 p-4 lg:px-10 lg:py-8">
         {@render children()}

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>;