@anthusai/papyrus 0.0.0 → 1.0.0-next.10

package/components/article-video.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "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;
+};
+
+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);
+
+  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);
+  }, []);
+
+  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>
+    );
+  }
+
+  return (
+    <figure className={figureClassName} data-media-type="video" data-video-theme={resolvedTheme} data-video-mode={videoMode}>
+      <video
+        controls
+        playsInline
+        preload="metadata"
+        poster={video.posterSrc}
+        aria-label={video.alt}
+        className="article-video__player"
+        key={hasHydrated ? src : "ssr"}
+      >
+        <source src={src} type="video/mp4" />
+      </video>
+      {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>
+  );
+}

package/components/blog-page-background.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { RefObject } from "react";
+
+export type BlogPageBackgroundProps = {
+  pageRef: RefObject<HTMLElement | null>;
+};
+
+/**
+ * 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.
+ */
+export function BlogPageBackground(_props: BlogPageBackgroundProps) {
+  return null;
+}

package/components/dev-sandbox-editor-sign-in.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { fetchAuthSession, signIn, signOut } from "aws-amplify/auth";
+import { configureAmplifyClient } from "./amplify-client-provider";
+import type { DevSandboxEditorAuth } from "../lib/dev-sandbox-editor-auth";
+
+const EDITOR_GROUPS = new Set(["editor", "admin"]);
+
+function readSessionGroups(session: Awaited<ReturnType<typeof fetchAuthSession>>): string[] {
+  const accessPayload = session.tokens?.accessToken?.payload ?? {};
+  const idPayload = session.tokens?.idToken?.payload ?? {};
+  const rawGroups = [
+    accessPayload["cognito:groups"],
+    accessPayload.groups,
+    idPayload["cognito:groups"],
+    idPayload.groups,
+  ];
+  const groups: string[] = [];
+  for (const value of rawGroups) {
+    if (typeof value === "string" && value.trim()) groups.push(value.trim());
+    else if (Array.isArray(value)) {
+      for (const entry of value) {
+        if (typeof entry === "string" && entry.trim()) groups.push(entry.trim());
+      }
+    }
+  }
+  return [...new Set(groups)];
+}
+
+function sessionHasEditorAccess(session: Awaited<ReturnType<typeof fetchAuthSession>>): boolean {
+  if (!session.tokens?.accessToken) return false;
+  return readSessionGroups(session).some((group) => EDITOR_GROUPS.has(group));
+}
+
+export async function ensureDevSandboxEditorSession(
+  credentials: DevSandboxEditorAuth | null | undefined,
+): Promise<void> {
+  if (!credentials) return;
+
+  configureAmplifyClient();
+
+  const existing = await fetchAuthSession();
+  if (sessionHasEditorAccess(existing)) return;
+
+  if (existing.tokens?.accessToken) {
+    try {
+      await signOut();
+    } catch {
+      // Continue into seed sign-in even if sign-out fails.
+    }
+  }
+
+  const result = await signIn({
+    username: credentials.username,
+    password: credentials.password,
+  });
+  if (!result.isSignedIn) return;
+
+  await fetchAuthSession({ forceRefresh: true });
+}

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