@anthusai/papyrus 1.3.0 → 1.4.0-next.10

package/app/layout.tsx

@@ -5,7 +5,7 @@ import { AmplifyClientProvider } from "../components/amplify-client-provider";
 import { PapyrusConsoleShell } from "../components/papyrus-console-shell";
 import { TooltipProvider } from "../components/ui/tooltip";
 import { resolveBrandFontAssets } from "../lib/brand-fonts";
-import { getPresentationChoices, getSiteBrand } from "../lib/site-brand";
+import { DEFAULT_SITE_BRAND_ICONS, getPresentationChoices, getSiteBrand } from "../lib/site-brand";
 import { getSiteStack } from "../lib/site-stack";
 import { isIndexable, showStagingBanner } from "../lib/site-env";
 import { StagingBanner } from "../components/staging-banner";
@@ -34,9 +34,10 @@ export async function generateMetadata(): Promise<Metadata> {
     ...(isIndexable() ? {} : { robots: { index: false, follow: false } }),
     icons: {
       icon: [
-        { url: `/icon-light.png?v=${faviconVersion}`, type: "image/png" },
-        { url: `/icon.png?v=${faviconVersion}`, type: "image/png" },
+        { url: `${siteBrand.icons?.light ?? DEFAULT_SITE_BRAND_ICONS.light}?v=${faviconVersion}`, type: "image/png" },
+        ...(siteBrand.icons ? [] : [{ url: `${DEFAULT_SITE_BRAND_ICONS.fallback}?v=${faviconVersion}`, type: "image/png" }]),
       ],
+      ...(siteBrand.icons?.appleTouch ? { apple: [{ url: `${siteBrand.icons.appleTouch}?v=${faviconVersion}`, type: "image/png" }] } : {}),
     },
   };
 }
@@ -46,6 +47,8 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
   const presentationChoices = getPresentationChoices(siteBrand);
   const siteStack = getSiteStack(siteBrand);
   const brandFonts = resolveBrandFontAssets(siteBrand.fonts);
+  const lightIconPath = siteBrand.icons?.light ?? DEFAULT_SITE_BRAND_ICONS.light;
+  const darkIconPath = siteBrand.icons ? siteBrand.icons.dark ?? siteBrand.icons.light : DEFAULT_SITE_BRAND_ICONS.dark;
 
   return (
     <html
@@ -78,8 +81,8 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
         <Script id="papyrus-favicon-color-scheme" strategy="beforeInteractive">
           {`(() => {
   const version = "${faviconVersion}";
-  const lightHref = "/icon-light.png?v=" + version;
-  const darkHref = "/icon-dark.png?v=" + version;
+  const lightHref = ${JSON.stringify(lightIconPath)} + "?v=" + version;
+  const darkHref = ${JSON.stringify(darkIconPath)} + "?v=" + version;
   const settingsStorageKey = "papyrus:reader-settings";
   const defaultTheme = "${defaultTheme}";
 

package/app/newsroom/[section]/[...selection]/page.tsx

@@ -33,7 +33,6 @@ const NEWS_DESK_ROUTE_SECTIONS = new Set<NewsDeskTab>([
   "topics",
   "concepts",
   "references",
-  "insights",
   "messages",
   "assignments",
 ]);

package/app/newsroom/[section]/page.tsx

@@ -1,6 +1,8 @@
 import { resolveActiveSiteBrand } from "../../../lib/site-brand-tenant";
 import { notFound, redirect } from "next/navigation";
 import { toPublicNewsroomPath } from "../../../lib/newsroom-base-path";
+import { contentItemBoardPathSegment } from "../../../lib/newsroom-board";
+import { NewsroomBoardView } from "../../../components/newsroom-board-view";
 import { NewsDeskPage } from "../../../components/news-desk-page";
 import type { NewsDeskTab } from "../../../components/topic-steering-workspace";
 
@@ -34,7 +36,6 @@ const NEWS_DESK_ROUTE_SECTIONS = new Set<NewsDeskTab>([
   "topics",
   "concepts",
   "references",
-  "insights",
   "messages",
   "assignments",
   "search",
@@ -42,9 +43,15 @@ const NEWS_DESK_ROUTE_SECTIONS = new Set<NewsDeskTab>([
 
 export default async function NewsDeskSectionPage({ params, searchParams }: NewsDeskSectionPageProps) {
   const { section } = await params;
+  if (section === "work") redirect(toPublicNewsroomPath(`/newsroom/${contentItemBoardPathSegment()}`));
   if (section === "users") redirect(toPublicNewsroomPath("/newsroom/administration/users"));
   if (section === "doctrine") redirect(toPublicNewsroomPath("/newsroom/administration/policies"));
   if (section === "desks" && resolveActiveSiteBrand().newsroomLayout !== "organizer") redirect(toPublicNewsroomPath("/newsroom/topics"));
+  if (section === contentItemBoardPathSegment() && resolveActiveSiteBrand().newsroomLayout === "organizer") return <NewsroomBoardView subject="contentItem" />;
   if (!NEWS_DESK_ROUTE_SECTIONS.has(section as NewsDeskTab)) notFound();
+  if (section === "assignments" && resolveActiveSiteBrand().newsroomLayout === "organizer") {
+    const resolved = await searchParams;
+    if (!resolved?.assignment && resolved?.demo !== "1") return <NewsroomBoardView subject="assignment" />;
+  }
   return <NewsDeskPage section={section} searchParams={searchParams} />;
 }

package/app/newsroom/articles/page.tsx

@@ -1,3 +1,8 @@
+import { redirect } from "next/navigation";
+import { contentItemBoardPathSegment } from "../../../lib/newsroom-board";
+import { toPublicNewsroomPath } from "../../../lib/newsroom-base-path";
+import { NewsroomBoardView } from "../../../components/newsroom-board-view";
+import { resolveActiveSiteBrand } from "../../../lib/site-brand-tenant";
 import { NewsroomArticlesView } from "../../../components/newsroom-articles-view";
 
 export const dynamic = "force-dynamic";
@@ -9,5 +14,10 @@ type NewsroomArticlesPageProps = {
 export default async function NewsroomArticlesPage({ searchParams }: NewsroomArticlesPageProps) {
   const resolved = await searchParams;
   const demoValue = Array.isArray(resolved?.demo) ? resolved?.demo[0] : resolved?.demo;
+  if (resolveActiveSiteBrand().newsroomLayout === "organizer" && demoValue !== "1") {
+    const boardPathSegment = contentItemBoardPathSegment();
+    if (boardPathSegment !== "articles") redirect(toPublicNewsroomPath(`/newsroom/${boardPathSegment}`));
+    return <NewsroomBoardView subject="contentItem" />;
+  }
   return <NewsroomArticlesView demo={demoValue === "1"} />;
 }

package/app/newsroom/insights/[threadId]/page.tsx

@@ -1,22 +1,11 @@
-import { NewsDeskPage } from "../../../../components/news-desk-page";
+import { permanentRedirect } from "next/navigation";
+import { toPublicNewsroomPath } from "../../../../lib/newsroom-base-path";
 
-export const dynamic = "force-dynamic";
-
-type NewsroomInsightThreadPageProps = {
+type NewsroomMessageThreadRedirectPageProps = {
   params: Promise<{ threadId: string }>;
-  searchParams?: Promise<{
-    demo?: string | string[];
-    domain?: string | string[];
-  }>;
 };
 
-export default async function NewsroomInsightThreadPage({ params, searchParams }: NewsroomInsightThreadPageProps) {
+export default async function NewsroomMessageThreadRedirectPage({ params }: NewsroomMessageThreadRedirectPageProps) {
   const { threadId } = await params;
-  return (
-    <NewsDeskPage
-      section="insights"
-      selectionPath={[threadId]}
-      searchParams={searchParams}
-    />
-  );
+  permanentRedirect(toPublicNewsroomPath(`/newsroom/messages/${encodeURIComponent(threadId)}`));
 }

package/app/newsroom/insights/page.tsx

@@ -1,14 +1,6 @@
-import { NewsDeskPage } from "../../../components/news-desk-page";
+import { permanentRedirect } from "next/navigation";
+import { toPublicNewsroomPath } from "../../../lib/newsroom-base-path";
 
-export const dynamic = "force-dynamic";
-
-type NewsroomInsightsPageProps = {
-  searchParams?: Promise<{
-    demo?: string | string[];
-    domain?: string | string[];
-  }>;
-};
-
-export default async function NewsroomInsightsPage({ searchParams }: NewsroomInsightsPageProps) {
-  return <NewsDeskPage section="insights" searchParams={searchParams} />;
+export default function NewsroomMessagesRedirectPage() {
+  permanentRedirect(toPublicNewsroomPath("/newsroom/messages"));
 }

package/app/newsroom/sections/[sectionId]/page.tsx

@@ -1,4 +1,6 @@
 import { notFound } from "next/navigation";
+import { resolveActiveSiteBrand } from "../../../../lib/site-brand-tenant";
+import { NewsroomBoardView } from "../../../../components/newsroom-board-view";
 import { NewsDeskPage } from "../../../../components/news-desk-page";
 
 export const dynamic = "force-dynamic";
@@ -13,5 +15,6 @@ export default async function NewsroomDeepSectionPage({ params, searchParams }:
   const normalizedSectionId = decodeURIComponent(sectionId ?? "").trim();
   if (!normalizedSectionId) notFound();
 
+  if (resolveActiveSiteBrand().newsroomLayout === "organizer") return <NewsroomBoardView subject="desk" deskId={normalizedSectionId} />;
   return <NewsDeskPage sectionPageId={normalizedSectionId} searchParams={searchParams} />;
 }

package/app/page.tsx

@@ -15,7 +15,10 @@ import {
   type PublicPlaceholderTopic,
 } from "../lib/public-placeholder-config";
 import type { PublicationItem } from "../lib/publication-items";
-import { SITE_BRAND, rootRoute } from "../lib/site-brand";
+import { SITE_BRAND, editionsEnabled, rootRoute } from "../lib/site-brand";
+import { ItemStreamView } from "../components/item-stream-view";
+import { ITEM_STREAM_RECENT_EDITION_COUNT, buildItemStream, selectNewestStreamItems } from "../lib/item-stream";
+import { listCachedPublishedEditions } from "../lib/cached-content-repository";
 import { notFound, redirect } from "next/navigation";
 import { getReaderBasePath } from "../lib/reader-base-path";
 import { buildRootRedirectTarget } from "../lib/root-route-redirect";
@@ -27,6 +30,7 @@ export const dynamic = "force-dynamic";
 type HomePageProps = {
   searchParams?: Promise<{
     scenario?: string | string[];
+    section?: string | string[];
     code?: string | string[];
     state?: string | string[];
     error?: string | string[];
@@ -59,6 +63,13 @@ export default async function Home({ searchParams }: HomePageProps) {
     notFound();
   }
 
+  if (!editionsEnabled()) {
+    const sectionParam = resolvedSearchParams?.section;
+    const sectionKey = Array.isArray(sectionParam) ? sectionParam[0] : sectionParam;
+    const items = await loadNewestStreamItemsOrNone();
+    return <ItemStreamView stream={buildItemStream(items, sectionKey)} />;
+  }
+
   // Resolved only on the reader path: Markus brands (renderer "markus") have
   // no Next.js reader and getSiteRenderer() throws for them, but they can
   // still serve the newsroom at the root via rootRoute above.
@@ -88,6 +99,24 @@ export default async function Home({ searchParams }: HomePageProps) {
   return <siteRenderer.renderEdition content={content} />;
 }
 
+async function loadNewestStreamItemsOrNone() {
+  try {
+    return await loadNewestStreamItems();
+  } catch (error) {
+    if (!isMissingReaderBackendError(error)) throw error;
+    return [];
+  }
+}
+
+async function loadNewestStreamItems() {
+  const { editions } = await listCachedPublishedEditions({ limit: ITEM_STREAM_RECENT_EDITION_COUNT });
+  const newestFirst = [...editions].sort((left, right) => right.editionDate.localeCompare(left.editionDate));
+  const contents = await Promise.all(
+    newestFirst.map((edition) => loadCachedEditionContent({ editionDate: edition.editionDate })),
+  );
+  return selectNewestStreamItems(contents);
+}
+
 async function loadLatestGraphQLEdition(): Promise<EditionContent | null> {
   const latestEdition = await getCachedLatestPublishedEdition();
   if (!latestEdition) return null;

package/components/administration-delegations-panel.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import {
+  delegationStateText,
+  describeDelegationError,
+  isPendingDelegation,
+  pendingCountdownText,
+  requestedHoursText,
+  type CurationDelegationRecord,
+} from "../lib/curation-delegation-helpers";
+import { approveCurationDelegation, denyCurationDelegation, listCurationDelegations, revokeCurationDelegation } from "./curation-delegation-client";
+
+const REFRESH_MILLISECONDS = 10_000;
+
+export function AdministrationDelegationsPanel({ disabled }: { disabled: boolean }) {
+  const [busyCode, setBusyCode] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [delegations, setDelegations] = useState<CurationDelegationRecord[]>([]);
+  const [confirmingRevokeId, setConfirmingRevokeId] = useState<string | null>(null);
+  const [nowMilliseconds, setNowMilliseconds] = useState(() => Date.now());
+  const mounted = useRef(true);
+
+  useEffect(() => {
+    mounted.current = true;
+    void refreshDelegations();
+    const refreshTimer = window.setInterval(() => void refreshDelegations(), REFRESH_MILLISECONDS);
+    const clockTimer = window.setInterval(() => setNowMilliseconds(Date.now()), 1_000);
+    return () => {
+      mounted.current = false;
+      window.clearInterval(refreshTimer);
+      window.clearInterval(clockTimer);
+    };
+  }, []);
+
+  async function refreshDelegations() {
+    try {
+      const listed = await listCurationDelegations();
+      if (mounted.current) setDelegations(listed);
+    } catch (error) {
+      if (mounted.current) setErrorMessage(describeDelegationError(error));
+    }
+  }
+
+  async function decide(userCode: string, decision: "approve" | "deny") {
+    setBusyCode(userCode);
+    setErrorMessage(null);
+    try {
+      await (decision === "approve" ? approveCurationDelegation(userCode) : denyCurationDelegation(userCode));
+      await refreshDelegations();
+    } catch (error) {
+      setErrorMessage(describeDelegationError(error));
+      await refreshDelegations();
+    } finally {
+      setBusyCode(null);
+    }
+  }
+
+  async function handleRevoke(delegationId: string) {
+    setBusy(true);
+    setErrorMessage(null);
+    try {
+      await revokeCurationDelegation(delegationId);
+      await refreshDelegations();
+      setConfirmingRevokeId(null);
+    } catch (error) {
+      setErrorMessage(describeDelegationError(error));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const pending = delegations.filter((entry) => isPendingDelegation(entry, nowMilliseconds));
+  const others = delegations.filter((entry) => entry.state !== "pending");
+
+  return (
+    <div data-news-desk-admin-panel="delegations">
+      <article className="news-desk-doctrine-card" data-delegation-pending-block>
+        <div className="news-desk-doctrine-card__header">
+          <div>
+            <h3>Pending requests</h3>
+            <span>An agent asked to record your decisions. Check the code matches what it showed you.</span>
+          </div>
+        </div>
+        {errorMessage ? <p className="news-desk-delegation-error" role="alert" data-delegation-error>{errorMessage}</p> : null}
+        {pending.length === 0 ? (
+          <p className="news-desk-delegation-note" data-delegation-pending-empty>No agent is waiting for approval. A request appears here as soon as an agent asks.</p>
+        ) : (
+          <ul className="news-desk-delegation-pending-list">
+            {pending.map((entry) => {
+              const userCode = entry.userCode ?? "";
+              const working = busyCode === userCode;
+              return (
+                <li key={entry.delegationId} data-delegation-pending={entry.delegationId}>
+                  <div>
+                    <strong>{entry.agentLabel}</strong>
+                    <span>{requestedHoursText(entry.requestedHours)}</span>
+                    <span className="news-desk-delegation-countdown" data-delegation-countdown>{pendingCountdownText(entry.pendingExpiresAt ?? entry.expiresAt, nowMilliseconds)}</span>
+                  </div>
+                  <code className="news-desk-delegation-code" data-delegation-user-code aria-label={`Code ${userCode.split("").join(" ")}`}>{userCode}</code>
+                  <span className="news-desk-delegation-decision">
+                    <button type="button" data-delegation-approve onClick={() => void decide(userCode, "approve")} disabled={disabled || working || busyCode !== null}>Approve</button>
+                    <button type="button" data-delegation-deny onClick={() => void decide(userCode, "deny")} disabled={disabled || working || busyCode !== null}>Deny</button>
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+        <p className="news-desk-delegation-note" data-delegation-words-note>
+          While a delegation lasts, that agent&apos;s approvals and rejections are recorded under your name and marked as relayed, with the words you gave it kept with each record. You can revoke it at any moment.
+        </p>
+      </article>
+
+      <article className="news-desk-doctrine-card">
+        <div className="news-desk-doctrine-card__header">
+          <div>
+            <h3>Delegations</h3>
+            <span>Decided requests, newest first</span>
+          </div>
+        </div>
+        {others.length === 0 ? (
+          <p className="news-desk-delegation-note" data-delegation-empty>You have not granted any delegations.</p>
+        ) : (
+          <ul className="news-desk-delegation-list">
+            {others.map((entry) => {
+              const stateText = delegationStateText(entry, nowMilliseconds);
+              const live = entry.state === "approved" && !entry.revokedAt && stateText !== "Expired";
+              return (
+                <li key={entry.delegationId} data-delegation-row={entry.delegationId} data-delegation-live={live || undefined}>
+                  <div>
+                    <strong>{entry.agentLabel}</strong>
+                    <span>{`Granted by ${entry.grantorLabel ?? "you"}`}</span>
+                  </div>
+                  <span className="news-desk-delegation-state">{stateText}</span>
+                  {live ? (
+                    confirmingRevokeId === entry.delegationId ? (
+                      <span className="news-desk-delegation-confirm">
+                        <span>{`Stop ${entry.agentLabel} from curating for you?`}</span>
+                        <button type="button" data-delegation-revoke-confirm onClick={() => void handleRevoke(entry.delegationId)} disabled={busy}>Revoke now</button>
+                        <button type="button" onClick={() => setConfirmingRevokeId(null)} disabled={busy}>Keep</button>
+                      </span>
+                    ) : (
+                      <button type="button" data-delegation-revoke onClick={() => setConfirmingRevokeId(entry.delegationId)} disabled={disabled || busy}>Revoke</button>
+                    )
+                  ) : null}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </article>
+    </div>
+  );
+}

package/components/curation-delegation-client.ts

@@ -0,0 +1,104 @@
+"use client";
+
+import { generateClient } from "aws-amplify/data";
+import { isLocalPreviewEnabled } from "../lib/local-preview";
+import type { CurationDelegationRecord } from "../lib/curation-delegation-helpers";
+import { configureAmplifyClient } from "./amplify-client-provider";
+
+const USER_POOL_AUTH_MODE = "userPool";
+
+const DELEGATION_FIELDS = "delegationId agentLabel grantorLabel expiresAt revokedAt state userCode requestedHours pendingExpiresAt approvedAt deniedAt";
+
+const APPROVE_MUTATION = `
+  mutation ApproveCurationDelegation($userCode: String!) {
+    approveCurationDelegation(userCode: $userCode) { ${DELEGATION_FIELDS} }
+  }
+`;
+
+const DENY_MUTATION = `
+  mutation DenyCurationDelegation($userCode: String!) {
+    denyCurationDelegation(userCode: $userCode) { ${DELEGATION_FIELDS} }
+  }
+`;
+
+const REVOKE_MUTATION = `
+  mutation RevokeCurationDelegation($delegationId: ID!) {
+    revokeCurationDelegation(delegationId: $delegationId) {
+      ${DELEGATION_FIELDS}
+    }
+  }
+`;
+
+const LIST_QUERY = `
+  query ListCurationDelegations {
+    listCurationDelegations {
+      ${DELEGATION_FIELDS}
+    }
+  }
+`;
+
+function previewPendingRequest(agentLabel: string, userCode: string, requestedHours: number, minutesLeft: number, id: string): CurationDelegationRecord {
+  const pendingExpiresAt = new Date(Date.now() + minutesLeft * 60_000).toISOString();
+  return { delegationId: id, agentLabel, grantorLabel: null, expiresAt: pendingExpiresAt, revokedAt: null, state: "pending", userCode, requestedHours, pendingExpiresAt, approvedAt: null, deniedAt: null };
+}
+
+const previewDelegations: CurationDelegationRecord[] = [
+  previewPendingRequest("e2e-check", "WDJB-MJHT", 1, 9.5, "curation-delegation-preview-pending-1"),
+  previewPendingRequest("section-curator", "KQPR-4XNZ", 8, 4, "curation-delegation-preview-pending-2"),
+];
+
+function normalizedCode(code: string): string {
+  return code.replace(/[^a-z0-9]/gi, "").toUpperCase();
+}
+
+async function runGraphql<T>(query: string, variables: Record<string, unknown>): Promise<T> {
+  configureAmplifyClient();
+  const client = generateClient() as unknown as {
+    graphql: (options: Record<string, unknown>) => Promise<{ data?: T | null; errors?: Array<{ message?: string }> | null }>;
+  };
+  const response = await client.graphql({ query, variables, authMode: USER_POOL_AUTH_MODE });
+  if (response.errors?.length) throw Object.assign(new Error(response.errors[0]?.message ?? "Request failed."), { errors: response.errors });
+  if (!response.data) throw new Error("The server returned no result.");
+  return response.data;
+}
+
+export async function approveCurationDelegation(userCode: string): Promise<CurationDelegationRecord> {
+  if (isLocalPreviewEnabled()) {
+    const record = previewDelegations.find((entry) => entry.state === "pending" && normalizedCode(entry.userCode ?? "") === normalizedCode(userCode));
+    if (!record) throw new Error("That code was not found, has expired, or was already decided.");
+    const now = Date.now();
+    Object.assign(record, { state: "approved", userCode: null, grantorLabel: "ryan@example.com", approvedAt: new Date(now).toISOString(), expiresAt: new Date(now + (record.requestedHours ?? 1) * 3_600_000).toISOString() });
+    return { ...record };
+  }
+  const data = await runGraphql<{ approveCurationDelegation: CurationDelegationRecord }>(APPROVE_MUTATION, { userCode });
+  return data.approveCurationDelegation;
+}
+
+export async function denyCurationDelegation(userCode: string): Promise<CurationDelegationRecord> {
+  if (isLocalPreviewEnabled()) {
+    const record = previewDelegations.find((entry) => entry.state === "pending" && normalizedCode(entry.userCode ?? "") === normalizedCode(userCode));
+    if (!record) throw new Error("That code was not found, has expired, or was already decided.");
+    Object.assign(record, { state: "denied", userCode: null, deniedAt: new Date().toISOString() });
+    return { ...record };
+  }
+  const data = await runGraphql<{ denyCurationDelegation: CurationDelegationRecord }>(DENY_MUTATION, { userCode });
+  return data.denyCurationDelegation;
+}
+
+export async function revokeCurationDelegation(delegationId: string): Promise<CurationDelegationRecord> {
+  if (isLocalPreviewEnabled()) {
+    const record = previewDelegations.find((entry) => entry.delegationId === delegationId);
+    if (!record) throw new Error("That delegation was not found.");
+    record.revokedAt = record.revokedAt ?? new Date().toISOString();
+    record.state = "revoked";
+    return { ...record };
+  }
+  const data = await runGraphql<{ revokeCurationDelegation: CurationDelegationRecord }>(REVOKE_MUTATION, { delegationId });
+  return data.revokeCurationDelegation;
+}
+
+export async function listCurationDelegations(): Promise<CurationDelegationRecord[]> {
+  if (isLocalPreviewEnabled()) return previewDelegations.map((entry) => ({ ...entry }));
+  const data = await runGraphql<{ listCurationDelegations: CurationDelegationRecord[] }>(LIST_QUERY, {});
+  return data.listCurationDelegations ?? [];
+}

package/components/item-stream-view.tsx

@@ -0,0 +1,63 @@
+import Link from "next/link";
+import type { ItemStream } from "../lib/item-stream";
+import { toPublicReaderPath } from "../lib/reader-base-path";
+import { SITE_BRAND } from "../lib/site-brand";
+
+/** The home of a publication without editions: a masthead, section filters and the newest items. */
+export function ItemStreamView({ stream }: { stream: ItemStream }) {
+  const homePath = toPublicReaderPath("/");
+  const tagline = SITE_BRAND.mastheadTagline ?? null;
+
+  return (
+    <main className="presentation-page presentation-page--blog" data-presentation-engine="item-stream">
+      <header className="presentation-header">
+        <div className="presentation-header__copy-stack">
+          <h1>
+            <Link href={homePath}>{SITE_BRAND.mastheadTitle}</Link>
+          </h1>
+          <div className="presentation-header__meta">
+            <span className="presentation-header__subtitle">{SITE_BRAND.mastheadSubtitle}</span>
+          </div>
+          {tagline ? <span className="presentation-header__tagline">{tagline}</span> : null}
+        </div>
+      </header>
+      {stream.sections.length > 1 ? (
+        <nav className="presentation-section-nav" aria-label="Sections">
+          <Link href={homePath} aria-current={stream.activeSectionKey === null ? "page" : undefined}>
+            All
+          </Link>
+          {stream.sections.map((section) => (
+            <Link
+              aria-current={stream.activeSectionKey === section.key ? "page" : undefined}
+              href={`${homePath}?section=${encodeURIComponent(section.key)}`}
+              key={section.key}
+            >
+              {section.label}
+            </Link>
+          ))}
+        </nav>
+      ) : null}
+      {stream.items.length === 0 ? (
+        <section className="item-stream-empty" data-item-stream-empty="true">
+          <p>Nothing published yet</p>
+        </section>
+      ) : (
+        <div className="blog-sections">
+          {stream.items.map((item) => (
+            <article className="presentation-item presentation-item--blog" data-item-id={item.slug} key={item.slug}>
+              <div className="presentation-item__copy">
+                <header className="presentation-item__header">
+                  <p>{item.section ?? "General"}</p>
+                  <h2>
+                    <Link href={toPublicReaderPath(`/articles/${encodeURIComponent(item.slug)}`)}>{item.headline}</Link>
+                  </h2>
+                  {item.deck ? <span>{item.deck}</span> : null}
+                </header>
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}

package/components/markus-ir-preview.tsx

@@ -21,6 +21,8 @@ type PreviewContext = {
   sidecar: PreviewSidecar;
   citationNumbers: Map<string, number>;
   imageUrls: Record<string, string>;
+  dynamicDirectives: Record<string, (attributes: Record<string, unknown>) => ReactNode>;
+  renderLink?: (href: string, children: ReactNode) => ReactNode | null;
 };
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -62,7 +64,7 @@ function imagePlaceholder(token: string, context: PreviewContext): ReactNode {
       // eslint-disable-next-line @next/next/no-img-element
       <img
         alt={alt}
-        className="my-3 h-auto max-w-full rounded-lg"
+        className="my-3 h-auto max-w-full"
         data-markus-preview-image-loaded
         loading="lazy"
         src={url}
@@ -112,7 +114,9 @@ function renderInlines(inlines: MarkusInline[], context: PreviewContext): ReactN
         return <s key={index}>{renderInlines(node.children, context)}</s>;
       case "code_span":
         return <code className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]" key={index}>{node.code}</code>;
-      case "link":
+      case "link": {
+        const custom = node.href ? context.renderLink?.(node.href, renderInlines(node.children, context)) : null;
+        if (custom) return <span key={index}>{custom}</span>;
         return node.href ? (
           <a className="text-primary underline" href={node.href} key={index} rel="noopener noreferrer" target="_blank">
             {renderInlines(node.children, context)}
@@ -120,6 +124,7 @@ function renderInlines(inlines: MarkusInline[], context: PreviewContext): ReactN
         ) : (
           <span key={index}>{renderInlines(node.children, context)}</span>
         );
+      }
       case "image":
         return (
           <span className="rounded border border-dashed border-border px-1 text-xs text-muted-foreground" key={index}>
@@ -228,6 +233,36 @@ function renderBlock(block: MarkusBlock, index: number, context: PreviewContext)
   }
 }
 
+function normalizedFigureSource(src: string): string {
+  return src.replace(/^(\.\.?\/)+/, "");
+}
+
+function renderFigure(directive: MarkusDirective, index: number, context: PreviewContext): ReactNode {
+  const attribute = (name: string) => typeof directive.attributes[name] === "string" ? String(directive.attributes[name]) : "";
+  const src = attribute("src");
+  const alt = attribute("alt");
+  const caption = attribute("caption");
+  const credit = attribute("credit");
+  const url = context.imageUrls[src] ?? context.imageUrls[normalizedFigureSource(src)];
+  return (
+    <figure className="my-4" data-markus-preview-directive="figure" key={index}>
+      {url ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img alt={alt} className="h-auto max-w-full" data-markus-preview-image-loaded loading="lazy" src={url} />
+      ) : (
+        <div className="border border-dashed border-border bg-muted/30 px-3 py-6 text-center text-xs text-muted-foreground" data-markus-preview-image>
+          {`Figure: ${src}${alt ? ` (${alt})` : ""}`}
+        </div>
+      )}
+      {caption || credit ? (
+        <figcaption className="mt-1 text-sm text-muted-foreground">
+          {caption}{caption && credit ? " " : ""}{credit ? <span className="text-xs">{credit}</span> : null}
+        </figcaption>
+      ) : null}
+    </figure>
+  );
+}
+
 function renderDirective(directive: MarkusDirective, index: number, context: PreviewContext): ReactNode {
   if (directive.name === "pull-quote") {
     const attribution = directive.attributes.attribution;
@@ -244,6 +279,9 @@ function renderDirective(directive: MarkusDirective, index: number, context: Pre
       </blockquote>
     );
   }
+  if (directive.name === "figure") return renderFigure(directive, index, context);
+  const dynamicRenderer = context.dynamicDirectives[directive.name];
+  if (dynamicRenderer) return <div data-markus-preview-directive={directive.name} key={index}>{dynamicRenderer(directive.attributes)}</div>;
   const attributeEntries = Object.entries(directive.attributes).filter(([, value]) => value !== null && value !== "");
   return (
     <section
@@ -275,9 +313,14 @@ function renderBlocks(nodes: MarkusNode[], context: PreviewContext): ReactNode[]
 export function MarkusIrPreview({
   bodyIr,
   imageUrls = {},
+  dynamicDirectives = {},
+  renderLink,
 }: {
   bodyIr: unknown;
   imageUrls?: Record<string, string>;
+  /** Live components for leaf directives whose content the host app computes, keyed by directive name. */
+  dynamicDirectives?: PreviewContext["dynamicDirectives"];
+  renderLink?: PreviewContext["renderLink"];
 }) {
   try {
     const envelope = typeof bodyIr === "string" ? JSON.parse(bodyIr) : bodyIr;
@@ -288,6 +331,8 @@ export function MarkusIrPreview({
       sidecar,
       citationNumbers: numberCitationsByFirstAppearance(envelope.document, sidecar),
       imageUrls,
+      dynamicDirectives,
+      renderLink,
     };
     return <div data-markus-preview>{renderBlocks(document.children, context)}</div>;
   } catch (error) {