@anthusai/papyrus 1.0.0-next.3 → 1.0.0-next.30

package/components/archive-shell.tsx

@@ -1,27 +1,14 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { useEffect, useState } from "react";
+import { useRhythmOverlay } from "./use-rhythm-overlay";
 
 type ArchiveShellProps = {
   children: ReactNode;
 };
 
 export function ArchiveShell({ children }: ArchiveShellProps) {
-  const [showRhythmOverlay, setShowRhythmOverlay] = useState(false);
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (isEditableEventTarget(event.target)) return;
-      if ((event.key === "=" || event.code === "Equal") && event.ctrlKey && !event.metaKey && !event.altKey) {
-        event.preventDefault();
-        setShowRhythmOverlay((current) => !current);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, []);
+  const showRhythmOverlay = useRhythmOverlay();
 
   return (
     <main
@@ -32,10 +19,3 @@ export function ArchiveShell({ children }: ArchiveShellProps) {
     </main>
   );
 }
-
-function isEditableEventTarget(target: EventTarget | null): boolean {
-  if (!(target instanceof HTMLElement)) return false;
-  const tagName = target.tagName.toLowerCase();
-  if (tagName === "input" || tagName === "textarea" || tagName === "select") return true;
-  return target.isContentEditable || target.closest("[contenteditable='true']") !== null;
-}

package/components/article-video.tsx

@@ -1,31 +1,232 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import { Pause, Play } from "lucide-react";
 import type { ArticleVideoAsset } from "../lib/articles";
 import { resolveThemedVideoSrc } from "../lib/themed-image";
 import { useResolvedPapyrusTheme } from "./use-resolved-papyrus-theme";
+import { getSiteBrand } from "../lib/site-brand";
+import { normalizeDevPreviewDsl, type VideoScriptRef } from "../lib/video-script";
+import { resolveVideoMode, resolveVideoModeFromEnv, type VideoMode } from "../lib/video-mode";
 
 type ArticleVideoFigureProps = {
   video: ArticleVideoAsset;
   slug: string;
   figureClassName?: string;
   priority?: boolean;
+  videoScript?: VideoScriptRef | null;
 };
 
-export function ArticleVideoFigure({ video, slug, figureClassName = "article-photo article-video" }: ArticleVideoFigureProps) {
+const PREVIEW_STORAGE_PREFIX = "papyrus-video-preview:";
+
+export function ArticleVideoFigure({
+  video,
+  slug,
+  figureClassName = "article-photo article-video",
+  videoScript = null,
+}: ArticleVideoFigureProps) {
   const theme = useResolvedPapyrusTheme();
   const [hasHydrated, setHasHydrated] = useState(false);
+  const [videoMode, setVideoMode] = useState<VideoMode>(() => resolveVideoModeFromEnv());
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [previewReady, setPreviewReady] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const isFramed = getSiteBrand().videoPlayer === "framed";
 
   useEffect(() => {
     setHasHydrated(true);
+    setVideoMode(resolveVideoMode());
   }, []);
 
   // Match SSR to the default dark MP4 in `video.src` until after hydration.
   const resolvedTheme = hasHydrated ? theme : "dark";
   const src = resolveThemedVideoSrc(video.src, video.themeVariants, resolvedTheme);
+  const usePreview = videoMode === "preview" && Boolean(videoScript?.dsl);
+  const previewDsl = videoScript?.dsl
+    ? normalizeDevPreviewDsl(videoScript.dsl, getSiteBrand().video?.sceneComponents)
+    : null;
+  const previewSrc = `/videoml/preview.html?target=${encodeURIComponent(slug)}&theme=${resolvedTheme}${
+    src ? `&audio=${encodeURIComponent(src)}` : ""
+  }`;
+
+  if (usePreview && previewDsl && typeof window !== "undefined") {
+    sessionStorage.setItem(`${PREVIEW_STORAGE_PREFIX}${slug}`, previewDsl);
+  }
+
+  useEffect(() => {
+    setPreviewReady(false);
+    setIsPlaying(false);
+    setCurrentTime(0);
+    setDuration(0);
+  }, [previewSrc, usePreview]);
+
+  useEffect(() => {
+    if (!usePreview || !previewReady) return;
+    iframeRef.current?.contentWindow?.postMessage(
+      { kind: "papyrus-video-refresh", target: slug, theme: resolvedTheme, audio: src || undefined },
+      "*",
+    );
+  }, [previewReady, resolvedTheme, slug, src, usePreview]);
+
+  useEffect(() => {
+    if (!usePreview) return;
+    const onMessage = (event: MessageEvent) => {
+      const payload = event.data;
+      if (!payload || typeof payload !== "object" || payload.kind !== "papyrus-video-time") return;
+      if (typeof payload.currentTime === "number") setCurrentTime(payload.currentTime);
+      if (typeof payload.duration === "number") setDuration(payload.duration);
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [usePreview]);
+
+  const togglePreviewPlayback = useCallback(() => {
+    iframeRef.current?.contentWindow?.postMessage({ kind: isPlaying ? "papyrus-video-pause" : "papyrus-video-play" }, "*");
+    setIsPlaying(!isPlaying);
+  }, [isPlaying]);
+
+  const seekPreview = useCallback((nextTime: number) => {
+    const clamped = Math.max(0, Number.isFinite(nextTime) ? nextTime : 0);
+    iframeRef.current?.contentWindow?.postMessage({ kind: "papyrus-video-seek", time: clamped }, "*");
+    setCurrentTime(clamped);
+  }, []);
+
+  const toggleNativePlayback = useCallback(() => {
+    const element = videoRef.current;
+    if (!element) return;
+    if (element.paused) void element.play().catch(() => setIsPlaying(false));
+    else element.pause();
+  }, []);
+
+  const seekNative = useCallback((nextTime: number) => {
+    const element = videoRef.current;
+    if (!element) return;
+    element.currentTime = Math.max(0, Number.isFinite(nextTime) ? nextTime : 0);
+    setCurrentTime(element.currentTime);
+  }, []);
+
+  const framedControls = (
+    <FramedVideoControls
+      currentTime={currentTime}
+      duration={duration}
+      isPlaying={isPlaying}
+      onSeek={usePreview ? seekPreview : seekNative}
+      onToggle={usePreview ? togglePreviewPlayback : toggleNativePlayback}
+    />
+  );
+
+  if (isFramed && usePreview) {
+    return (
+      <figure
+        className={`${figureClassName} article-video--framed article-video--preview`}
+        data-media-type="videoml-preview"
+        data-video-theme={resolvedTheme}
+        data-video-mode={videoMode}
+      >
+        <div className="article-video__media">
+          {hasHydrated ? (
+            <iframe
+              key={`${slug}-${resolvedTheme}-${src}`}
+              ref={iframeRef}
+              className="article-video__preview-frame"
+              src={previewSrc}
+              title={video.alt}
+              onLoad={() => setPreviewReady(true)}
+            />
+          ) : null}
+        </div>
+        {framedControls}
+        <span className="sr-only" data-video-slug={slug}>
+          {video.alt}
+        </span>
+      </figure>
+    );
+  }
+
+  if (usePreview) {
+    return (
+      <figure
+        className={`${figureClassName} article-video--preview`}
+        data-media-type="videoml-preview"
+        data-video-theme={resolvedTheme}
+        data-video-mode={videoMode}
+      >
+        {hasHydrated ? (
+          <iframe
+            key={`${slug}-${resolvedTheme}-${src}`}
+            ref={iframeRef}
+            className="article-video__preview-frame"
+            src={previewSrc}
+            title={video.alt}
+            onLoad={() => setPreviewReady(true)}
+          />
+        ) : null}
+        <div className="article-video__preview-controls">
+          <button type="button" onClick={togglePreviewPlayback} aria-pressed={isPlaying}>
+            {isPlaying ? "Pause video" : "Play video"}
+          </button>
+          <input
+            type="range"
+            min={0}
+            max={duration || 0}
+            step={0.1}
+            value={Math.min(currentTime, duration || 0)}
+            onChange={(event) => seekPreview(Number(event.target.value))}
+            aria-label="Seek video"
+            disabled={!duration}
+          />
+        </div>
+        {video.caption ? <figcaption>{video.caption}</figcaption> : null}
+        {video.credit ? <p className="article-video__credit">{video.credit}</p> : null}
+        <span className="sr-only" data-video-slug={slug}>
+          {video.alt}
+        </span>
+      </figure>
+    );
+  }
+
+  if (isFramed) {
+    return (
+      <figure
+        className={`${figureClassName} article-video--framed`}
+        data-media-type="video"
+        data-video-theme={resolvedTheme}
+        data-video-mode={videoMode}
+      >
+        <div className="article-video__media">
+          <video
+            ref={videoRef}
+            playsInline
+            preload="metadata"
+            poster={video.posterSrc}
+            aria-label={video.alt}
+            className="article-video__player"
+            key={hasHydrated ? src : "ssr"}
+            onPlay={() => setIsPlaying(true)}
+            onPause={() => setIsPlaying(false)}
+            onEnded={() => setIsPlaying(false)}
+            onTimeUpdate={(event) => setCurrentTime(event.currentTarget.currentTime)}
+            onDurationChange={(event) => {
+              const nextDuration = event.currentTarget.duration;
+              if (Number.isFinite(nextDuration) && nextDuration > 0) setDuration(nextDuration);
+            }}
+          >
+            <source src={src} type="video/mp4" />
+          </video>
+        </div>
+        {framedControls}
+        <span className="sr-only" data-video-slug={slug}>
+          {video.alt}
+        </span>
+      </figure>
+    );
+  }
 
   return (
-    <figure className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme}>
+    <figure className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme} data-video-mode={videoMode}>
       <video
         controls
         playsInline
@@ -45,3 +246,46 @@ export function ArticleVideoFigure({ video, slug, figureClassName = "article-pho
     </figure>
   );
 }
+
+function FramedVideoControls({
+  currentTime,
+  duration,
+  isPlaying,
+  onSeek,
+  onToggle,
+}: {
+  currentTime: number;
+  duration: number;
+  isPlaying: boolean;
+  onSeek: (nextTime: number) => void;
+  onToggle: () => void;
+}) {
+  const seekProgress = duration > 0 ? (currentTime / duration) * 100 : 0;
+  return (
+    <div className="article-video__cta" data-playing={isPlaying ? "true" : "false"}>
+      <button type="button" className="article-video__cta-toggle" onClick={onToggle} aria-pressed={isPlaying}>
+        <span className="article-video__cta-label">
+          <span className="article-video__cta-label-sizer" aria-hidden="true">
+            Pause Video
+          </span>
+          <span className="article-video__cta-label-text">{isPlaying ? "Pause Video" : "Play Video"}</span>
+        </span>
+        <span className="article-video__cta-icon" aria-hidden="true">
+          {isPlaying ? <Pause /> : <Play />}
+        </span>
+      </button>
+      <input
+        className="article-video__cta-seek"
+        type="range"
+        min={0}
+        max={duration || 0}
+        step={0.1}
+        value={Math.min(currentTime, duration || 0)}
+        onChange={(event) => onSeek(Number(event.target.value))}
+        aria-label="Seek video"
+        disabled={!duration}
+        style={{ "--seek-progress": `${seekProgress}%` } as CSSProperties}
+      />
+    </div>
+  );
+}

package/components/blog-page-background.tsx

@@ -2,18 +2,35 @@
 
 import type { RefObject } from "react";
 
+/** A rectangle, in the background layer's own coordinates, that header text occupies. */
+export type BlogHeaderObstacle = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+/** Vertical rhythm grid the rhythm blog layout is built on. */
+export type BlogBackgroundRhythm = {
+  rowHeight: number;
+  paintBuffer: number;
+  paintHeight: number;
+};
+
 export type BlogPageBackgroundProps = {
   pageRef: RefObject<HTMLElement | null>;
+  /** Rhythm blog layout only: header text boxes the artwork should keep clear of. */
+  headerObstacles?: BlogHeaderObstacle[];
+  /** Rhythm blog layout only: the rhythm grid, so artwork can align to it. */
+  rhythm?: BlogBackgroundRhythm;
 };
 
 /**
  * Default (no-op) blog page background for publications without a bespoke
- * backdrop. Threat Intelligence supplies its own animated defense-graph
- * background (publications/threat_intelligence/blog-defense/page-background.tsx);
- * every other publication gets no decorative background layer. This is what
- * `renderers/pretext` falls back to for any publication that isn't Threat
- * Intelligence, so the blog layout loads cleanly without depending on TI's
- * package.
+ * backdrop. A publication supplies header artwork through the
+ * `components.BlogPageBackground` brand slot; with the rhythm blog layout the
+ * slot also receives `headerObstacles` and `rhythm`. This is what
+ * `renderers/pretext` falls back to when no slot component is registered.
  */
 export function BlogPageBackground(_props: BlogPageBackgroundProps) {
   return null;

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>
+    );
+  }
+}