@panaversity/ksor 0.0.20 → 0.0.21

package/templates/scaffold/system/site/app/md/[[...slug]]/route.ts

@@ -0,0 +1,51 @@
+import { notFound } from "next/navigation";
+
+import { getLLMText, getSortedPages, source } from "@/lib/source";
+
+export const revalidate = false;
+
+/**
+ * Every document as markdown, at a stable address derived from its path:
+ * `/docs/policies/purchase-approval` is also served at
+ * `/md/policies/purchase-approval.md`.
+ *
+ * The record already IS markdown; without this an agent handed a document URL
+ * had to scrape a React app to reach text the record holds verbatim
+ * (research/site-design.md F2). The body carries the document's governance as
+ * frontmatter, exactly as `llms-full.txt` does, so a consumer reading one
+ * document knows its status, owner, sources and successor.
+ *
+ * Why a `/md/` prefix rather than appending `.md` to the document's own URL,
+ * which is the convention the field has settled on: under `output: "export"` a
+ * Route Handler cannot share a route segment with a Page, and there is no
+ * middleware to rewrite one onto the other. The prefix is the shape that
+ * survives a static host, and the page advertises it in a `rel="alternate"`
+ * link so a consumer discovers it rather than guessing. Appending `.md` to the
+ * canonical URL becomes possible the day a build emits these artifacts itself.
+ */
+export function generateStaticParams(): { slug: string[] }[] {
+  return source.generateParams().map(({ slug }) => {
+    const segments = slug ?? [];
+    const last = segments.at(-1);
+    return {
+      slug: last === undefined ? ["index.md"] : [...segments.slice(0, -1), `${last}.md`],
+    };
+  });
+}
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ slug?: string[] }> },
+): Promise<Response> {
+  const { slug = [] } = await params;
+  const last = slug.at(-1);
+  if (last === undefined || !last.endsWith(".md")) notFound();
+  const docSlug = last === "index.md" ? [] : [...slug.slice(0, -1), last.slice(0, -".md".length)];
+
+  const page = source.getPage(docSlug);
+  if (!page) notFound();
+
+  return new Response(await getLLMText(page, getSortedPages()), {
+    headers: { "content-type": "text/markdown; charset=utf-8" },
+  });
+}

package/templates/scaffold/system/site/components/copy-markdown.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
+import { Check, Copy } from "lucide-react";
+import { useState, type ReactElement } from "react";
+
+/**
+ * Hand this document to an agent: copy the governed markdown, verbatim.
+ *
+ * The record's second audience reads bytes, and until now a reader who wanted
+ * to give an agent a document had to open its markdown twin and select the
+ * page. This fetches that same twin — the one `/md/<path>.md` already serves,
+ * so there is no second rendering of the document to drift — and puts it on the
+ * clipboard.
+ *
+ * Fumadocs ships an `ai/page-actions` component that does this alongside "Open
+ * in ChatGPT" and "Open in Claude". Those two are deliberately NOT taken: this
+ * product's claim is that one corpus answers in ANY assistant because the
+ * surface is an open standard, and hardcoding two vendors into every adopter's
+ * page argues the opposite. What is taken is the shell's own `useCopyButton`,
+ * which owns the copied-state timing — the only part worth not rewriting.
+ *
+ * It rests in the muted grey the rest of the row's metadata wears and takes the
+ * accent only when it has actually copied. An accent at REST said "link" on a
+ * row of facts and added to a page that was already too blue; an accent on the
+ * state CHANGE is the one thing the accent is for.
+ */
+export function CopyMarkdown({ href }: { href: string }): ReactElement {
+  const [failed, setFailed] = useState(false);
+  const [copied, onClick] = useCopyButton(async () => {
+    setFailed(false);
+    try {
+      // `navigator.clipboard` exists only in a secure context, so a site served
+      // over plain http on a LAN address has no clipboard at all. Saying so
+      // beats a button that reports success it did not have.
+      if (navigator.clipboard === undefined) throw new Error("no clipboard");
+      const response = await fetch(href);
+      if (!response.ok) throw new Error(`markdown twin returned ${response.status}`);
+      await navigator.clipboard.writeText(await response.text());
+    } catch {
+      setFailed(true);
+    }
+  });
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      // aria-live, because the label is the only feedback: a screen reader that
+      // does not hear "Copied" is told nothing happened at all.
+      aria-live="polite"
+      // The hover tone is dropped while copied, not overridden: a `hover:`
+      // variant is a class AND a pseudo-class, so it outranks a plain colour
+      // class — and the pointer is by definition still over the button at the
+      // moment it has just been clicked, so the success colour never showed
+      // (measured 2026-08-22: lab(4.41), the foreground, where the accent
+      // belonged).
+      className={`inline-flex items-center gap-1.5 rounded-md px-2 py-1 font-mono text-[0.6875rem] tracking-[0.14em] uppercase transition-colors hover:bg-fd-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-ring ${
+        copied ? "text-fd-primary" : "text-fd-muted-foreground hover:text-fd-foreground"
+      }`}
+    >
+      {copied ? (
+        <Check aria-hidden className="size-3.5" />
+      ) : (
+        <Copy aria-hidden className="size-3.5" />
+      )}
+      {failed ? "Copy failed" : copied ? "Copied" : "Copy"}
+    </button>
+  );
+}

package/templates/scaffold/system/site/components/governance.tsx

@@ -0,0 +1,262 @@
+import { FileText } from "lucide-react";
+import Link from "next/link";
+
+import { CopyMarkdown } from "@/components/copy-markdown";
+import type { ReactElement } from "react";
+
+import {
+  caveatStatus,
+  statusTone,
+  isCalendarDate,
+  sourceHref,
+  type DocumentGovernance,
+} from "@/lib/governance";
+
+/**
+ * What the record says about the document you are reading.
+ *
+ * The site renders the record; these render the record's governance — the
+ * frontmatter `pnpm check` enforces on every document. Nothing here is
+ * authored in the site (critical rule 1) and nothing is inferred: a key the
+ * document does not declare renders nothing at all.
+ *
+ * All three are plain server-rendered markup — no client component, no
+ * disclosure widget. A governance fact that only exists once JavaScript runs
+ * is a governance fact missing from the printout and from the reader with a
+ * failed bundle.
+ */
+
+/**
+ * The successor of a superseded document: its route and the text naming it.
+ * `href` is null when the pointer could not be resolved to a route, and then
+ * the pointer itself is shown as text rather than as a dead link.
+ */
+export interface Successor {
+  readonly href: string | null;
+  readonly label: string;
+}
+
+/**
+ * The supersession notice. Deliberately the first thing on the page, above the
+ * title: a reader must not have to notice a subtle badge to learn that what
+ * they are about to read has been replaced.
+ */
+export function SupersededNotice({ successor }: { successor: Successor }): ReactElement {
+  return (
+    <aside
+      // A landmark, not a note: GOV.UK ships this as role="region" with
+      // aria-labelledby so a screen-reader user can reach the most consequential
+      // thing on the page by landmark, rather than only meeting it in reading
+      // order. role="note" is announced but not navigable.
+      role="region"
+      aria-labelledby="ksor-superseded"
+      // Tinted and ruled down the left edge in the CAUTION role, never
+      // --color-fd-muted: the shipped light theme defines --color-fd-muted and
+      // --color-fd-background as the same value, so the callout composited to
+      // exactly the page and had no visible surface at all (measured in
+      // Chromium, 2026-08-20). The one thing this notice cannot be is missable.
+      className="ksor-caution mb-8 rounded-lg border border-l-4 px-4 py-3 text-sm"
+    >
+      <p id="ksor-superseded" className="font-medium text-fd-foreground">
+        Superseded
+      </p>
+      <p className="mt-1 text-fd-muted-foreground">
+        This document has been replaced by{" "}
+        {successor.href === null ? (
+          <code className="break-words text-fd-foreground">{successor.label}</code>
+        ) : (
+          <Link
+            href={successor.href}
+            className="font-medium text-fd-foreground underline underline-offset-4 transition-colors hover:text-fd-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-ring"
+          >
+            {successor.label}
+          </Link>
+        )}
+        . It is kept because the record never deletes what it replaces.
+      </p>
+    </aside>
+  );
+}
+
+function Fact({
+  label,
+  children,
+}: {
+  label: string;
+  children: ReactElement | string;
+}): ReactElement {
+  return (
+    <div className="flex items-baseline gap-2.5">
+      {/* Mono, uppercase, letterspaced: these are the record's checkable facts,
+          and they read as a register's column heads rather than as a form.
+
+          The label is deliberately SMALLER and more letterspaced than the value
+          it introduces. Both used to be mono a single pixel apart — 11px label
+          against a 12px value — so "Owner Product Effective 2026-08-22" read as
+          one undifferentiated mono run rather than as two facts with names
+          (reported by the owner, 2026-08-22, quoting the run back verbatim).
+          The step is now 10px against 13px, and the value carries the weight. */}
+      <dt className="font-mono text-[0.625rem] tracking-[0.18em] text-fd-muted-foreground uppercase">
+        {label}
+      </dt>
+      <dd className="font-mono text-[0.8125rem] font-medium break-words text-fd-foreground">
+        {children}
+      </dd>
+    </div>
+  );
+}
+
+/**
+ * The one-line governance strip under the document's title: any caveat on its
+ * status, who stands behind it, and when it took effect.
+ */
+export function GovernanceMeta({
+  governance,
+  replaces = [],
+  markdownUrl,
+}: {
+  governance: DocumentGovernance;
+  /** Documents this one replaced — derived from the record, never declared. */
+  replaces?: readonly Successor[];
+  /** The document's markdown twin, offered beside its governance. */
+  markdownUrl?: string;
+}): ReactElement | null {
+  const { owner, effective } = governance;
+  const status = caveatStatus(governance.status);
+  const bare = status === null && owner === null && effective === null && replaces.length === 0;
+  if (bare && markdownUrl === undefined) return null;
+
+  return (
+    <dl className="mb-7 flex flex-wrap items-baseline gap-x-8 gap-y-2.5 border-b border-fd-border pb-4">
+      {status === null ? null : (
+        <Fact label="Status">
+          <span
+            className={`rounded-sm border border-fd-border px-1.5 py-0.5 tracking-widest uppercase ${statusTone(status)}`}
+          >
+            {status}
+          </span>
+        </Fact>
+      )}
+      {owner === null ? null : <Fact label="Owner">{owner}</Fact>}
+      {replaces.length === 0 ? null : (
+        // The other half of a supersession. The withdrawn document names its
+        // successor above the title; this is the successor naming what it
+        // replaced, so the history the record kept is reachable from the
+        // current document instead of only from the retired one.
+        <Fact label={replaces.length === 1 ? "Replaces" : "Replaces"}>
+          <>
+            {replaces.map((entry, index) => (
+              <span key={entry.href ?? `${index}-${entry.label}`}>
+                {index === 0 ? null : ", "}
+                {entry.href === null ? (
+                  entry.label
+                ) : (
+                  <Link
+                    href={entry.href}
+                    className="underline underline-offset-4 transition-colors hover:text-fd-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-ring"
+                  >
+                    {entry.label}
+                  </Link>
+                )}
+              </span>
+            ))}
+          </>
+        </Fact>
+      )}
+      {effective === null ? null : (
+        <Fact label="Effective">
+          {/* The machine attribute is stamped only for a real day on the
+              calendar. A SHAPE test was not enough: the checker's own remedy
+              for `2026-06-31` is to QUOTE it, and quoted text arrives here — so
+              a shape test published `<time dateTime="2026-06-31">`, which is
+              invalid HTML and which a consumer reads as July 1st. That is the
+              precise hazard the record's date rule exists to prevent. */}
+          {isCalendarDate(effective) ? (
+            <time dateTime={effective}>{effective}</time>
+          ) : (
+            <span>{effective}</span>
+          )}
+        </Fact>
+      )}
+      {markdownUrl === undefined ? null : (
+        // On the governance row, not as a footnote below the sources: it is
+        // how a reader hands this document to an agent, and it was previously
+        // the smallest text on the page, last (research/site-design.md F2).
+        // These are the ACTIONS on a row of FACTS, so they wear neither the
+        // bordered badge (that means "a status the record declares", and
+        // dressing a link in it made the only clickable thing look like another
+        // read-only field) nor the accent at rest. An icon and a hover surface
+        // say "control" without spending the brand colour on something that is
+        // merely sitting there — the page had gone blue enough that the accent
+        // had stopped meaning anything (owner, 2026-08-22).
+        // Inline after the facts, NOT right-aligned: `ms-auto` parked it at the
+        // far edge of a 900px row, 498px from the nearest thing on a document
+        // with two facts, where it read as belonging to nothing (measured in
+        // Chromium, 2026-08-21).
+        <span className="flex items-center gap-0.5">
+          <a
+            href={markdownUrl}
+            className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 font-mono text-[0.6875rem] tracking-[0.14em] text-fd-muted-foreground uppercase transition-colors hover:bg-fd-muted hover:text-fd-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-ring"
+          >
+            <FileText aria-hidden className="size-3.5" />
+            Markdown
+          </a>
+          {/* Beside the link, not instead of it: opening the markdown and
+              handing it to an agent are different acts, and a reader who wants
+              the second should not have to perform the first. */}
+          <CopyMarkdown href={markdownUrl} />
+        </span>
+      )}
+    </dl>
+  );
+}
+
+/**
+ * Where the document came from.
+ *
+ * One entry per source, each independently visible — that is the whole point
+ * of `provenance` being a list: a citation has to be able to point at exactly
+ * one of them. Rendering them as prose would take that away.
+ */
+export function Provenance({ entries }: { entries: readonly string[] }): ReactElement | null {
+  if (entries.length === 0) return null;
+
+  return (
+    <section className="mt-10 border-t border-fd-border pt-5 text-sm">
+      <h2 className="mb-2 font-mono text-xs tracking-[0.18em] text-fd-muted-foreground uppercase">
+        Sources
+      </h2>
+      {/* break-words, because a citation is often a long unbroken URL: on a
+          phone it overflowed its row by 175px under an ancestor with
+          `overflow-x: clip`, so the middle of the source was clipped away with
+          no ellipsis and nothing to scroll (measured, 2026-08-20). A source
+          nobody can read is not provenance. */}
+      <ul className="space-y-1 break-words text-fd-muted-foreground">
+        {entries.map((entry, index) => {
+          // An entry that IS a URL becomes followable; a citation stays text.
+          // `rel="noreferrer"` because the destination is authored in the
+          // record, not chosen by this site.
+          const href = sourceHref(entry);
+          return (
+            // Position, not text: a record may cite the same source twice, and
+            // duplicate keys are a console error on a governed page.
+            <li key={`${index}-${entry}`}>
+              {href === null ? (
+                entry
+              ) : (
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="underline underline-offset-4 transition-colors hover:text-fd-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-ring"
+                >
+                  {entry}
+                </a>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

package/templates/scaffold/system/site/components/home-cover.tsx

@@ -0,0 +1,137 @@
+import Link from "next/link";
+import Image, { type StaticImageData } from "next/image";
+import type { ReactElement } from "react";
+
+import { RecordStack } from "@/components/record-stack";
+import type { RecordEntry } from "@/lib/source";
+
+/**
+ * The cover of the record: one screen, standing alone.
+ *
+ * It is cover stock, one step off the page beneath it — pale in light, and in
+ * the dark not white but the surface that catches the light. Every colour on it
+ * is a `--ksor-cover-*` token, so the whole composition inverts with the theme
+ * rather than staying dark in both, and the accent inverts with it.
+ *
+ * The record's own words on the left, the record ITSELF on the right — the
+ * document it opens on, and the entries standing behind it. That stack is
+ * where this page spends its boldness; everything around it is deliberately
+ * quiet.
+ */
+export function HomeCover({
+  foot,
+  mark,
+  name,
+  title,
+  purpose,
+  documents,
+  firstUrl,
+  lead,
+  behind,
+}: {
+  mark: StaticImageData;
+  name: string;
+  title: string;
+  purpose: string | null;
+  documents: number;
+  firstUrl: string;
+  /** The document `Open the record` opens, as the record describes it. */
+  lead: RecordEntry;
+  /** The entries standing behind it in the stack. */
+  behind: readonly RecordEntry[];
+  /** Signed from inside the cover, so the front door is one screen. */
+  foot?: ReactElement;
+}): ReactElement {
+  // The cover fills the window under the navbar (measured at 56px, the shell's
+  // `h-14`): a front door is the whole view, not a band with the page's
+  // background showing beneath it. `dvh` rather than `vh`, so a phone's
+  // collapsing browser chrome does not leave a gap at the bottom.
+  return (
+    <section className="relative flex min-h-[calc(100dvh-3.5rem)] flex-col bg-[var(--ksor-cover)] text-[var(--ksor-cover-foreground)]">
+      {/* A ruled ground — the ledger's own lines, not a texture. Masked to
+          fade at both ends: at full strength edge to edge the rules read as
+          stripes ACROSS the composition rather than as the paper under it. */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 opacity-[0.06]"
+        style={{
+          backgroundImage:
+            "repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 2.25rem)",
+          maskImage: "linear-gradient(to bottom, transparent, black 22%, black 70%, transparent)",
+        }}
+      />
+
+      {/* Centred in the space ABOVE the signature, not top-aligned with the
+          slack dumped underneath: `justify-center` on the section was cancelled
+          by the signature's `mt-auto`, which measured as 197px of dead space
+          below the content and none above it (found live 2026-08-22). */}
+      <div className="relative flex flex-1 items-center">
+        <div className="mx-auto grid w-full max-w-6xl items-center gap-16 px-6 py-14 lg:grid-cols-[1fr_1fr] lg:gap-20">
+          <div>
+            <div className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 motion-safe:duration-500">
+              <div className="flex items-center gap-3">
+                <Image
+                  src={mark}
+                  alt=""
+                  width={30}
+                  height={30}
+                  priority
+                  className="size-[30px] rounded ring-1 ring-[var(--ksor-cover-rule)]"
+                />
+                <p className="font-mono text-xs tracking-[0.18em] text-[var(--ksor-cover-muted)] uppercase">
+                  System of record
+                  <span aria-hidden className="mx-2 text-[var(--ksor-cover-rule)]">
+                    /
+                  </span>
+                  <span className="normal-case">{name}</span>
+                </p>
+              </div>
+
+              <h1 className="mt-8 max-w-4xl font-display text-[clamp(2.5rem,5vw,4rem)] leading-[1.02] font-semibold tracking-[-0.022em] text-balance">
+                {title}
+              </h1>
+
+              {/* The accent as structure, in the token so it inverts with the
+              cover. It was pinned to the dark-theme blue back when the cover
+              was dark in BOTH themes; once the cover started following the
+              theme that left a pale blue hairline on a pale ground, all but
+              invisible in light (found live 2026-08-22). */}
+              <div className="mt-7 h-0.5 w-16 bg-fd-primary" />
+            </div>
+
+            {purpose === null ? null : (
+              <p className="relative mt-7 max-w-xl text-lg/[1.65] text-pretty sm:text-xl/[1.6] text-[var(--ksor-cover-muted)] motion-safe:animate-in motion-safe:fade-in motion-safe:duration-500 motion-safe:[animation-delay:120ms] motion-safe:[animation-fill-mode:backwards]">
+                {purpose}
+              </p>
+            )}
+
+            <div className="mt-9 flex flex-wrap items-center gap-3 motion-safe:animate-in motion-safe:fade-in motion-safe:duration-500 motion-safe:[animation-delay:220ms] motion-safe:[animation-fill-mode:backwards]">
+              {/* One primary action. It names where it lands, because a front door
+              that says only "open" makes you click to find out. */}
+              <Link
+                href={firstUrl}
+                className="group inline-flex items-center gap-2.5 rounded-md bg-fd-primary px-6 py-3.5 text-sm font-medium text-fd-primary-foreground transition-transform hover:-translate-y-px focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-ring motion-reduce:transition-none"
+              >
+                Open the record
+                <span
+                  aria-hidden
+                  className="transition-transform group-hover:translate-x-0.5 motion-reduce:transform-none"
+                >
+                  &rarr;
+                </span>
+              </Link>
+            </div>
+          </div>
+
+          {/* The record, not a picture of one. It also carries what the meta
+              line beside the button used to say — which document opens, and
+              how many the record holds — so neither is said twice. */}
+          <div className="flex justify-center lg:justify-end">
+            <RecordStack lead={lead} behind={behind} documents={documents} />
+          </div>
+        </div>
+      </div>
+      {foot === undefined ? null : <div className="relative pb-10">{foot}</div>}
+    </section>
+  );
+}

package/templates/scaffold/system/site/components/record-index.tsx

@@ -0,0 +1,120 @@
+import { ArrowRight, FileText, Folder } from "lucide-react";
+import Link from "next/link";
+import type { ReactElement } from "react";
+
+import { statusTone } from "@/lib/governance";
+import type { RecordEntry } from "@/lib/source";
+
+/**
+ * What the record holds below this point.
+ *
+ * The site renders the record; this renders its shape. Every value comes from
+ * the record — title, description, status, owner and the count below an entry
+ * are frontmatter and tree, and the order is the governed `order:` key — so
+ * nothing is authored in the site (critical rule 1).
+ *
+ * It exists because a folder's index page listed nothing: `/docs/policies`
+ * rendered a title, a sentence and then empty space, while the two policies it
+ * contains were reachable only from the sidebar. The home page had the same
+ * gap — it said "5 documents" and linked to one (research/site-design.md F2/F5).
+ *
+ * Each entry is a CARD, not a hairline row (owner, 2026-08-22, choosing it from
+ * four prototyped treatments). The register the design language called for was
+ * honest about hierarchy and silent about being usable: at rest a row carried
+ * no affordance at all — only a hover tint and a hover colour — so on a touch
+ * screen, where there is no hover, nothing ever said the row was a link. A card
+ * is a surface a reader expects to press, and the arrow says where pressing
+ * leads before anyone has moved a pointer.
+ *
+ * What survives from the register is the part that was never about looks: the
+ * record's serif for its own words, mono for what the record says ABOUT them —
+ * who owns it, how much it holds, whether it carries a caveat — and `approved`
+ * staying silent, because a label on every row is a label nobody reads.
+ *
+ * Server-rendered plain markup — it survives print, a failed bundle and
+ * JavaScript off, like every other governance fact.
+ */
+export function RecordIndex({
+  entries,
+  heading,
+}: {
+  entries: readonly RecordEntry[];
+  heading: string;
+}): ReactElement | null {
+  if (entries.length === 0) return null;
+
+  return (
+    <section className="mt-14">
+      {/* The head of the list stays a register head: this is a label, and a
+          label is machine-facing furniture whatever the rows below it are. */}
+      <h2 className="mb-3 font-mono text-xs tracking-[0.18em] text-fd-muted-foreground uppercase">
+        {heading}
+      </h2>
+
+      <ul className="grid gap-3">
+        {entries.map((entry) => {
+          // A folder and a leaf are different things to open, and the icon is
+          // read before the count is.
+          const Icon = entry.documents > 0 ? Folder : FileText;
+          return (
+            <li key={entry.url}>
+              <Link
+                href={entry.url}
+                className="group flex items-start gap-4 rounded-lg border border-fd-border bg-fd-muted/40 px-5 py-4 transition-all hover:-translate-y-px hover:border-fd-primary/40 hover:bg-fd-muted hover:shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fd-ring motion-reduce:transition-none motion-reduce:hover:translate-y-0"
+              >
+                <Icon
+                  aria-hidden
+                  className="mt-1 size-4 shrink-0 text-fd-muted-foreground transition-colors group-hover:text-fd-primary"
+                />
+
+                <span className="min-w-0 flex-1">
+                  <span className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+                    <span className="font-display text-lg leading-snug font-semibold tracking-[-0.008em] transition-colors group-hover:text-fd-primary">
+                      {entry.title}
+                    </span>
+                    {entry.status === null ? null : (
+                      <span
+                        className={`rounded-sm border border-fd-border px-1.5 py-0.5 font-mono text-[10px] tracking-widest text-fd-foreground uppercase ${statusTone(entry.status)}`}
+                      >
+                        {entry.status}
+                      </span>
+                    )}
+                  </span>
+
+                  {entry.description === null ? null : (
+                    <span className="mt-1 block text-sm text-pretty text-fd-muted-foreground">
+                      {entry.description}
+                    </span>
+                  )}
+                </span>
+
+                {/* What the record says about it, in the same column every
+                    time, so two entries can be compared without reading. */}
+                <span className="flex shrink-0 items-center gap-3 self-center">
+                  <span className="hidden items-baseline gap-2 font-mono text-xs tracking-wider text-fd-muted-foreground uppercase tabular-nums sm:flex">
+                    {entry.documents === 0 ? null : (
+                      <span>{`${entry.documents} ${entry.documents === 1 ? "doc" : "docs"}`}</span>
+                    )}
+                    {entry.documents === 0 || entry.owner === null ? null : (
+                      <span aria-hidden className="text-fd-border">
+                        ·
+                      </span>
+                    )}
+                    {entry.owner === null ? null : <span>{entry.owner}</span>}
+                  </span>
+
+                  {/* The affordance the register never had: a mark that says
+                      "this opens something", visible without a pointer. */}
+                  <ArrowRight
+                    aria-hidden
+                    className="size-4 text-fd-muted-foreground transition-all group-hover:translate-x-0.5 group-hover:text-fd-primary motion-reduce:transition-none"
+                  />
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}