@anthusai/papyrus 1.0.0-next.5 → 1.0.0-next.7

package/amplify/data/resource.js

@@ -493,6 +493,12 @@ const schema = a.schema({
         .returns(a.json())
         .authorization((allow) => [allow.groups(contentWriteGroups)])
         .handler(a.handler.function(contentActions)),
+    requestStagingBuild: a
+        .mutation()
+        .arguments({ input: a.json().required() })
+        .returns(a.json())
+        .authorization((allow) => [allow.groups(contentWriteGroups)])
+        .handler(a.handler.function(contentActions)),
     knowledgeQuery: a
         .query()
         .arguments({

package/amplify/data/resource.ts

@@ -537,6 +537,13 @@ const schema = a.schema({
     .authorization((allow) => [allow.groups(contentWriteGroups)])
     .handler(a.handler.function(contentActions)),
 
+  requestStagingBuild: a
+    .mutation()
+    .arguments({ input: a.json().required() })
+    .returns(a.json())
+    .authorization((allow) => [allow.groups(contentWriteGroups)])
+    .handler(a.handler.function(contentActions)),
+
   knowledgeQuery: a
     .query()
     .arguments({

package/amplify/data/schema.js

@@ -393,6 +393,12 @@ export const schema = a.schema({
         .returns(a.json())
         .authorization((allow) => [allow.groups(contentWriteGroups)])
         .handler(a.handler.function(contentActions)),
+    requestStagingBuild: a
+        .mutation()
+        .arguments({ input: a.json().required() })
+        .returns(a.json())
+        .authorization((allow) => [allow.groups(contentWriteGroups)])
+        .handler(a.handler.function(contentActions)),
     knowledgeQuery: a
         .query()
         .arguments({

package/amplify/data/schema.ts

@@ -431,6 +431,13 @@ export const schema = a.schema({
     .authorization((allow) => [allow.groups(contentWriteGroups)])
     .handler(a.handler.function(contentActions)),
 
+  requestStagingBuild: a
+    .mutation()
+    .arguments({ input: a.json().required() })
+    .returns(a.json())
+    .authorization((allow) => [allow.groups(contentWriteGroups)])
+    .handler(a.handler.function(contentActions)),
+
   knowledgeQuery: a
     .query()
     .arguments({

package/amplify/functions/content-actions/handler.py

@@ -1,10 +1,18 @@
 from __future__ import annotations
 
 import json
+import os
 from typing import Any
 
 from papyrus_content.graphql_authoring import create_authoring_client
 from papyrus_content.markus_renderer.derive import derive_body
+from papyrus_content.rebuild_trigger import (
+    DEFAULT_STAGING_BRANCH,
+    reader_target_from_environment,
+    trigger_pretext_revalidation,
+    trigger_rebuild,
+    trigger_staging_build,
+)
 from papyrus_content.publishing import (
     ItemFields,
     PublishError,
@@ -72,21 +80,53 @@ def save_item_draft_action(arguments: dict, actor: str) -> dict:
     }
 
 
+def site_triggers_for(client, item_id: str) -> dict:
+    triggers: dict = {}
+    reader_app_id, reader_branch = reader_target_from_environment()
+    revalidate_base_url = (os.environ.get("PAPYRUS_REVALIDATE_BASE_URL") or "").strip()
+    if revalidate_base_url:
+        try:
+            item = client.get_record("Item", item_id) or {}
+            slugs = [item["slug"]] if item.get("slug") else []
+            revalidated = trigger_pretext_revalidation(slugs, None, base_url=revalidate_base_url)
+            triggers["revalidated"] = revalidated if revalidated is not None else {"ok": False, "reason": "not-configured"}
+        except Exception as error:  # noqa: BLE001 - a trigger failure never fails the publish
+            triggers["revalidated"] = {"ok": False, "error": f"{type(error).__name__}: {error}"}
+    if reader_app_id:
+        triggers["rebuild"] = trigger_rebuild(reader_app_id=reader_app_id, reader_branch=reader_branch)
+    return triggers
+
+
 def publish_item_action(arguments: dict, actor: str) -> dict:
     client, _claims = create_authoring_client()
     result = publish_item(client, arguments["id"], actor=actor)
-    return {
+    response = {
         "ok": True,
         "changed": result.changed,
         "publishedId": result.published_item_id,
         "versionNumber": result.version_number,
     }
+    if result.changed:
+        response.update(site_triggers_for(client, arguments["id"]))
+    return response
 
 
 def unpublish_item_action(arguments: dict, actor: str) -> dict:
     client, _claims = create_authoring_client()
     result = unpublish_item(client, arguments["id"], actor=actor)
-    return {"ok": True, "changed": result.changed}
+    response = {"ok": True, "changed": result.changed}
+    if result.changed:
+        response.update(site_triggers_for(client, arguments["id"]))
+    return response
+
+
+def request_staging_build_action() -> dict:
+    cms_app_id = (os.environ.get("PAPYRUS_CMS_AMPLIFY_APP_ID") or "").strip()
+    if not cms_app_id:
+        return {"ok": False, "errors": [{"code": "staging-build-not-configured", "message": "This site has no staging build configured.", "line": None}]}
+    staging_branch = (os.environ.get("PAPYRUS_STAGING_BRANCH") or "").strip() or DEFAULT_STAGING_BRANCH
+    build = trigger_staging_build(cms_app_id=cms_app_id, staging_branch=staging_branch)
+    return {"ok": True, "build": build}
 
 
 def handler(event, context):
@@ -102,6 +142,8 @@ def handler(event, context):
             return publish_item_action(arguments, actor)
         if field == "unpublishItem":
             return unpublish_item_action(arguments, actor)
+        if field == "requestStagingBuild":
+            return request_staging_build_action()
     except PublishError as error:
         return failure_response(error)
     raise ValueError(f"Unsupported field {field}")

package/amplify/rebuild-trigger-settings.js

@@ -0,0 +1,22 @@
+export const REBUILD_TRIGGER_ACTIONS = ["amplify:StartJob", "amplify:ListJobs"];
+function branchJobsArn(input, appId, branch) {
+    return `arn:aws:amplify:${input.region}:${input.account}:apps/${appId}/branches/${branch}/jobs/*`;
+}
+export function rebuildTriggerSettings(input) {
+    const environment = {};
+    const resources = [];
+    const readerAppId = (input.reader?.amplifyAppId ?? "").trim();
+    if (readerAppId !== "") {
+        const readerBranch = (input.reader?.branchName ?? "").trim() || "main";
+        environment.PAPYRUS_READER_AMPLIFY_APP_ID = readerAppId;
+        environment.PAPYRUS_READER_BRANCH = readerBranch;
+        resources.push(branchJobsArn(input, readerAppId, readerBranch));
+    }
+    const cmsAppId = input.cmsAppId.trim();
+    if (input.stagingBuildEnabled && cmsAppId !== "") {
+        environment.PAPYRUS_CMS_AMPLIFY_APP_ID = cmsAppId;
+        environment.PAPYRUS_STAGING_BRANCH = "staging";
+        resources.push(branchJobsArn(input, cmsAppId, "staging"));
+    }
+    return { environment, actions: REBUILD_TRIGGER_ACTIONS, resources };
+}

package/amplify/rebuild-trigger-settings.ts

@@ -0,0 +1,42 @@
+/**
+ * Environment and IAM policy for the content-actions Lambda's site triggers.
+ * Pure (no CDK imports) so the policy can be tested without synthesizing.
+ */
+export type RebuildTriggerInput = {
+  reader?: { amplifyAppId: string; branchName?: string };
+  stagingBuildEnabled: boolean;
+  cmsAppId: string;
+  region: string;
+  account: string;
+};
+
+export type RebuildTriggerSettings = {
+  environment: Record<string, string>;
+  actions: string[];
+  resources: string[];
+};
+
+export const REBUILD_TRIGGER_ACTIONS = ["amplify:StartJob", "amplify:ListJobs"];
+
+function branchJobsArn(input: RebuildTriggerInput, appId: string, branch: string): string {
+  return `arn:aws:amplify:${input.region}:${input.account}:apps/${appId}/branches/${branch}/jobs/*`;
+}
+
+export function rebuildTriggerSettings(input: RebuildTriggerInput): RebuildTriggerSettings {
+  const environment: Record<string, string> = {};
+  const resources: string[] = [];
+  const readerAppId = (input.reader?.amplifyAppId ?? "").trim();
+  if (readerAppId !== "") {
+    const readerBranch = (input.reader?.branchName ?? "").trim() || "main";
+    environment.PAPYRUS_READER_AMPLIFY_APP_ID = readerAppId;
+    environment.PAPYRUS_READER_BRANCH = readerBranch;
+    resources.push(branchJobsArn(input, readerAppId, readerBranch));
+  }
+  const cmsAppId = input.cmsAppId.trim();
+  if (input.stagingBuildEnabled && cmsAppId !== "") {
+    environment.PAPYRUS_CMS_AMPLIFY_APP_ID = cmsAppId;
+    environment.PAPYRUS_STAGING_BRANCH = "staging";
+    resources.push(branchJobsArn(input, cmsAppId, "staging"));
+  }
+  return { environment, actions: REBUILD_TRIGGER_ACTIONS, resources };
+}

package/amplify/site-backend-config.ts

@@ -21,6 +21,12 @@ export type PapyrusSiteBackendConfig = {
    */
   productionAppId?: string;
   auth?: PapyrusAuthConfig;
+  /** Static reader app (Markus-static sites) that a publish rebuilds through IAM `amplify:StartJob`. */
+  reader?: { amplifyAppId: string; branchName?: string };
+  /** Lets the newsroom start the `staging` branch build of this CMS app. */
+  stagingBuild?: { enabled: boolean };
+  /** Base URL of a Pretext reader whose `/api/revalidate` a publish calls (secret `PAPYRUS_REVALIDATE_SECRET`). */
+  revalidateBaseUrl?: string;
   features?: {
     consoleResponder?: boolean;
     inboundEmail?: boolean;

package/amplify/site-backend.js

@@ -12,6 +12,7 @@ import { CfnEventSourceMapping, FunctionUrlAuthType } from "aws-cdk-lib/aws-lamb
 import { CfnIndex, CfnVectorBucket, CfnVectorBucketPolicy } from "aws-cdk-lib/aws-s3vectors";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { rebuildTriggerSettings } from "./rebuild-trigger-settings.js";
 import { authConfigFromEnv, defineSiteAuth } from "./auth/resource.js";
 import { data } from "./data/resource.js";
 import { assignmentAction } from "./functions/assignment-action/resource.js";
@@ -333,6 +334,23 @@ export function defineSiteBackend(papyrusSite) {
         actions: ["appsync:GraphQL"],
         resources: ["*"],
     }));
+    const rebuildSettings = rebuildTriggerSettings({
+        reader: site.reader,
+        stagingBuildEnabled: site.stagingBuild?.enabled === true,
+        cmsAppId: amplifyAppId,
+        region: Stack.of(contentActionsLambda).region,
+        account: Stack.of(contentActionsLambda).account,
+    });
+    for (const [name, value] of Object.entries(rebuildSettings.environment)) {
+        contentActionsLambda.addEnvironment(name, value);
+    }
+    if (rebuildSettings.resources.length > 0) {
+        contentActionsLambda.addToRolePolicy(new PolicyStatement({ actions: rebuildSettings.actions, resources: rebuildSettings.resources }));
+    }
+    if ((site.revalidateBaseUrl ?? "").trim() !== "") {
+        backend.contentActions.addEnvironment("PAPYRUS_REVALIDATE_BASE_URL", (site.revalidateBaseUrl ?? "").trim());
+        backend.contentActions.addEnvironment("PAPYRUS_REVALIDATE_SECRET", secret("PAPYRUS_REVALIDATE_SECRET"));
+    }
     grantNewsroomReadWriteDelete(backend.modelAttachmentUpload.resources.lambda);
     grantMediaReadWriteDelete(backend.modelAttachmentUpload.resources.lambda);
     if (backend.sesInboundReceive) {

package/amplify/site-backend.ts

@@ -13,6 +13,7 @@ import * as s3 from "aws-cdk-lib/aws-s3";
 import { CfnIndex, CfnVectorBucket, CfnVectorBucketPolicy } from "aws-cdk-lib/aws-s3vectors";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { rebuildTriggerSettings } from "./rebuild-trigger-settings";
 import { authConfigFromEnv, defineSiteAuth } from "./auth/resource";
 import { data } from "./data/resource";
 import { assignmentAction } from "./functions/assignment-action/resource";
@@ -414,6 +415,25 @@ export function defineSiteBackend(papyrusSite: PapyrusSite) {
       resources: ["*"],
     }),
   );
+  const rebuildSettings = rebuildTriggerSettings({
+    reader: site.reader,
+    stagingBuildEnabled: site.stagingBuild?.enabled === true,
+    cmsAppId: amplifyAppId,
+    region: Stack.of(contentActionsLambda).region,
+    account: Stack.of(contentActionsLambda).account,
+  });
+  for (const [name, value] of Object.entries(rebuildSettings.environment)) {
+    contentActionsLambda.addEnvironment(name, value);
+  }
+  if (rebuildSettings.resources.length > 0) {
+    contentActionsLambda.addToRolePolicy(
+      new PolicyStatement({ actions: rebuildSettings.actions, resources: rebuildSettings.resources }),
+    );
+  }
+  if ((site.revalidateBaseUrl ?? "").trim() !== "") {
+    backend.contentActions.addEnvironment("PAPYRUS_REVALIDATE_BASE_URL", (site.revalidateBaseUrl ?? "").trim());
+    backend.contentActions.addEnvironment("PAPYRUS_REVALIDATE_SECRET", secret("PAPYRUS_REVALIDATE_SECRET"));
+  }
   grantNewsroomReadWriteDelete(backend.modelAttachmentUpload.resources.lambda as LambdaFunction);
   grantMediaReadWriteDelete(backend.modelAttachmentUpload.resources.lambda as LambdaFunction);
   if (backend.sesInboundReceive) {

package/app/newsroom/articles/[id]/page.tsx

@@ -0,0 +1,15 @@
+import { NewsroomArticleEditor } from "../../../../components/newsroom-article-editor";
+
+export const dynamic = "force-dynamic";
+
+type NewsroomArticleEditorPageProps = {
+  params: Promise<{ id: string }>;
+  searchParams?: Promise<{ demo?: string | string[] }>;
+};
+
+export default async function NewsroomArticleEditorPage({ params, searchParams }: NewsroomArticleEditorPageProps) {
+  const { id } = await params;
+  const resolved = await searchParams;
+  const demoValue = Array.isArray(resolved?.demo) ? resolved?.demo[0] : resolved?.demo;
+  return <NewsroomArticleEditor articleId={decodeURIComponent(id)} demo={demoValue === "1"} />;
+}

package/app/newsroom/articles/page.tsx

@@ -0,0 +1,13 @@
+import { NewsroomArticlesView } from "../../../components/newsroom-articles-view";
+
+export const dynamic = "force-dynamic";
+
+type NewsroomArticlesPageProps = {
+  searchParams?: Promise<{ demo?: string | string[] }>;
+};
+
+export default async function NewsroomArticlesPage({ searchParams }: NewsroomArticlesPageProps) {
+  const resolved = await searchParams;
+  const demoValue = Array.isArray(resolved?.demo) ? resolved?.demo[0] : resolved?.demo;
+  return <NewsroomArticlesView demo={demoValue === "1"} />;
+}

package/components/markus-ir-preview.tsx

@@ -0,0 +1,300 @@
+import type { ReactNode } from "react";
+import {
+  parseMarkusDocument,
+  type MarkusBlock,
+  type MarkusDirective,
+  type MarkusInline,
+  type MarkusNode,
+} from "../lib/markus-ir";
+
+const TOKEN_PATTERN = /PAPYRUSMARKUP\d{5}END/g;
+const WHOLE_TOKEN_PATTERN = /^PAPYRUSMARKUP\d{5}END$/;
+
+type PreviewSidecar = {
+  images: Record<string, Record<string, unknown>>;
+  citations: Record<string, string[]>;
+  citationLists: Record<string, unknown>;
+  bibliography: string[];
+};
+
+type PreviewContext = {
+  sidecar: PreviewSidecar;
+  citationNumbers: Map<string, number>;
+  imageUrls: Record<string, string>;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function readSidecar(envelope: Record<string, unknown>): PreviewSidecar {
+  const sidecar = envelope.papyrus;
+  if (!isRecord(sidecar)) throw new Error("bodyIr.papyrus is missing");
+  const { images, citations, citationLists, bibliography } = sidecar;
+  if (!isRecord(images) || !isRecord(citations) || !isRecord(citationLists) || !Array.isArray(bibliography)) {
+    throw new Error("bodyIr.papyrus must contain images, citations, citationLists and bibliography");
+  }
+  return {
+    images: images as PreviewSidecar["images"],
+    citations: citations as PreviewSidecar["citations"],
+    citationLists,
+    bibliography: bibliography.map(String),
+  };
+}
+
+function numberCitationsByFirstAppearance(document: unknown, sidecar: PreviewSidecar): Map<string, number> {
+  const numbers = new Map<string, number>();
+  for (const token of JSON.stringify(document).match(TOKEN_PATTERN) ?? []) {
+    for (const key of sidecar.citations[token] ?? []) {
+      if (!numbers.has(key)) numbers.set(key, numbers.size + 1);
+    }
+  }
+  return numbers;
+}
+
+function imagePlaceholder(token: string, context: PreviewContext): ReactNode {
+  const entry = context.sidecar.images[token];
+  const src = typeof entry?.src === "string" ? entry.src : "";
+  const alt = typeof entry?.alt === "string" ? entry.alt : "";
+  const url = context.imageUrls[src];
+  if (url) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        alt={alt}
+        className="my-3 h-auto max-w-full rounded-lg"
+        data-markus-preview-image-loaded
+        loading="lazy"
+        src={url}
+      />
+    );
+  }
+  return (
+    <div
+      className="my-3 rounded-lg border border-dashed border-border bg-muted/30 px-3 py-6 text-center text-xs text-muted-foreground"
+      data-markus-preview-image
+    >
+      {`Image: ${src} (${alt})`}
+    </div>
+  );
+}
+
+function renderText(text: string, context: PreviewContext): ReactNode {
+  const parts: ReactNode[] = [];
+  let cursor = 0;
+  for (const match of text.matchAll(TOKEN_PATTERN)) {
+    const token = match[0];
+    const index = match.index ?? 0;
+    const keys = context.sidecar.citations[token];
+    if (!keys) continue;
+    if (index > cursor) parts.push(text.slice(cursor, index));
+    parts.push(
+      <sup className="text-primary" key={`${index}-${token}`}>
+        {keys.map((key) => `[${context.citationNumbers.get(key)}]`).join("")}
+      </sup>,
+    );
+    cursor = index + token.length;
+  }
+  if (cursor < text.length) parts.push(text.slice(cursor));
+  return parts;
+}
+
+function renderInlines(inlines: MarkusInline[], context: PreviewContext): ReactNode[] {
+  return inlines.map((node, index) => {
+    switch (node.type) {
+      case "text":
+        return <span key={index}>{renderText(node.text, context)}</span>;
+      case "emphasis":
+        return <em key={index}>{renderInlines(node.children, context)}</em>;
+      case "strong":
+        return <strong key={index}>{renderInlines(node.children, context)}</strong>;
+      case "strikethrough":
+        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":
+        return node.href ? (
+          <a className="text-primary underline" href={node.href} key={index} rel="noopener noreferrer" target="_blank">
+            {renderInlines(node.children, context)}
+          </a>
+        ) : (
+          <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}>
+            {`Image: ${node.src ?? ""} (${node.alt})`}
+          </span>
+        );
+      case "soft_break":
+        return <span key={index}>{" "}</span>;
+      case "hard_break":
+        return <br key={index} />;
+      case "html_inline":
+        return <code className="font-mono text-xs" key={index}>{node.value}</code>;
+    }
+  });
+}
+
+function soleToken(inlines: MarkusInline[]): string | null {
+  if (inlines.length !== 1 || inlines[0].type !== "text") return null;
+  const text = inlines[0].text.trim();
+  return WHOLE_TOKEN_PATTERN.test(text) ? text : null;
+}
+
+const HEADING_CLASSES = [
+  "mt-5 mb-2 text-2xl font-semibold tracking-tight",
+  "mt-5 mb-2 text-xl font-semibold tracking-tight",
+  "mt-4 mb-2 text-lg font-semibold",
+  "mt-4 mb-1 text-base font-semibold",
+  "mt-3 mb-1 text-sm font-semibold",
+  "mt-3 mb-1 text-sm font-medium",
+];
+
+function renderBlock(block: MarkusBlock, index: number, context: PreviewContext): ReactNode {
+  switch (block.type) {
+    case "paragraph": {
+      const token = soleToken(block.inline);
+      if (token && token in context.sidecar.images) return <div key={index}>{imagePlaceholder(token, context)}</div>;
+      if (token && token in context.sidecar.citationLists) {
+        return (
+          <ol className="my-3 list-decimal space-y-1 pl-6 text-sm" data-markus-preview-bibliography key={index}>
+            {context.sidecar.bibliography.map((entry, entryIndex) => (
+              <li key={entryIndex}>{entry}</li>
+            ))}
+          </ol>
+        );
+      }
+      return <p className="my-3 leading-relaxed" key={index}>{renderInlines(block.inline, context)}</p>;
+    }
+    case "heading": {
+      const level = Math.min(Math.max(block.level, 1), 6);
+      const Tag = `h${level}` as "h1";
+      return <Tag className={HEADING_CLASSES[level - 1]} key={index}>{renderInlines(block.inline, context)}</Tag>;
+    }
+    case "list": {
+      const items = block.items.map((item, itemIndex) => (
+        <li key={itemIndex}>{renderBlocks(item.children, context)}</li>
+      ));
+      return block.ordered ? (
+        <ol className="my-3 list-decimal space-y-1 pl-6" key={index} start={block.start ?? undefined}>{items}</ol>
+      ) : (
+        <ul className="my-3 list-disc space-y-1 pl-6" key={index}>{items}</ul>
+      );
+    }
+    case "blockquote":
+      return (
+        <blockquote className="my-3 border-l-4 border-border pl-4 italic text-muted-foreground" key={index}>
+          {renderBlocks(block.children, context)}
+        </blockquote>
+      );
+    case "code":
+      return (
+        <pre className="my-3 overflow-x-auto rounded-lg bg-muted p-3 font-mono text-xs" key={index}>
+          <code>{block.value}</code>
+        </pre>
+      );
+    case "thematic_break":
+      return <hr className="my-4 border-border" key={index} />;
+    case "table":
+      return (
+        <div className="my-3 overflow-x-auto" key={index}>
+          <table className="w-full border-collapse text-sm">
+            <thead>
+              <tr>
+                {block.header.map((cell, cellIndex) => (
+                  <th className="border border-border bg-muted/40 px-2 py-1 text-left" key={cellIndex}>
+                    {renderInlines(cell, context)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {block.rows.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                  {row.map((cell, cellIndex) => (
+                    <td className="border border-border px-2 py-1" key={cellIndex}>{renderInlines(cell, context)}</td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      );
+    case "html":
+      return (
+        <pre className="my-3 overflow-x-auto rounded-lg bg-muted p-3 font-mono text-xs" key={index}>{block.value}</pre>
+      );
+  }
+}
+
+function renderDirective(directive: MarkusDirective, index: number, context: PreviewContext): ReactNode {
+  if (directive.name === "pull-quote") {
+    const attribution = directive.attributes.attribution;
+    return (
+      <blockquote
+        className="my-4 border-y border-border px-4 py-3 text-lg font-medium italic"
+        data-markus-preview-directive="pull-quote"
+        key={index}
+      >
+        {renderBlocks(directive.children, context)}
+        {typeof attribution === "string" && attribution ? (
+          <footer className="mt-1 text-sm not-italic text-muted-foreground">{`— ${attribution}`}</footer>
+        ) : null}
+      </blockquote>
+    );
+  }
+  const attributeEntries = Object.entries(directive.attributes).filter(([, value]) => value !== null && value !== "");
+  return (
+    <section
+      className="my-3 rounded-lg border border-border"
+      data-markus-preview-directive={directive.name}
+      key={index}
+    >
+      <header className="border-b border-border bg-muted/40 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+        {directive.name}
+      </header>
+      <div className="px-3 py-1">
+        {directive.leaf && attributeEntries.length > 0 ? (
+          <p className="my-2 font-mono text-xs text-muted-foreground">
+            {attributeEntries.map(([key, value]) => `${key}=${String(value)}`).join(" ")}
+          </p>
+        ) : null}
+        {renderBlocks(directive.children, context)}
+      </div>
+    </section>
+  );
+}
+
+function renderBlocks(nodes: MarkusNode[], context: PreviewContext): ReactNode[] {
+  return nodes.map((node, index) =>
+    node.type === "directive" ? renderDirective(node, index, context) : renderBlock(node, index, context),
+  );
+}
+
+export function MarkusIrPreview({
+  bodyIr,
+  imageUrls = {},
+}: {
+  bodyIr: unknown;
+  imageUrls?: Record<string, string>;
+}) {
+  try {
+    const envelope = typeof bodyIr === "string" ? JSON.parse(bodyIr) : bodyIr;
+    if (!isRecord(envelope)) throw new Error("bodyIr must be a JSON object");
+    const document = parseMarkusDocument(envelope.document);
+    const sidecar = readSidecar(envelope);
+    const context: PreviewContext = {
+      sidecar,
+      citationNumbers: numberCitationsByFirstAppearance(envelope.document, sidecar),
+      imageUrls,
+    };
+    return <div data-markus-preview>{renderBlocks(document.children, context)}</div>;
+  } catch (error) {
+    return (
+      <p className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive" data-markus-preview-error role="alert">
+        {`The preview could not be rendered: ${error instanceof Error ? error.message : "unknown error"}`}
+      </p>
+    );
+  }
+}