@anthusai/papyrus 1.0.0-next.4 → 1.0.0-next.40

package/components/newsroom-articles-view.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { Badge } from "./ui/badge";
+import { buttonVariants } from "./ui/button";
+import { Spinner } from "./ui/spinner";
+import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
+import { SITE_BRAND } from "../lib/site-brand";
+import { getNewsroomNavHref } from "../lib/newsroom-nav";
+import { newsroomHref } from "../lib/newsroom-base-path";
+import {
+  resolveArticlesBackend,
+  rowStatusLabel,
+  type NewsroomArticleRow,
+} from "../lib/newsroom-articles";
+import { cn } from "../lib/utils";
+import { useOptionalNewsDeskClient } from "./news-desk-client-provider";
+import { NewsDeskAccessGate } from "./newsroom-access-gate";
+import { NewsroomOpsShell, NewsroomOpsStatusBanner } from "./newsroom-ops-shell";
+
+type ArticleFilter = "all" | "drafts" | "published";
+
+export function articlesAccessBlocked(phase: string | undefined): boolean {
+  return phase === undefined || phase === "checkingAccess" || phase === "signedOut" || phase === "forbidden" || phase === "error";
+}
+
+export function NewsroomArticlesView({ demo }: { demo: boolean }) {
+  const session = useOptionalNewsDeskClient();
+  const blocked = !demo && articlesAccessBlocked(session?.shell.phase);
+  const [rows, setRows] = useState<NewsroomArticleRow[] | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [filter, setFilter] = useState<ArticleFilter>("all");
+
+  useEffect(() => {
+    if (blocked) return;
+    let cancelled = false;
+    resolveArticlesBackend(demo)
+      .listRows()
+      .then((loaded) => {
+        if (!cancelled) setRows(loaded);
+      })
+      .catch((error: unknown) => {
+        if (!cancelled) setLoadError(error instanceof Error ? error.message : "Could not load articles.");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [blocked, demo]);
+
+  const visibleRows = useMemo(() => {
+    if (!rows) return [];
+    if (filter === "drafts") return rows.filter((row) => row.status === "draft");
+    if (filter === "published") return rows.filter((row) => row.status === "published");
+    return rows;
+  }, [filter, rows]);
+
+  if (blocked) return <NewsDeskAccessGate shell={session?.shell ?? null} />;
+
+  return (
+    <NewsroomOpsShell
+      activeTab="articles"
+      appTitle={SITE_BRAND.appTitle}
+      backHref="/"
+      backLabel={SITE_BRAND.backToHomeLabel}
+      demo={demo}
+      headerActions={(
+        <>
+          {demo ? <Badge variant="outline">Demo</Badge> : null}
+          <Link
+            className={cn(buttonVariants({ size: "sm" }))}
+            data-newsroom-article-new
+            href={getNewsroomNavHref(newsroomHref("articles", "new"), demo)}
+          >
+            <PlusIcon aria-hidden="true" />
+            New article
+          </Link>
+        </>
+      )}
+      pageTitle="Articles"
+    >
+      <div className="space-y-4" data-newsroom-articles>
+        <Tabs defaultValue="all" onValueChange={(value) => setFilter(value as ArticleFilter)} value={filter}>
+          <TabsList>
+            <TabsTrigger className="min-w-[5.5rem]" value="all">All</TabsTrigger>
+            <TabsTrigger className="min-w-[5.5rem]" value="drafts">Drafts</TabsTrigger>
+            <TabsTrigger className="min-w-[5.5rem]" value="published">Published</TabsTrigger>
+          </TabsList>
+        </Tabs>
+        {loadError ? <NewsroomOpsStatusBanner tone="error">{loadError}</NewsroomOpsStatusBanner> : null}
+        {rows === null && !loadError ? (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Spinner /> Loading articles…
+          </div>
+        ) : null}
+        {rows !== null && visibleRows.length === 0 ? (
+          <p className="text-sm text-muted-foreground">Nothing here yet.</p>
+        ) : null}
+        <ul className="divide-y divide-border rounded-xl border border-border bg-card" data-newsroom-articles-list>
+          {visibleRows.map((row) => (
+            <li key={row.id}>
+              <Link
+                className="flex flex-col gap-1 px-4 py-3 hover:bg-muted/40 sm:flex-row sm:items-center sm:justify-between sm:gap-4"
+                data-newsroom-article-row={row.slug}
+                href={getNewsroomNavHref(newsroomHref("articles", row.id), demo)}
+              >
+                <span className="min-w-0">
+                  <span className="block truncate text-sm font-medium">{row.title}</span>
+                  <span className="block truncate text-xs text-muted-foreground">
+                    {row.slug}
+                    {row.section ? ` · ${row.section}` : ""}
+                    {row.type !== "article" ? ` · ${row.type}` : ""}
+                  </span>
+                </span>
+                <Badge
+                  data-newsroom-article-status
+                  variant={row.status === "draft" ? "muted" : row.pending ? "outline" : "secondary"}
+                >
+                  {rowStatusLabel(row)}
+                </Badge>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </NewsroomOpsShell>
+  );
+}

package/components/newsroom-client-shell.tsx

@@ -0,0 +1,12 @@
+import { NewsDeskClientProvider } from "./news-desk-client-provider";
+import { resolveDevSandboxEditorAuth } from "../lib/dev-sandbox-editor-auth";
+
+export function NewsroomClientShell({ children }: Readonly<{ children: React.ReactNode }>) {
+  const devSandboxEditorAuth = resolveDevSandboxEditorAuth();
+
+  return (
+    <NewsDeskClientProvider devSandboxEditorAuth={devSandboxEditorAuth}>
+      {children}
+    </NewsDeskClientProvider>
+  );
+}

package/components/newsroom-ops-overview.tsx

@@ -3,8 +3,13 @@
 import {
   BookOpenIcon,
   ClipboardListIcon,
+  FileTextIcon,
   LayersIcon,
+  LightbulbIcon,
   MessageSquareIcon,
+  NetworkIcon,
+  SearchIcon,
+  SettingsIcon,
 } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -12,7 +17,7 @@ import { useMemo } from "react";
 import { Badge } from "./ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
 import type { AssignmentRecord, MessageRecord, NewsroomSectionRecord, ReferenceRecord } from "../lib/category-repository";
-import { getNewsroomNavHref } from "../lib/newsroom-nav";
+import { getNewsroomNavHref, NEWSROOM_OPS_NAV, type NewsroomNavTabId } from "../lib/newsroom-nav";
 import {
   countReferencesByStatus,
   filterReferencesByStatus,
@@ -37,15 +42,28 @@ type NewsroomOpsOverviewProps = {
   references: ReferenceRecord[];
 };
 
-type DestinationKey = "references" | "assignments" | "messages" | "topics";
+type DestinationKey = Exclude<NewsroomNavTabId, "overview" | "desks">;
 
-const DESTINATION_META: Record<DestinationKey, { label: string; detail: string; href: string; icon: typeof BookOpenIcon }> = {
-  references: { label: "References", detail: "Source intake", href: "/newsroom/references", icon: BookOpenIcon },
-  assignments: { label: "Assignments", detail: "Work queue", href: "/newsroom/assignments", icon: ClipboardListIcon },
-  messages: { label: "Messages", detail: "Team threads", href: "/newsroom/messages", icon: MessageSquareIcon },
-  topics: { label: "Topics", detail: "Taxonomy", href: "/newsroom/topics", icon: LayersIcon },
+const DESTINATION_ICONS: Record<DestinationKey, typeof BookOpenIcon> = {
+  articles: FileTextIcon,
+  assignments: ClipboardListIcon,
+  references: BookOpenIcon,
+  messages: MessageSquareIcon,
+  insights: LightbulbIcon,
+  topics: LayersIcon,
+  concepts: NetworkIcon,
+  administration: SettingsIcon,
+  search: SearchIcon,
 };
 
+const DESTINATIONS = NEWSROOM_OPS_NAV.filter((item) => item.id !== "overview").map((item) => ({
+  key: item.id as DestinationKey,
+  label: item.label,
+  detail: item.detail,
+  href: item.href,
+  icon: DESTINATION_ICONS[item.id as DestinationKey],
+}));
+
 function openAssignmentCount(assignments: AssignmentRecord[]): number {
   return assignments.filter((assignment) => {
     const status = assignment.status?.trim().toLowerCase() ?? "";
@@ -85,11 +103,10 @@ export function NewsroomOpsOverview({
     [newsroomSections],
   );
 
-  const destinationCounts: Record<DestinationKey, number | null> = {
+  const destinationCounts: Partial<Record<DestinationKey, number | null>> = {
     references: referenceCounts.pending ?? 0,
     assignments: openAssignmentCount(assignments),
     messages: recentMessageCount(messages),
-    topics: null,
   };
 
   return (
@@ -102,8 +119,8 @@ export function NewsroomOpsOverview({
         <section aria-label="Destinations" className="space-y-3">
           <h2 className="text-sm font-medium text-muted-foreground">Go to</h2>
           <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-            {(Object.keys(DESTINATION_META) as DestinationKey[]).map((key) => {
-              const meta = DESTINATION_META[key];
+            {DESTINATIONS.map((meta) => {
+              const key = meta.key;
               const Icon = meta.icon;
               const count = destinationCounts[key];
               const href = getNewsroomNavHref(meta.href, demo);

package/components/newsroom-ops-shell.tsx

@@ -3,6 +3,7 @@
 import {
   BookOpenIcon,
   ClipboardListIcon,
+  FileTextIcon,
   LayoutGridIcon,
   MenuIcon,
   SearchIcon,
@@ -55,6 +56,7 @@ type NewsroomOpsShellProps = {
 
 const MOBILE_TAB_ICONS: Record<string, typeof LayoutGridIcon> = {
   overview: LayoutGridIcon,
+  articles: FileTextIcon,
   assignments: ClipboardListIcon,
   references: BookOpenIcon,
   topics: TagsIcon,
@@ -198,7 +200,7 @@ export function NewsroomOpsShell({
           className="shrink-0 border-t border-border bg-card/95 pb-[max(env(safe-area-inset-bottom),0.35rem)] pt-1 md:hidden"
           data-newsroom-ops-bottom-nav
         >
-          <ul className="grid grid-cols-5 gap-1 px-2">
+          <ul className="grid grid-cols-6 gap-1 px-1">
             {mobilePrimary.map((item) => {
               const Icon = MOBILE_TAB_ICONS[item.id] ?? LayoutGridIcon;
               const active = resolvedActiveTab === item.id;

package/components/newsroom-references-view.tsx

@@ -44,21 +44,36 @@ import {
 import { normalizeReferenceCurationStatus } from "../lib/reference-policy";
 import { newsroomListRowClassName } from "../lib/newsroom-list-selection";
 import { ReferenceSourcePreview } from "./reference-source-preview";
+import { ReferenceRelevanceReview } from "./reference-relevance-review";
+import { ReferenceCyclotronStatus, type ReviewRateChoice } from "./reference-cyclotron-status";
+import type { CyclotronStatus } from "cyclotron/cyclotron-status";
+import type { RelevanceCuration, RelevanceDecisionView } from "../lib/relevance-decisions";
 import {
   loadReferenceAttachmentsForLineageId,
   loadStoragePathUrl,
 } from "./news-desk-taxonomy-client";
 
 type NewsroomReferencesViewProps = {
+  /** The relevance cyclotron's status snapshot, shown above the list. */
+  cyclotronStatus?: CyclotronStatus | null;
+  /** Present for editors who may ask for a manual review rate. */
+  onRequestReviewRate?: (choice: ReviewRateChoice) => Promise<void> | void;
   demo?: boolean;
+  /** The relevance cyclotron's current decisions, keyed by reference lineage. */
+  decisions?: Map<string, RelevanceDecisionView>;
   disabled?: boolean;
+  onRelevanceReview?: (reference: ReferenceRecord, curation: RelevanceCuration) => void;
   initialReferenceLineageId?: string | null;
   onReview: (reference: ReferenceRecord, action: ReferenceCurationAction) => void;
   referenceAttachments?: ReferenceAttachmentRecord[];
   references: ReferenceRecord[];
 };
 
-const STATUS_FILTERS: Array<{ key: ReferenceStatusFilter; label: string }> = [
+type ReferenceListFilter = ReferenceStatusFilter | "needs_review";
+
+const NEEDS_REVIEW_FILTER: { key: ReferenceListFilter; label: string } = { key: "needs_review", label: "Needs review" };
+
+const STATUS_FILTERS: Array<{ key: ReferenceListFilter; label: string }> = [
   { key: "all", label: "All" },
   { key: "pending", label: "Pending" },
   { key: "accepted", label: "Accepted" },
@@ -183,16 +198,30 @@ function useReferencePreviewAttachments(
   return previewAttachments;
 }
 
+function decisionSummary(decision: RelevanceDecisionView): string {
+  const sure = decision.confidence == null ? "confidence unknown" : `${Math.round(decision.confidence * 100)}% sure`;
+  return `${decision.label} · ${sure}${decision.version != null ? ` · version ${decision.version}` : ""}`;
+}
+
+function needsReview(reference: ReferenceRecord, decision: RelevanceDecisionView | undefined): boolean {
+  return Boolean(decision?.reviewRecommended)
+    && normalizeReferenceCurationStatus(reference.curationStatus) === "pending";
+}
+
 function ReferenceDetailPanel({
+  decision,
   demo,
   disabled,
+  onRelevanceReview,
   onReview,
   previewAttachments,
   reference,
   onClose,
 }: {
+  decision?: RelevanceDecisionView;
   demo?: boolean;
   disabled?: boolean;
+  onRelevanceReview?: (curation: RelevanceCuration) => void;
   onReview: (action: ReferenceCurationAction) => void;
   previewAttachments: ReferenceAttachmentRecord[];
   reference: ReferenceRecord;
@@ -224,11 +253,25 @@ function ReferenceDetailPanel({
           ) : null}
         </div>
 
+        {decision && status === "pending" && onRelevanceReview ? (
+          <ReferenceRelevanceReview
+            decision={decision}
+            disabled={disabled}
+            onCurate={onRelevanceReview}
+            referenceLineageId={lineageId}
+          />
+        ) : decision ? (
+          <p className="text-sm text-muted-foreground" data-reference-relevance-decision={lineageId}>
+            Cyclotron decision: {decisionSummary(decision)}
+          </p>
+        ) : null}
+
         <div
           className="flex flex-wrap items-center gap-2"
           data-news-desk-reference-curation-cluster
           data-reference-curation-status={status}
         >
+          {decision && status === "pending" && onRelevanceReview ? null : <>
           <Button
             aria-label="Accept reference"
             aria-pressed={status === "accepted"}
@@ -255,6 +298,7 @@ function ReferenceDetailPanel({
             <ThumbsDownIcon className="size-4" />
             Reject
           </Button>
+          </>}
           <Button
             aria-label="Archive reference"
             disabled={archiveDisabled}
@@ -347,8 +391,12 @@ function ReferenceDetailPanel({
 }
 
 export function NewsroomReferencesView({
+  cyclotronStatus,
+  decisions,
+  onRequestReviewRate,
   demo = false,
   disabled = false,
+  onRelevanceReview,
   initialReferenceLineageId = null,
   onReview,
   referenceAttachments = [],
@@ -365,13 +413,20 @@ export function NewsroomReferencesView({
   const canonicalReferences = useMemo(() => selectCanonicalReferenceRecords(references), [references]);
   const statusCounts = useMemo(() => countReferencesByStatus(canonicalReferences), [canonicalReferences]);
 
-  const [statusFilter, setStatusFilter] = useState<ReferenceStatusFilter>("all");
+  const [statusFilter, setStatusFilter] = useState<ReferenceListFilter>("all");
+  const needsReviewCount = useMemo(
+    () => canonicalReferences.filter((reference) => needsReview(reference, decisions?.get(referenceLineageId(reference)))).length,
+    [canonicalReferences, decisions],
+  );
+  const filters = decisions?.size ? [NEEDS_REVIEW_FILTER, ...STATUS_FILTERS] : STATUS_FILTERS;
   const [selectedLineageId, setSelectedLineageId] = useState(routeLineageId);
   const [mobileDetailOpen, setMobileDetailOpen] = useState(Boolean(routeLineageId) && isMobileDetail);
 
   const filteredReferences = useMemo(
-    () => filterReferencesByStatus(canonicalReferences, statusFilter),
-    [canonicalReferences, statusFilter],
+    () => statusFilter === "needs_review"
+      ? canonicalReferences.filter((reference) => needsReview(reference, decisions?.get(referenceLineageId(reference))))
+      : filterReferencesByStatus(canonicalReferences, statusFilter),
+    [canonicalReferences, decisions, statusFilter],
   );
 
   const selectedReference = useMemo(
@@ -390,7 +445,7 @@ export function NewsroomReferencesView({
     ? filteredReferences[selectedIndex + 1]
     : null;
 
-  const syncStatusUrl = useCallback((nextStatus: ReferenceStatusFilter) => {
+  const syncStatusUrl = useCallback((nextStatus: ReferenceListFilter) => {
     if (demo) return;
     syncBrowserNewsroomIndexUrl("references", {
       status: nextStatus === "all" ? "" : nextStatus,
@@ -452,22 +507,29 @@ export function NewsroomReferencesView({
             Review source intake before it becomes accepted evidence.
           </p>
         </div>
+        {cyclotronStatus ? (
+          <div className="shrink-0">
+            <ReferenceCyclotronStatus onRequestRate={disabled ? undefined : onRequestReviewRate} status={cyclotronStatus} />
+          </div>
+        ) : null}
 
         <Tabs
           className="shrink-0"
           defaultValue="all"
           onValueChange={(value) => {
-            const next = value as ReferenceStatusFilter;
+            const next = value as ReferenceListFilter;
             setStatusFilter(next);
             syncStatusUrl(next);
           }}
           value={statusFilter}
         >
           <TabsList className="h-auto w-full flex-wrap justify-start gap-1 bg-muted/40 p-1">
-            {STATUS_FILTERS.map((filter) => {
+            {filters.map((filter) => {
               const count = filter.key === "all"
                 ? canonicalReferences.length
-                : statusCounts[filter.key] ?? 0;
+                : filter.key === "needs_review"
+                  ? needsReviewCount
+                  : statusCounts[filter.key] ?? 0;
               return (
                 <TabsTrigger className="text-xs sm:text-sm" key={filter.key} value={filter.key}>
                   {filter.label}
@@ -484,6 +546,7 @@ export function NewsroomReferencesView({
               const lineageId = referenceLineageId(reference);
               const status = normalizeReferenceCurationStatus(reference.curationStatus);
               const active = selectedLineageId === lineageId;
+              const decision = decisions?.get(lineageId);
               return (
                 <button
                   aria-current={active ? "true" : undefined}
@@ -504,6 +567,14 @@ export function NewsroomReferencesView({
                     <Badge variant={referenceStatusBadgeVariant(status)}>{referenceStatusLabel(status)}</Badge>
                   </div>
                   <p className="mt-2 text-xs text-muted-foreground">{formatReferenceListDate(reference)}</p>
+                  {decision ? (
+                    <p className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground" data-reference-relevance-row={lineageId}>
+                      <span>Decision: {decisionSummary(decision)}</span>
+                      {needsReview(reference, decision) ? (
+                        <Badge variant="outline"><span aria-hidden="true">●</span> Needs review</Badge>
+                      ) : null}
+                    </p>
+                  ) : null}
                 </button>
               );
             }) : (
@@ -552,8 +623,10 @@ export function NewsroomReferencesView({
         <ScrollArea className="min-h-0 flex-1">
           {selectedReference ? (
             <ReferenceDetailPanel
+              decision={decisions?.get(referenceLineageId(selectedReference))}
               demo={demo}
               disabled={disabled}
+              onRelevanceReview={onRelevanceReview ? (curation) => onRelevanceReview(selectedReference, curation) : undefined}
               onReview={runReview}
               previewAttachments={previewAttachments}
               reference={selectedReference}
@@ -581,9 +654,11 @@ export function NewsroomReferencesView({
             {selectedReference ? (
               <ScrollArea className="max-h-[75dvh]">
                 <ReferenceDetailPanel
+                  decision={decisions?.get(referenceLineageId(selectedReference))}
                   demo={demo}
                   disabled={disabled}
                   onClose={closeDetail}
+                  onRelevanceReview={onRelevanceReview ? (curation) => onRelevanceReview(selectedReference, curation) : undefined}
                   onReview={runReview}
                   previewAttachments={previewAttachments}
                   reference={selectedReference}

package/components/papyrus-console-shell.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { browserPathToInternalNewsroomPath } from "../lib/newsroom-base-path";
 import type { BotAvatarState } from "anthus-vultus";
 import dynamic from "next/dynamic";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -152,7 +153,8 @@ export function PapyrusConsoleShell({ children }: PapyrusConsoleShellProps) {
   const [session, setSession] = useState<ReaderSessionSnapshot | null>(null);
   const [open, setOpen] = useState(false);
   const [openingReferenceChat, setOpeningReferenceChat] = useState(false);
-  const isNewsroomPath = pathname === "/newsroom" || pathname.startsWith("/newsroom/");
+  const internalPathname = browserPathToInternalNewsroomPath(pathname);
+  const isNewsroomPath = internalPathname === "/newsroom" || internalPathname.startsWith("/newsroom/");
   const canUseConsole = Boolean(session?.hasSession && session.groups.some((group) => group === "editor" || group === "admin"));
   const shouldOfferConsole = isNewsroomPath && canUseConsole;
 
@@ -433,7 +435,7 @@ function ConsolePanel({ actorEmail, actorLabel, onClose }: { actorEmail: string
   const handledNavigationMessageIdsRef = useRef<Set<string>>(new Set());
 
   const currentWebPath = useMemo(() => {
-    const path = pathname ?? "/newsroom";
+    const path = browserPathToInternalNewsroomPath(pathname ?? "/newsroom");
     const query = searchParams.toString();
     return query ? `${path}?${query}` : path;
   }, [pathname, searchParams]);

package/components/pictogram-figure.tsx

@@ -12,6 +12,9 @@ export type PictogramFigureProps = {
   credit: string;
   figureClassName: string;
   height: number;
+  /** Rhythm blog layout: solved frame size in CSS pixels; wins over `height`/`width` when set. */
+  frameHeight?: number;
+  frameWidth?: number;
   layout?: ArticleImageLayout;
   priority?: boolean;
   sizes: string;
@@ -34,6 +37,8 @@ export function PictogramFigure({
   caption,
   credit,
   figureClassName,
+  frameHeight,
+  frameWidth,
   height,
   priority = false,
   sizes,
@@ -41,6 +46,8 @@ export function PictogramFigure({
   themeVariants,
   width,
 }: PictogramFigureProps) {
+  const imageHeight = frameHeight ?? height;
+  const imageWidth = frameWidth ?? width;
   const resolvedTheme = useResolvedPapyrusTheme();
   const themedImageSrc = resolveThemedImageSrc(src, themeVariants, resolvedTheme);
 
@@ -53,8 +60,8 @@ export function PictogramFigure({
       <Image
         src={themedImageSrc}
         alt={alt}
-        width={width}
-        height={height}
+        width={imageWidth}
+        height={imageHeight}
         sizes={sizes}
         priority={priority}
         unoptimized={shouldBypassImageOptimization(themedImageSrc)}

package/components/presentation-header.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import Link from "next/link";
+import { getEditionSectionPath } from "../lib/edition-routes";
+import { SITE_BRAND } from "../lib/site-brand";
+
+export type PresentationHeaderSection = {
+  key: string;
+  label: string;
+};
+
+export type PresentationHeaderProps = {
+  editionDate?: string;
+  title?: string;
+  description?: string;
+  sections?: PresentationHeaderSection[];
+  editionBasePath?: string;
+};
+
+export function PresentationHeader({
+  editionDate,
+  title: contentTitle,
+  description,
+  sections,
+  editionBasePath,
+}: PresentationHeaderProps) {
+  const title = SITE_BRAND.mastheadSource === "brand" ? SITE_BRAND.mastheadTitle : contentTitle;
+  const subtitle = SITE_BRAND.mastheadSource === "brand" ? SITE_BRAND.mastheadSubtitle : description;
+  const eyebrow = SITE_BRAND.mastheadEyebrow ?? null;
+  const tagline = SITE_BRAND.mastheadTagline ?? null;
+  const taglineLines = SITE_BRAND.mastheadTaglineLines ?? null;
+  const displayDate = editionDate
+    ? SITE_BRAND.mastheadDateFormat === "formatted"
+      ? formatMastheadDate(editionDate)
+      : editionDate
+    : null;
+
+  const eyebrowParts = eyebrow ? splitEyebrow(eyebrow) : null;
+
+  return (
+    <>
+      <header className="presentation-header">
+        <div className="presentation-header__copy-stack">
+          {eyebrowParts ? (
+            <span className="presentation-header__eyebrow">
+              <span className="presentation-header__eyebrow-strong">{eyebrowParts.lead}</span>
+              {eyebrowParts.rest ? (
+                <span className="presentation-header__eyebrow-muted">{eyebrowParts.rest}</span>
+              ) : null}
+            </span>
+          ) : null}
+          <h1>
+            {SITE_BRAND.mastheadWordSplit && title
+              ? title.split(/\s+/).map((word) => (
+                  <span className="presentation-header__word" key={word}>
+                    <span className="presentation-header__word-text">{word}</span>
+                  </span>
+                ))
+              : title}
+          </h1>
+          <div className="presentation-header__meta">
+            {subtitle && !eyebrow ? <span className="presentation-header__subtitle">{subtitle}</span> : null}
+            {displayDate ? <p className="presentation-header__date">{displayDate}</p> : null}
+          </div>
+        </div>
+        {tagline ? (
+          <span className="presentation-header__tagline">
+            {taglineLines && taglineLines.length > 0
+              ? taglineLines.map((line, index) => (
+                  <span className="presentation-header__tagline-line" key={index}>
+                    <span className="presentation-header__tagline-emphasis">{line.emphasis}</span>
+                    <span className="presentation-header__tagline-tail">{line.tail}</span>
+                    {index < taglineLines.length - 1 ? " " : null}
+                  </span>
+                ))
+              : tagline}
+          </span>
+        ) : null}
+      </header>
+      {sections && sections.length > 0 ? (
+        <nav className="presentation-section-nav" aria-label="Edition sections">
+          {sections.map((section) => (
+            <Link
+              href={getSectionHref(section, { editionBasePath, editionDate })}
+              key={section.key}
+            >
+              {section.label}
+            </Link>
+          ))}
+        </nav>
+      ) : null}
+    </>
+  );
+}
+
+function getSectionHref(
+  section: PresentationHeaderSection,
+  options: { editionBasePath?: string; editionDate?: string },
+): string {
+  if (SITE_BRAND.sectionLinkStrategy === "anchor") {
+    const anchor = `#${getSectionAnchorId(section.key)}`;
+    return options.editionBasePath ? `${options.editionBasePath}${anchor}` : anchor;
+  }
+  if (options.editionBasePath) {
+    return `${options.editionBasePath}/section/${encodeURIComponent(section.key)}`;
+  }
+  if (options.editionDate) {
+    const datedPath = getEditionSectionPath(options.editionDate, section.key);
+    return datedPath.startsWith("//") ? `#${getSectionAnchorId(section.key)}` : datedPath;
+  }
+  return `#${getSectionAnchorId(section.key)}`;
+}
+
+export function getSectionAnchorId(sectionKey: string): string {
+  return `section-${sectionKey}`;
+}
+
+function splitEyebrow(text: string): { lead: string; rest: string } {
+  const trimmed = text.trim();
+  const firstSpace = trimmed.indexOf(" ");
+  if (firstSpace === -1) return { lead: trimmed, rest: "" };
+  return { lead: trimmed.slice(0, firstSpace), rest: trimmed.slice(firstSpace + 1) };
+}
+
+export function formatMastheadDate(value: string): string {
+  const normalized = value?.trim();
+  if (!normalized) return value;
+  const date = new Date(`${normalized}T00:00:00`);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  }).format(date);
+}