@glw907/cairn-cms 0.54.0 → 0.56.0

package/CHANGELOG.md

@@ -2,6 +2,63 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.56.0
+
+Two passes ship together: the markdown editor's folding gets a proper home, and the engine's gates,
+tooling, and docs harden.
+
+The editor folds directive containers (`:::name` blocks), and the fold control now lives in a real
+gutter column to the left of the text rather than a chevron hidden in the line. At rest the gutter is
+empty; the chevron reveals when you hover the gutter cell, stays while a block is folded, and shows
+while the caret is inside a block. The control is a real button now, so folding is reachable by
+keyboard and screen reader, where before only unfolding was. The folded-row tint and the "N lines"
+pill carry over unchanged, and the fold scope is the same: directive containers only.
+
+For consumers, two additive surface touches from the tooling pass. A concept can now set an optional
+`singular` label, so the create affordances read "New post" instead of "New Posts"; it defaults to the
+concept's `label`, so a concept that sets nothing is unchanged. And `AuthEnv` is now exported from
+`@glw907/cairn-cms/sveltekit` as well as the root, so the `app.d.ts` Platform block can import it from
+the subpath the auth helpers live on (the deploy guide now shows that block verbatim).
+
+The rest hardens the engine's own gates and docs. A new `check:reference:signatures` gate compares
+each reference page's declared type signature against the export's real type, so a stale signature in
+an existing page is caught (it found and fixed two on its first run). A plain-Node dist-spawn test
+rot-proofs the `/delivery/data` node-safety guarantee, an admin-shell DOM check guards the drawer
+layout against a silent scoping regression, and the `cairn-manifest` bin now resolves the Vite root
+from the loaded config rather than the current directory. A docs sweep documents the preview frame's
+dual stylesheet emission, the `cairnManifest`-derived `cairn-doctor` inputs, the prerender policy for
+the feed routes, and an interim security contact.
+
+No consumer action: every change is additive, the `singular` field is optional, and the folding
+redesign is internal to the admin editor.
+
+## 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 {
@@ -101,6 +183,10 @@ content sizes. The header New button opens a dialog holding the create form.
   });
   const derivedSlug = $derived(slugEdited ? slug : slugify(title));
   const slugPlaceholder = $derived(data.dated ? 'my-entry' : 'about-us');
+  // The create affordances name one new item, so they read in the singular ("New post"). The
+  // descriptor resolves `singular` (defaulting it to the label), so the fallback here only guards an
+  // older caller that ships no `singular` on its ListData.
+  const createNoun = $derived(data.singular ?? data.label);
 
   // Shared column-header typography: small uppercase muted labels. The sort buttons add their own
   // flex layout and a hover affordance on top of this.
@@ -116,6 +202,12 @@ content sizes. The header New button opens a dialog holding the create form.
   );
 </script>
 
+<!-- The non-color selected cue for the triage controls (WCAG 1.4.1): a small check glyph that
+     renders only inside the active segment or toggle, so hue never carries the state alone. -->
+{#snippet check()}
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
+{/snippet}
+
 <header class="mb-6 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
   <h1 class="text-2xl font-bold tracking-tight font-[family-name:var(--font-display)]">{data.label}</h1>
   <div class="flex items-center gap-3 sm:flex-1 sm:flex-wrap sm:justify-end">
@@ -124,7 +216,7 @@ content sizes. The header New button opens a dialog holding the create form.
       <input type="search" aria-label="Search {data.label}" bind:value={query} placeholder="Search {data.label.toLowerCase()}" oninput={() => (page = 1)} />
     </label>
     <button type="button" class="btn btn-primary btn-sm shrink-0" aria-haspopup="dialog" onclick={() => createDialog?.showModal()}>
-      <PlusIcon class="h-4 w-4" /> New {data.label}
+      <PlusIcon class="h-4 w-4" /> New {createNoun}
     </button>
   </div>
 </header>
@@ -159,82 +251,131 @@ content sizes. The header New button opens a dialog holding the create form.
   </div>
 {/if}
 
-<div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 mb-4 overflow-x-auto shadow-[var(--cairn-shadow)]">
-  {#if data.entries.length === 0}
-    <div class="flex flex-col items-center gap-4 px-6 py-16 text-center">
-      <CairnLogo class="h-12 w-12 text-primary opacity-30" />
-      <div class="space-y-1">
-        <p class="font-semibold text-base-content">No {data.label.toLowerCase()} yet</p>
-        <p class="text-sm text-[var(--color-muted)]">Stack your first one and it will show up here.</p>
-      </div>
-      <button type="button" class="btn btn-primary btn-sm" aria-haspopup="dialog" onclick={() => createDialog?.showModal()}>
-        <PlusIcon class="h-4 w-4" /> New {data.label}
-      </button>
+{#if data.entries.length > 0}
+  <!-- The triage filters on two independent axes, dressed to the footer grammar. The publish-state
+       partition is one bordered segmented control: the shared border carries the pick-one semantics
+       and the active segment tints with a check (the non-color cue, WCAG 1.4.1). The Hidden toggle
+       is a separate standalone check-and-tint toggle that composes with the active partition. Each
+       count dims to muted when zero, so a sparse list never jumps. -->
+  <div class="mb-4 flex flex-wrap items-center gap-3">
+    <div role="group" aria-label="Filter by publish state" class="bg-base-100 inline-flex items-center overflow-hidden rounded-lg border border-[var(--cairn-card-border)]">
+      {#each segments as seg, i (seg.value)}
+        <button type="button" class="{segButtonClass(partition === seg.value)} {i > 0 ? 'border-l border-[var(--cairn-card-border)]' : ''}" aria-pressed={partition === seg.value} onclick={() => setPartition(seg.value)}>
+          {#if partition === seg.value}{@render check()}{/if}
+          {seg.label}<span class="tabular-nums">{seg.count()}</span>
+        </button>
+      {/each}
     </div>
-  {:else if sorted.length === 0}
-    <div role="status" class="flex flex-col items-center gap-3 px-6 py-14 text-center">
-      <SearchIcon class="h-8 w-8 text-[var(--color-subtle)] opacity-40" aria-hidden="true" />
-      <p class="text-sm text-[var(--color-muted)]">No {data.label.toLowerCase()} match <span class="font-medium text-base-content">"{query}"</span>.</p>
+    <span class="h-5 w-px bg-[var(--cairn-card-border)]" aria-hidden="true"></span>
+    <button type="button" class={hiddenToggleClass(hiddenOnly)} aria-pressed={hiddenOnly} onclick={toggleHidden}>
+      {#if hiddenOnly}{@render check()}{/if}
+      Hidden<span class="tabular-nums">{counts.hidden}</span>
+    </button>
+  </div>
+{/if}
+
+{#if data.entries.length === 0}
+  <!-- The empty state owns the content area (no card): the cairn mark, concept-named copy, and the
+       create CTA centered on a tall fill, so a first-run office reads as composed. -->
+  <div class="flex min-h-[56vh] flex-col items-center justify-center gap-4 px-6 py-16 text-center">
+    <CairnLogo class="h-12 w-12 text-primary opacity-30" />
+    <div class="space-y-1">
+      <p class="font-semibold text-base-content">No {data.label.toLowerCase()} yet</p>
+      <p class="text-sm text-[var(--color-muted)]">Stack your first one and it will show up here.</p>
     </div>
-  {:else}
-    <table class="table">
-      <thead>
-        <tr class="border-base-300">
-          <th aria-sort={sortKey === 'title' ? (sortAsc ? 'ascending' : 'descending') : 'none'}>
-            <button type="button" class={sortButton} aria-label="Sort by title" onclick={() => toggleSort('title')}>
-              Title
-              {#if sortKey === 'title'}
-                {#if sortAsc}<ArrowUpIcon class="h-3 w-3" aria-hidden="true" />{:else}<ArrowDownIcon class="h-3 w-3" aria-hidden="true" />{/if}
-              {:else}<ChevronsUpDownIcon class="h-3 w-3 opacity-40" aria-hidden="true" />{/if}
-            </button>
-          </th>
-          {#if data.dated}
-            <th class="hidden sm:table-cell" aria-sort={sortKey === 'date' ? (sortAsc ? 'ascending' : 'descending') : 'none'}>
-              <button type="button" class={sortButton} aria-label="Sort by date" onclick={() => toggleSort('date')}>
-                Date
-                {#if sortKey === 'date'}
+    <button type="button" class="btn btn-primary btn-sm" aria-haspopup="dialog" onclick={() => createDialog?.showModal()}>
+      <PlusIcon class="h-4 w-4" /> New {createNoun}
+    </button>
+  </div>
+{:else}
+  <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 mb-4 overflow-x-auto shadow-[var(--cairn-shadow)]">
+    {#if sorted.length === 0}
+      <!-- A filter or a search narrowed the list to zero; the entries exist, none match. Offer the
+           way back: a search query clears, a filter is named in the copy. -->
+      <div role="status" class="flex flex-col items-center gap-3 px-6 py-14 text-center">
+        <SearchIcon class="h-8 w-8 text-[var(--color-subtle)] opacity-40" aria-hidden="true" />
+        {#if query.trim()}
+          <p class="text-sm text-[var(--color-muted)]">No {data.label.toLowerCase()} match <span class="font-medium text-base-content">"{query}"</span>.</p>
+          <button type="button" class="text-[0.8125rem] font-medium text-primary underline [text-underline-offset:2px]" onclick={clearSearch}>Clear search</button>
+        {:else}
+          <p class="text-sm text-[var(--color-muted)]">No {data.label.toLowerCase()} match this filter.</p>
+        {/if}
+      </div>
+    {:else}
+      <table class="table">
+        <thead>
+          <tr class="border-base-300">
+            <th aria-sort={sortKey === 'title' ? (sortAsc ? 'ascending' : 'descending') : 'none'}>
+              <button type="button" class={sortButton} aria-label="Sort by title" onclick={() => toggleSort('title')}>
+                Title
+                {#if sortKey === 'title'}
                   {#if sortAsc}<ArrowUpIcon class="h-3 w-3" aria-hidden="true" />{:else}<ArrowDownIcon class="h-3 w-3" aria-hidden="true" />{/if}
                 {:else}<ChevronsUpDownIcon class="h-3 w-3 opacity-40" aria-hidden="true" />{/if}
               </button>
             </th>
-          {/if}
-          <th class={headerLabel}>Status</th>
-          <th class="text-right"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody>
-        {#each pageRows as entry (entry.id)}
-          <tr class="transition-colors hover:bg-base-200/60">
-            <td><a class="font-medium hover:text-primary hover:underline" href={`/admin/${data.conceptId}/${entry.id}`}>{entry.title}</a></td>
-            {#if data.dated}<td class="hidden text-sm text-[var(--color-muted)] sm:table-cell">{formatDate(entry.date)}</td>{/if}
-            <td>
-              <div class="flex flex-wrap items-center gap-1">
+            {#if data.dated}
+              <th class="hidden w-28 sm:table-cell" aria-sort={sortKey === 'date' ? (sortAsc ? 'ascending' : 'descending') : 'none'}>
+                <button type="button" class={sortButton} aria-label="Sort by date" onclick={() => toggleSort('date')}>
+                  Date
+                  {#if sortKey === 'date'}
+                    {#if sortAsc}<ArrowUpIcon class="h-3 w-3" aria-hidden="true" />{:else}<ArrowDownIcon class="h-3 w-3" aria-hidden="true" />{/if}
+                  {:else}<ChevronsUpDownIcon class="h-3 w-3 opacity-40" aria-hidden="true" />{/if}
+                </button>
+              </th>
+            {/if}
+            <th class="{headerLabel} w-28">Status</th>
+            <th class="w-12 text-right"><span class="sr-only">Actions</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each pageRows as entry (entry.id)}
+            <tr class="transition-colors hover:bg-base-200/60">
+              <td class="max-w-0">
+                <a class="block truncate font-semibold hover:text-primary hover:underline {entry.draft ? draftDim : ''}" href={`/admin/${data.conceptId}/${entry.id}`}>{entry.title}</a>
+                {#if entry.draft}
+                  <!-- Hidden is a row treatment, not a status badge: the row de-emphasizes and an
+                       eye-off tag sits by the title, leaving the Status cell to its publish badge. -->
+                  <span class="mt-0.5 inline-flex items-center gap-1 text-[0.6875rem] font-semibold uppercase tracking-[0.02em] text-[var(--color-muted)]">
+                    <EyeOffIcon class="h-3 w-3" aria-hidden="true" />Hidden
+                  </span>
+                {/if}
+                {#if entry.summary}
+                  <div data-summary class="mt-0.5 truncate text-[0.8125rem] text-[var(--color-muted)]">{entry.summary}</div>
+                {/if}
+              </td>
+              {#if data.dated}<td class="hidden w-28 text-sm tabular-nums text-[var(--color-muted)] sm:table-cell">{formatDate(entry.date)}</td>{/if}
+              <td class="w-28">
                 {#if entry.status === 'new'}<span class="badge badge-info badge-sm font-medium">New</span>
-                {:else if entry.status === 'edited'}<span class="badge badge-warning badge-sm font-medium">Edited</span>
+                {:else if entry.status === 'edited'}<span class="badge badge-sm border-transparent bg-primary/10 font-medium text-primary">Edited</span>
                 {:else}<span class="badge badge-ghost badge-sm font-medium">Published</span>{/if}
-                {#if entry.draft}<span class="badge badge-neutral badge-sm font-medium">Hidden</span>{/if}
-              </div>
-            </td>
-            <td class="text-right">
-              {#if deleteRefused?.id === entry.id}
-                <!-- A prior delete was refused: DeleteDialog names the blockers and offers no confirm. -->
-                <DeleteDialog conceptId={data.conceptId} id={entry.id} label={data.label} inboundLinks={deleteRefused.inboundLinks} pending={entry.status !== 'published'} />
-              {:else}
-                <form method="POST" action="?/delete">
-                  <CsrfField />
-                  <input type="hidden" name="id" value={entry.id} />
-                  <button type="submit" class="btn btn-ghost btn-sm" aria-label="Delete {entry.title}">
-                    <Trash2Icon class="h-4 w-4 text-error" />
-                  </button>
-                </form>
-              {/if}
-            </td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  {/if}
-</div>
+              </td>
+              <td class="w-12 text-right">
+                {#if deleteRefused?.id === entry.id}
+                  <!-- A prior delete was refused: DeleteDialog names the blockers and offers no confirm. -->
+                  <DeleteDialog conceptId={data.conceptId} id={entry.id} label={data.label} inboundLinks={deleteRefused.inboundLinks} pending={entry.status !== 'published'} />
+                {:else}
+                  <form method="POST" action="?/delete">
+                    <CsrfField />
+                    <input type="hidden" name="id" value={entry.id} />
+                    <button type="submit" class="btn btn-ghost btn-sm" aria-label="Delete {entry.title}">
+                      <Trash2Icon class="h-4 w-4 text-error" />
+                    </button>
+                  </form>
+                {/if}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+      <!-- The create affordance baked into the list body: a full-width borderless foot row so a
+           short list always shows its next step rather than just stopping. Same action as the
+           header New button. -->
+      <button type="button" class="flex w-full items-center gap-2 border-t border-[var(--cairn-card-border)] px-6 py-3 text-sm font-medium text-primary hover:bg-primary/[0.06]" aria-haspopup="dialog" onclick={() => createDialog?.showModal()}>
+        <PlusIcon class="h-4 w-4" /> New {createNoun}
+      </button>
+    {/if}
+  </div>
+{/if}
 
 {#if data.entries.length > 0}
   <div class="mb-6 flex flex-wrap items-center justify-between gap-2 text-sm">
@@ -262,7 +403,7 @@ content sizes. The header New button opens a dialog holding the create form.
 <dialog class="modal" aria-labelledby="cairn-create-dialog-title" bind:this={createDialog}>
   <div class="modal-box">
     <div class="mb-3 flex items-center justify-between">
-      <h2 id="cairn-create-dialog-title" class="text-base font-semibold">New {data.label}</h2>
+      <h2 id="cairn-create-dialog-title" class="text-base font-semibold">New {createNoun}</h2>
       <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={() => createDialog?.close()}>✕</button>
     </div>
     <form method="POST" action="?/create" onsubmit={() => (creating = true)} class="flex flex-col gap-3">

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/MarkdownEditor.svelte

@@ -100,23 +100,20 @@ through the adapter's render. Swapping the editor stays a one-file change.
       `color-mix(in oklab, var(--color-accent) var(--cairn-directive-rail-${step}, ${fallback}), transparent)`;
     // With `active`, the row's own (deepest) bar takes the full-strength -active mix at the same
     // 2px width. The emphasis is strength only: a rail column carrying both an active and a
-    // quiet segment (two sibling containers at one depth) keeps one weight top to bottom.
-    // With `dropInnermost`, the row's own deepest bar is omitted: a fold chevron replaces it on a
-    // paired opener row, so the bar would double the chevron's positional cue. The outer bars and
-    // their spacers stay, so the nesting still reads.
-    const rails = (depth: number, active = false, dropInnermost = false): string => {
+    // quiet segment (two sibling containers at one depth) keeps one weight top to bottom. A paired
+    // opener row paints its full rail like any other fence row; the fold chevron lives in the gutter
+    // column left of the rails, so the opener no longer drops its innermost bar.
+    const rails = (depth: number, active = false): string => {
       const layers: string[] = [];
       for (let d = 1; d <= depth; d++) {
         const edge = 8 * d - 6;
         if (d > 1) layers.push(`inset ${edge - 2}px 0 0 0 var(--color-base-100, oklch(99% 0.004 75))`);
-        if (dropInnermost && d === depth) continue;
         const own = active && d === depth;
         layers.push(
           `inset ${edge}px 0 0 0 ${own ? railColor('active', '100%') : railColor(d, railFallbacks[d - 1] ?? '92%')}`,
         );
       }
-      // A depth-1 opener drops its only bar, so the row paints no rail at all.
-      return layers.length ? layers.join(', ') : 'none';
+      return layers.join(', ');
     };
     const directiveInk = {
       backgroundColor: 'color-mix(in oklab, var(--color-accent) 8%, transparent)',
@@ -132,14 +129,6 @@ through the adapter's render. Swapping the editor stays a one-file change.
         `${prefix}.cm-cairn-directive-fence.cm-cairn-depth-${depth}, ${prefix}.cm-cairn-directive-content.cm-cairn-depth-${depth}`;
       railRules[row('')] = { boxShadow: rails(depth) };
       railRules[row('.cm-cairn-caret-block')] = { boxShadow: rails(depth, true) };
-      // A paired opener row drops its own innermost bar (the fold chevron stands in its place),
-      // both quiet and caret-active. The extra opener class outranks the base fence rule above.
-      railRules[`.cm-cairn-directive-fence.cm-cairn-directive-opener.cm-cairn-depth-${depth}`] = {
-        boxShadow: rails(depth, false, true),
-      };
-      railRules[`.cm-cairn-caret-block.cm-cairn-directive-opener.cm-cairn-depth-${depth}`] = {
-        boxShadow: rails(depth, true, true),
-      };
     }
     const theme = EditorView.theme(
       {
@@ -199,39 +188,67 @@ through the adapter's render. Swapping the editor stays a one-file change.
         },
         '.cm-cairn-directive-leaf': directiveInk,
         '.cm-cairn-directive-inline': directiveInk,
-        // Container folding. The fold band is the 28px gutter click target on an opener row; the
-        // line is the positioning context so the chevron sits over the container's own bar x. The
-        // band is laid over the gutter (a zero-width inline widget at line start, expanded by the
-        // absolute children), so only the gutter shows the pointer cursor, never the opener text.
-        '.cm-line:has(.cm-cairn-fold-band)': { position: 'relative' },
-        '.cm-cairn-fold-band': {
-          position: 'absolute',
-          left: '0',
-          top: '0',
-          width: '28px',
-          height: '100%',
+        // Container folding lives in a real gutter column now, not an in-text band. The gutter is a
+        // fixed-x column left of the content; the chevron is empty at rest and reveals on hovering
+        // the gutter cell (the VS Code / Zed / Obsidian standard), forced on when folded or when the
+        // caret is inside the container. One rotating chevron in the directive ink; the rails carry
+        // depth, so the ink does not restep. The lone gutter's wrapper loses its default background
+        // and border so the column blends into the quiet surface.
+        // Neutralize the gutter wrapper so the column blends in. This assumes the fold gutter is the
+        // only gutter (it is today: no lineNumbers or foldGutter in the build); a future line-number
+        // or lint gutter would need its own chrome and a narrower selector here.
+        '.cm-gutters': { backgroundColor: 'transparent', border: '0', color: 'inherit' },
+        // 24px wide so the cell clears the WCAG 2.5.8 target-size floor unconditionally.
+        '.cm-cairn-fold-gutter': { width: '24px' },
+        '.cm-cairn-fold-gutter .cm-gutterElement': { display: 'flex', alignItems: 'stretch', padding: '0' },
+        '.cm-cairn-fold-btn': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          padding: '0',
+          background: 'transparent',
+          border: '0',
           cursor: 'pointer',
-          zIndex: '1',
+          color: 'var(--cairn-directive-ink-2, oklch(50% 0.16 300))',
         },
-        '.cm-cairn-fold-band svg': {
-          position: 'absolute',
-          top: '50%',
-          transform: 'translateY(-50%)',
+        '.cm-cairn-fold-btn svg': {
           width: '11px',
           height: '11px',
-          // The chevron fades in on rail-band hover; folded and caret-inside states force it on.
+          // Empty at rest; the gutter-cell hover, the folded state, and the caret-active state each
+          // force it on. A 120ms fade in and out, and a 120ms rotate for the folded turn.
           opacity: '0',
-          transition: 'opacity 120ms ease',
-          color: 'var(--cairn-directive-ink-2, oklch(50% 0.16 300))',
+          transition: 'opacity 120ms ease, transform 120ms ease',
+        },
+        // Reveal on gutter-cell hover, on the folded and caret-active states, and on keyboard focus
+        // so a focused control shows its glyph, not just the ring.
+        '.cm-cairn-fold-gutter .cm-gutterElement:hover .cm-cairn-fold-btn svg, .cm-cairn-fold-btn:focus-visible svg, .cm-cairn-fold-folded svg, .cm-cairn-fold-active svg':
+          { opacity: '1' },
+        // Folded rotates the single chevron to point right; caret-active takes the stronger ink.
+        '.cm-cairn-fold-folded svg': { transform: 'rotate(-90deg)' },
+        '.cm-cairn-fold-active': { color: 'var(--cairn-directive-ink-active, oklch(46% 0.16 300))' },
+        // A visible focus ring for keyboard users landing on the gutter button or the pill, reusing
+        // the surface hairline's 70% primary mix (3:1+ non-text contrast on both themes).
+        '.cm-cairn-fold-btn:focus-visible': {
+          outline: '2px solid color-mix(in oklab, var(--color-primary) 70%, transparent)',
+          outlineOffset: '-2px',
+          borderRadius: '4px',
+        },
+        '.cm-cairn-fold-pill:focus-visible': {
+          outline: '2px solid color-mix(in oklab, var(--color-primary) 70%, transparent)',
+          outlineOffset: '1px',
+        },
+        // No-hover pointers (touch) cannot reveal on hover, so the rest-state chevron is persistent
+        // and legible. Scoped to the rest state (not folded, not caret-active) so those forced-on
+        // states still read at full strength on touch rather than this rule clamping them to 0.65.
+        '@media (hover: none)': {
+          '.cm-cairn-fold-btn:not(.cm-cairn-fold-folded):not(.cm-cairn-fold-active) svg': { opacity: '0.65' },
         },
-        '.cm-cairn-fold-band:hover svg, .cm-cairn-fold-folded svg, .cm-cairn-fold-active svg': {
-          opacity: '1',
+        // Respect a reduced-motion preference: drop the chevron fade/rotate and the unfold flash.
+        '@media (prefers-reduced-motion: reduce)': {
+          '.cm-cairn-fold-btn svg': { transition: 'none' },
+          '.cm-cairn-fold-flash': { transition: 'none' },
         },
-        // The chevron steps its ink with the container's depth, matching the label inks; the
-        // caret-inside state takes the strongest ink.
-        '.cm-cairn-fold-depth-1 svg': { color: 'var(--color-accent)' },
-        '.cm-cairn-fold-depth-3 svg': { color: 'var(--cairn-directive-ink-3, oklch(48% 0.16 300))' },
-        '.cm-cairn-fold-active svg': { color: 'var(--cairn-directive-ink-active, oklch(46% 0.16 300))' },
         // The folded-row wash: a soft accent tint, square and full-row, returning as a STATE signal
         // so folded spots read in a scan. The rails are inset box-shadows on the same line element
         // and render above this background, so the rail column runs through the wash unbroken.
@@ -274,9 +291,11 @@ through the adapter's render. Swapping the editor stays a one-file change.
           color: 'var(--cairn-focus-dim-ink, oklch(66% 0.01 75))',
           backgroundColor: 'transparent',
         },
-        // The fold machinery dims with its row: a folded opener row under focus mode drops its
-        // chevron, pill, and wash to the dim tone like any other machinery line.
-        '.cm-cairn-focus-dim .cm-cairn-fold-band svg, .cm-cairn-focus-dim .cm-cairn-fold-pill': {
+        // The fold pill dims with its folded opener row like any machinery line (the pill is a
+        // widget inside the line). The gutter chevron lives in a separate DOM column that focus-dim
+        // cannot reach by descendant selector, and it is already hidden at rest and forced visible
+        // only when folded or caret-active, so a folded chevron stays findable without a dim rule.
+        '.cm-cairn-focus-dim .cm-cairn-fold-pill': {
           color: 'var(--cairn-focus-dim-ink, oklch(66% 0.01 75))',
         },
         '.cm-cairn-focus-dim.cm-cairn-folded-row': { backgroundColor: 'transparent' },