@anthusai/papyrus 1.0.0-next.18 → 1.0.0-next.19

package/app/[year]/[month]/[day]/[articleSlug]/page.tsx

@@ -52,10 +52,12 @@ export default async function DateScopedArticlePage({ params }: DateScopedArticl
       editionFooter={{
         editionBasePath,
         entries: buildPresentationFooterEntries(content),
+        sections: content.sections.map((section) => ({ key: section.key, label: section.label })),
         subtitle: SITE_BRAND.footerSubtitleOverride ?? (content.description?.trim() || "Inside Papyrus"),
         title: SITE_BRAND.footerTitle,
       }}
       item={item}
+      videoScript={content.videoScripts?.[item.slug] ?? null}
       backHref={`${editionBasePath}#${item.slug}`}
     />
   );

package/app/blog-rhythm.css

@@ -0,0 +1,278 @@
+/*
+  Structural CSS for the rhythm blog layout (blogLayout: "rhythm").
+  Every rule is scoped to .blog-rhythm-shell, which only the rhythm layout
+  renders, so classic layouts are unaffected. The shell sets --blog-rhythm,
+  --blog-row-height, --blog-paint-buffer and --blog-paint-height inline.
+  Typography, colors and the header look belong to the publication's theme.css.
+  Optional tokens a publication may set:
+    --blog-hrule-foreground, --blog-section-rule, --blog-section-band-height,
+    --blog-page-padding-x, --blog-secondary-pair-min-width.
+*/
+
+.blog-rhythm-shell {
+  --blog-hrule-foreground: var(--border);
+  --blog-section-rule: var(--border);
+  --blog-section-band-height: calc(var(--blog-row-height) * 2);
+  --blog-page-padding-x: calc(var(--blog-rhythm) * 3);
+  --paper-rhythm: var(--blog-row-height);
+
+  isolation: isolate;
+  position: relative;
+}
+
+.blog-rhythm-shell.presentation-page--blog {
+  padding: calc(var(--blog-row-height) * 4) var(--blog-page-padding-x) 0;
+}
+
+.blog-rhythm-shell > :not(.blog-page-background) {
+  position: relative;
+  z-index: 1;
+}
+
+.blog-rhythm-shell[data-rhythm-overlay="true"]::before {
+  background-image:
+    repeating-linear-gradient(
+      to bottom,
+      rgb(var(--rhythm-overlay-rule-rgb) / var(--rhythm-overlay-rule-alpha)) 0,
+      rgb(var(--rhythm-overlay-rule-rgb) / var(--rhythm-overlay-rule-alpha)) 1px,
+      transparent 1px,
+      transparent var(--blog-row-height)
+    ),
+    repeating-linear-gradient(
+      to bottom,
+      rgb(var(--rhythm-overlay-blue-rgb) / var(--rhythm-overlay-blue-alpha)) 0,
+      rgb(var(--rhythm-overlay-blue-rgb) / var(--rhythm-overlay-blue-alpha)) var(--blog-row-height),
+      rgb(var(--rhythm-overlay-yellow-rgb) / var(--rhythm-overlay-yellow-alpha)) var(--blog-row-height),
+      rgb(var(--rhythm-overlay-yellow-rgb) / var(--rhythm-overlay-yellow-alpha)) calc(var(--blog-row-height) * 2)
+    );
+  content: "";
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 900;
+}
+
+.blog-rhythm-shell .presentation-header {
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+}
+
+.blog-rhythm-shell .presentation-section-header,
+.blog-rhythm-shell .presentation-item,
+.blog-rhythm-shell .presentation-item__copy {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.blog-rhythm-shell .presentation-section-header {
+  align-items: stretch;
+  border-bottom: 0;
+  border-top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--blog-row-height);
+  margin: 0;
+  min-height: 0;
+  padding: calc(var(--blog-row-height) * 4) 0 calc(var(--blog-row-height) * 2);
+  width: 100%;
+}
+
+.blog-rhythm-shell .presentation-section-header__band {
+  align-items: center;
+  display: grid;
+  gap: 0 var(--blog-rhythm);
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-rows: var(--blog-section-band-height);
+  width: 100%;
+}
+
+.blog-rhythm-shell .presentation-section-header__band::before,
+.blog-rhythm-shell .presentation-section-header__band::after {
+  background: var(--blog-section-rule);
+  content: "";
+  grid-row: 1;
+  height: var(--blog-section-band-height);
+}
+
+.blog-rhythm-shell .presentation-section-header__band::before {
+  grid-column: 1;
+}
+
+.blog-rhythm-shell .presentation-section-header__band::after {
+  grid-column: 3;
+}
+
+.blog-rhythm-shell .presentation-section-header__band p {
+  grid-column: 2;
+  grid-row: 1;
+  height: var(--blog-section-band-height);
+  justify-self: center;
+  line-height: var(--blog-section-band-height);
+  margin: 0;
+  padding: 0 var(--blog-rhythm);
+  width: max-content;
+}
+
+.blog-rhythm-shell .presentation-item {
+  border-bottom: 0;
+  gap: var(--blog-row-height) calc(var(--blog-rhythm) * 4);
+  padding-bottom: 0;
+}
+
+.blog-rhythm-shell .presentation-item--blog {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.blog-rhythm-shell .presentation-rhythm-hrule {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-rows: repeat(5, var(--blog-row-height));
+  height: calc(var(--blog-row-height) * 5);
+  width: 100%;
+}
+
+.blog-rhythm-shell .presentation-rhythm-hrule__line {
+  background: var(--blog-hrule-foreground);
+  grid-row: 3;
+  height: var(--blog-row-height);
+}
+
+@media (min-width: 1100px) {
+  .blog-rhythm-shell .blog-section:has(> .presentation-item[data-item-index="2"]) {
+    column-gap: calc(var(--blog-row-height) * 2);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .blog-rhythm-shell .blog-section:has(> .presentation-item[data-item-index="2"]) > .presentation-section-header,
+  .blog-rhythm-shell .blog-section:has(> .presentation-item[data-item-index="2"]) > .presentation-item[data-item-index="0"] {
+    grid-column: 1 / -1;
+  }
+
+  .blog-rhythm-shell .blog-section:has(> .presentation-item[data-item-index="2"]) > .presentation-rhythm-hrule[data-hide-in-secondary-pair="true"] {
+    display: none;
+  }
+}
+
+.blog-rhythm-shell .presentation-item[data-feature-layout][data-has-image="true"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.blog-rhythm-shell .presentation-item[data-feature-layout] .presentation-item__text-frame {
+  height: var(--feature-text-frame-height);
+  max-width: none;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.blog-rhythm-shell .presentation-item[data-feature-layout] .presentation-item__media {
+  height: var(--feature-media-height);
+  width: var(--feature-image-width);
+}
+
+.blog-rhythm-shell .presentation-item[data-feature-layout] .pictogram-figure__frame {
+  aspect-ratio: auto;
+  height: var(--feature-image-height);
+  width: var(--feature-image-width);
+}
+
+.blog-rhythm-shell .presentation-item--blog[data-feature-layout][data-has-image="true"] .presentation-item__copy {
+  display: contents;
+}
+
+.blog-rhythm-shell .presentation-item--blog[data-feature-layout][data-has-image="true"] .presentation-item__header {
+  width: 100%;
+}
+
+.blog-rhythm-shell .presentation-item--blog[data-feature-layout][data-has-image="true"] .presentation-item__body {
+  min-width: 0;
+  position: relative;
+  width: 100%;
+}
+
+.blog-rhythm-shell .presentation-item--blog[data-feature-layout][data-has-image="true"] .presentation-item__body .presentation-item__text-frame {
+  margin-top: 0;
+}
+
+.blog-rhythm-shell .presentation-item--blog[data-feature-layout][data-has-image="true"] .presentation-item__media {
+  margin: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.blog-rhythm-shell .presentation-item__image img {
+  height: 100%;
+  object-fit: contain;
+  width: 100%;
+}
+
+.blog-rhythm-shell .presentation-item__video {
+  grid-column: 1 / -1;
+  margin: var(--blog-row-height) 0 0;
+}
+
+.blog-rhythm-shell .article-page__hero-video {
+  margin: 0 0 calc(var(--blog-rhythm) * 5);
+}
+
+.blog-rhythm-shell .article-page__hero-video .article-video,
+.blog-rhythm-shell .presentation-item__video-figure {
+  container-type: inline-size;
+}
+
+.blog-rhythm-shell .presentation-item__video-figure .article-video__media,
+.blog-rhythm-shell .article-page__hero-video .article-video__media {
+  height: round(up, calc(100cqw * 9 / 16), var(--blog-row-height));
+}
+
+.blog-rhythm-shell .article-float-grid[data-feature-layout][data-has-image="true"] {
+  display: grid;
+  gap: var(--feature-layout-gap);
+  grid-template-columns: minmax(0, 1fr) var(--feature-image-width);
+}
+
+.blog-rhythm-shell .article-float-grid[data-feature-layout] .article-page__hero-video,
+.blog-rhythm-shell .article-float-grid[data-feature-layout] .article-float-grid__header {
+  grid-column: 1 / -1;
+}
+
+.blog-rhythm-shell .article-float-grid[data-feature-layout] .article-float-grid__body {
+  align-self: start;
+  grid-column: 1;
+  max-width: var(--feature-copy-width);
+  min-width: 0;
+  width: var(--feature-copy-width);
+}
+
+.blog-rhythm-shell .article-float-grid[data-feature-layout] .article-float-grid__media,
+.blog-rhythm-shell .article-float-grid[data-feature-layout] .pictogram-figure__frame {
+  height: var(--feature-image-height);
+  width: var(--feature-image-width);
+}
+
+.blog-rhythm-shell .article-float-grid[data-feature-layout] .pictogram-figure__frame {
+  aspect-ratio: auto;
+}
+
+.blog-rhythm-shell .article-float-grid[data-feature-layout] .article-float-grid__media {
+  align-self: start;
+  grid-column: 2;
+  margin: 0;
+  position: relative;
+}
+
+.blog-rhythm-shell .article-float-grid .presentation-item__image {
+  margin: 0;
+}
+
+@media (max-width: 900px) {
+  .blog-rhythm-shell .presentation-item--blog {
+    grid-template-columns: 1fr;
+  }
+}

package/app/globals.css

@@ -45,6 +45,7 @@
   --color-surface-foreground: var(--surface-foreground);
   --color-foreground-strong: var(--foreground-strong);
   --color-foreground-muted: var(--foreground-muted);
+  --color-foreground-subtle: var(--foreground-subtle);
 }
 
 :root {
@@ -71,6 +72,7 @@
   --surface-foreground: var(--card-foreground);
   --foreground-strong: var(--slate-12);
   --foreground-muted: var(--slate-10);
+  --foreground-subtle: var(--slate-9);
   --border: var(--slate-6);
   --input: var(--slate-6);
   --ring: var(--slate-8);

package/app/layout.tsx

@@ -4,12 +4,14 @@ import Script from "next/script";
 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 { getSiteStack } from "../lib/site-stack";
 import { isIndexable, showStagingBanner } from "../lib/site-env";
 import { StagingBanner } from "../components/staging-banner";
 import "./tailwind.css";
 import "./globals.css";
+import "./blog-rhythm.css";
 import "papyrus-site-theme";
 
 const playfairDisplay = Playfair_Display({
@@ -43,6 +45,7 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
   const siteBrand = getSiteBrand();
   const presentationChoices = getPresentationChoices(siteBrand);
   const siteStack = getSiteStack(siteBrand);
+  const brandFonts = resolveBrandFontAssets(siteBrand.fonts);
 
   return (
     <html
@@ -56,8 +59,21 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
       data-default-presentation={siteBrand.defaultPresentation}
       data-presentation-choices={presentationChoices.join(",")}
       {...(siteBrand.forcedPresentation ? { "data-forced-presentation": siteBrand.forcedPresentation } : {})}
+      {...(siteBrand.blogLayout === "rhythm" ? { "data-blog-layout": "rhythm" } : {})}
+      {...(brandFonts.isEmpty ? {} : { style: brandFonts.rootStyle as React.CSSProperties })}
       suppressHydrationWarning
     >
+      {brandFonts.isEmpty ? null : (
+        <head>
+          {brandFonts.preconnectOrigins.map((origin) => (
+            <link crossOrigin="anonymous" href={origin} key={origin} rel="preconnect" />
+          ))}
+          {brandFonts.stylesheetHrefs.map((href) => (
+            <link href={href} key={href} rel="stylesheet" />
+          ))}
+          {brandFonts.fontFaceCss ? <style data-brand-fonts="true">{brandFonts.fontFaceCss}</style> : null}
+        </head>
+      )}
       <body className={`${playfairDisplay.variable} ${plusJakartaSans.variable}`}>
         <Script id="papyrus-favicon-color-scheme" strategy="beforeInteractive">
           {`(() => {

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,6 +1,7 @@
 "use client";
 
-import { useCallback, useEffect, useRef, 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";
@@ -32,6 +33,8 @@ export function ArticleVideoFigure({
   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);
@@ -91,6 +94,58 @@ export function ArticleVideoFigure({
     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
@@ -133,6 +188,43 @@ export function ArticleVideoFigure({
     );
   }
 
+  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} data-video-mode={videoMode}>
       <video
@@ -154,3 +246,46 @@ export function ArticleVideoFigure({
     </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/pictogram-figure.tsx

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