@anthusai/papyrus 1.0.0-next.4 → 1.0.0-next.41

package/lib/video-script.ts

@@ -0,0 +1,77 @@
+export type VideoElementAliases = Record<string, string>;
+
+/**
+ * Rewrites generic VideoML element names in a stored script to the publication's
+ * own scene components, e.g. `{ "quote-card": "acme-quote-card" }`.
+ */
+export function normalizeDevPreviewDsl(dsl: string, elementAliases: VideoElementAliases = {}): string {
+  let normalized = dsl;
+  for (const [generic, branded] of Object.entries(elementAliases)) {
+    const escaped = generic.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    normalized = normalized.replace(new RegExp(`(</?)${escaped}(?=[\\s/>])`, "g"), `$1${branded}`);
+  }
+  return normalized;
+}
+
+export type VideoScriptTargetKind = "article" | "edition";
+
+export type VideoScriptRef = {
+  slug: string;
+  dsl: string;
+  targetKind: VideoScriptTargetKind;
+};
+
+export const EDITION_OVERVIEW_VIDEO_KEY = "edition-overview";
+
+export function collectVideoScriptTargets(
+  items: ReadonlyArray<{ slug: string; video?: unknown }>,
+  hasEditionVideo: boolean,
+): string[] {
+  const targets = new Set<string>();
+  if (hasEditionVideo) targets.add(EDITION_OVERVIEW_VIDEO_KEY);
+  for (const item of items) {
+    if (item.video) targets.add(item.slug);
+  }
+  return [...targets];
+}
+
+export function videomlItemSlug(targetSlug: string): string {
+  return `${targetSlug}--videoml`;
+}
+
+export function parseVideoScriptRef(item: {
+  slug: string;
+  editorial?: unknown;
+}): VideoScriptRef | null {
+  const editorial = parseEditorial(item.editorial);
+  const videoScript = editorial?.videoScript;
+  if (!videoScript || typeof videoScript !== "object" || Array.isArray(videoScript)) return null;
+
+  const scriptRecord = videoScript as Record<string, unknown>;
+  const dsl = typeof scriptRecord.dsl === "string" ? scriptRecord.dsl.trim() : "";
+  if (!dsl) return null;
+
+  const target = scriptRecord.target;
+  const targetKind: VideoScriptTargetKind =
+    target && typeof target === "object" && !Array.isArray(target) && (target as Record<string, unknown>).kind === "edition"
+      ? "edition"
+      : "article";
+
+  return { slug: item.slug, dsl, targetKind };
+}
+
+function parseEditorial(editorial: unknown): Record<string, unknown> | null {
+  if (!editorial) return null;
+  if (typeof editorial === "string") {
+    try {
+      const parsed = JSON.parse(editorial) as unknown;
+      return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? (parsed as Record<string, unknown>) : null;
+    } catch {
+      return null;
+    }
+  }
+  if (typeof editorial === "object" && !Array.isArray(editorial)) {
+    return editorial as Record<string, unknown>;
+  }
+  return null;
+}

package/middleware.ts

@@ -1,32 +1,33 @@
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 import { getSiteBrand } from "./lib/site-brand";
+import { newsroomHref } from "./lib/newsroom-base-path";
+import { getReaderBasePath } from "./lib/reader-base-path";
+import { isStagingGatedPath, isStaticOrApiPath } from "./lib/staging-gated-path";
 import { getSiteEnv, isIndexable } from "./lib/site-env";
 import { getStagingAccess } from "./lib/staging-gate";
+import {
+  isPreviewGatedPath,
+  isStaticPreviewEnabled,
+  previewRewritePathname,
+  shouldRewriteToPreview,
+} from "./lib/staging-preview-object";
 
 function usesNewsroomRootPaths(): boolean {
   const brand = getSiteBrand();
   return brand.rootRoute?.kind === "newsroom" && brand.newsroomBasePath === "";
 }
 
-function isStaticOrApiPath(pathname: string): boolean {
-  return (
-    pathname.startsWith("/_next")
-    || pathname.startsWith("/api")
-    || pathname === "/favicon.ico"
-    || pathname.startsWith("/icon")
-    || /\.[a-zA-Z0-9]+$/.test(pathname)
-  );
-}
-
-function isStagingGatedPath(pathname: string): boolean {
-  if (isStaticOrApiPath(pathname)) return false;
-  if (pathname === "/robots.txt") return false;
-  if (pathname === "/newsroom" || pathname.startsWith("/newsroom/")) return false;
-  return true;
+function isStagingGatedPathForBrand(pathname: string): boolean {
+  return isStagingGatedPath(pathname, getReaderBasePath(), usesNewsroomRootPaths());
 }
 
 function routeRequest(request: NextRequest): NextResponse {
+  if (isStaticPreviewEnabled() && shouldRewriteToPreview(request.nextUrl.pathname, usesNewsroomRootPaths())) {
+    const rewriteUrl = request.nextUrl.clone();
+    rewriteUrl.pathname = previewRewritePathname(request.nextUrl.pathname);
+    return NextResponse.rewrite(rewriteUrl);
+  }
   if (!usesNewsroomRootPaths()) {
     return NextResponse.next();
   }
@@ -37,7 +38,7 @@ function routeRequest(request: NextRequest): NextResponse {
   }
 
   if (pathname === "/newsroom" || pathname === "/newsroom/") {
-    return NextResponse.redirect(new URL("/", request.url));
+    return NextResponse.redirect(new URL(`/${request.nextUrl.search}`, request.url));
   }
   if (pathname.startsWith("/newsroom/")) {
     const target = pathname.slice("/newsroom".length) || "/";
@@ -59,11 +60,15 @@ function routeRequest(request: NextRequest): NextResponse {
 
 export async function middleware(request: NextRequest): Promise<NextResponse> {
   let sessionResponse: NextResponse | null = null;
-  if (getSiteEnv() === "staging" && isStagingGatedPath(request.nextUrl.pathname)) {
+  const { pathname } = request.nextUrl;
+  const gated = isStaticPreviewEnabled()
+    ? isPreviewGatedPath(pathname, usesNewsroomRootPaths())
+    : isStagingGatedPathForBrand(pathname);
+  if (getSiteEnv() === "staging" && gated) {
     sessionResponse = NextResponse.next();
     const access = await getStagingAccess(request, sessionResponse);
     if (access === "anonymous") {
-      return withRobotsHeader(NextResponse.redirect(new URL("/newsroom", request.url)));
+      return withRobotsHeader(NextResponse.redirect(new URL(newsroomHref(), request.url)));
     }
     if (access === "forbidden") {
       return withRobotsHeader(new NextResponse("Staging is limited to editors and admins.", { status: 403 }));

package/package.json

@@ -77,11 +77,16 @@
     "./components/article-video": "./components/article-video.tsx",
     "./components/blog-page-background": "./components/blog-page-background.tsx",
     "./components/dev-sandbox-editor-sign-in": "./components/dev-sandbox-editor-sign-in.tsx",
+    "./components/markus-ir-preview": "./components/markus-ir-preview.tsx",
     "./components/news-desk-client-provider": "./components/news-desk-client-provider.tsx",
     "./components/news-desk-page": "./components/news-desk-page.tsx",
     "./components/news-desk-taxonomy-client": "./components/news-desk-taxonomy-client.ts",
     "./components/newspaper": "./components/newspaper.tsx",
+    "./components/newsroom-access-gate": "./components/newsroom-access-gate.tsx",
+    "./components/newsroom-article-editor": "./components/newsroom-article-editor.tsx",
+    "./components/newsroom-articles-view": "./components/newsroom-articles-view.tsx",
     "./components/newsroom-assignments-view": "./components/newsroom-assignments-view.tsx",
+    "./components/newsroom-client-shell": "./components/newsroom-client-shell.tsx",
     "./components/newsroom-ops-overview": "./components/newsroom-ops-overview.tsx",
     "./components/newsroom-ops-shell": "./components/newsroom-ops-shell.tsx",
     "./components/newsroom-references-view": "./components/newsroom-references-view.tsx",
@@ -89,10 +94,14 @@
     "./components/papyrus-console-shell": "./components/papyrus-console-shell.tsx",
     "./components/pictogram-figure": "./components/pictogram-figure.tsx",
     "./components/presentation-footer": "./components/presentation-footer.tsx",
+    "./components/presentation-header": "./components/presentation-header.tsx",
+    "./components/presentation-rhythm-hrule": "./components/presentation-rhythm-hrule.tsx",
     "./components/reader-auth-control": "./components/reader-auth-control.tsx",
     "./components/reader-auth-state": "./components/reader-auth-state.ts",
     "./components/reader-settings": "./components/reader-settings.ts",
     "./components/reader-theme-control": "./components/reader-theme-control.tsx",
+    "./components/reference-cyclotron-status": "./components/reference-cyclotron-status.tsx",
+    "./components/reference-relevance-review": "./components/reference-relevance-review.tsx",
     "./components/reference-source-preview": "./components/reference-source-preview.tsx",
     "./components/settings-page": "./components/settings-page.tsx",
     "./components/staging-banner": "./components/staging-banner.tsx",
@@ -115,19 +124,27 @@
     "./components/ui/tabs": "./components/ui/tabs.tsx",
     "./components/ui/textarea": "./components/ui/textarea.tsx",
     "./components/ui/tooltip": "./components/ui/tooltip.tsx",
+    "./components/use-blog-header-obstacles": "./components/use-blog-header-obstacles.ts",
+    "./components/use-brand-fonts-ready": "./components/use-brand-fonts-ready.ts",
     "./components/use-resolved-papyrus-theme": "./components/use-resolved-papyrus-theme.ts",
+    "./components/use-rhythm-overlay": "./components/use-rhythm-overlay.ts",
     "./lib/amplify-outputs-guard": "./lib/amplify-outputs-guard.ts",
     "./lib/amplify-outputs-path": "./lib/amplify-outputs-path.ts",
     "./lib/amplify-server-runtime": "./lib/amplify-server-runtime.ts",
     "./lib/archive-data": "./lib/archive-data.ts",
     "./lib/archive-types": "./lib/archive-types.ts",
     "./lib/articles": "./lib/articles.ts",
+    "./lib/blog-feature-solver": "./lib/blog-feature-solver.ts",
+    "./lib/blog-rhythm": "./lib/blog-rhythm.ts",
+    "./lib/brand-fonts-watch": "./lib/brand-fonts-watch.ts",
+    "./lib/brand-fonts": "./lib/brand-fonts.ts",
     "./lib/cached-content-repository": "./lib/cached-content-repository.ts",
     "./lib/category-dashboard": "./lib/category-dashboard.ts",
     "./lib/category-repository": "./lib/category-repository.ts",
     "./lib/console-chat-client": "./lib/console-chat-client.ts",
     "./lib/console-web-context": "./lib/console-web-context.ts",
     "./lib/content-actions-client": "./lib/content-actions-client.ts",
+    "./lib/content-actions-demo": "./lib/content-actions-demo.ts",
     "./lib/content-load-timing": "./lib/content-load-timing.ts",
     "./lib/content-repository": "./lib/content-repository.ts",
     "./lib/content-source-context": "./lib/content-source-context.ts",
@@ -148,22 +165,28 @@
     "./lib/markus-ir": "./lib/markus-ir.ts",
     "./lib/markus-projection": "./lib/markus-projection.ts",
     "./lib/markus-to-article": "./lib/markus-to-article.ts",
+    "./lib/media-route-response": "./lib/media-route-response.ts",
     "./lib/news-desk-session": "./lib/news-desk-session.ts",
     "./lib/newspaper-layout": "./lib/newspaper-layout.ts",
+    "./lib/newsroom-articles": "./lib/newsroom-articles.ts",
     "./lib/newsroom-assignments": "./lib/newsroom-assignments.ts",
     "./lib/newsroom-base-path": "./lib/newsroom-base-path.ts",
     "./lib/newsroom-card-layout": "./lib/newsroom-card-layout.ts",
     "./lib/newsroom-category-drilldown": "./lib/newsroom-category-drilldown.ts",
+    "./lib/newsroom-demo-articles": "./lib/newsroom-demo-articles.ts",
     "./lib/newsroom-demo-dashboard": "./lib/newsroom-demo-dashboard.ts",
     "./lib/newsroom-demo-profile": "./lib/newsroom-demo-profile.ts",
     "./lib/newsroom-forum-routes": "./lib/newsroom-forum-routes.ts",
     "./lib/newsroom-index-filters": "./lib/newsroom-index-filters.ts",
     "./lib/newsroom-knowledge-query-request": "./lib/newsroom-knowledge-query-request.ts",
     "./lib/newsroom-list-selection": "./lib/newsroom-list-selection.ts",
+    "./lib/newsroom-media-backend": "./lib/newsroom-media-backend.ts",
+    "./lib/newsroom-media": "./lib/newsroom-media.ts",
     "./lib/newsroom-nav": "./lib/newsroom-nav.ts",
     "./lib/newsroom-references": "./lib/newsroom-references.ts",
     "./lib/newsroom-sections": "./lib/newsroom-sections.ts",
     "./lib/newsroom-topics": "./lib/newsroom-topics.ts",
+    "./lib/oauth-redirect-priority": "./lib/oauth-redirect-priority.ts",
     "./lib/papyrus-object-kinds": "./lib/papyrus-object-kinds.ts",
     "./lib/papyrus-web-locations": "./lib/papyrus-web-locations.ts",
     "./lib/pilobol-sample": "./lib/pilobol-sample.ts",
@@ -171,15 +194,21 @@
     "./lib/pretext-layout": "./lib/pretext-layout.ts",
     "./lib/public-placeholder-config": "./lib/public-placeholder-config.ts",
     "./lib/publication-items": "./lib/publication-items.ts",
+    "./lib/reader-base-path": "./lib/reader-base-path.ts",
     "./lib/reader-route-config": "./lib/reader-route-config.ts",
     "./lib/reader-static-params": "./lib/reader-static-params.ts",
     "./lib/reader-storage-url": "./lib/reader-storage-url.ts",
     "./lib/reference-display": "./lib/reference-display.ts",
     "./lib/reference-policy": "./lib/reference-policy.ts",
     "./lib/reference-source-preview": "./lib/reference-source-preview.ts",
+    "./lib/relevance-decisions": "./lib/relevance-decisions.ts",
+    "./lib/relevance-status": "./lib/relevance-status.ts",
     "./lib/renderer-config": "./lib/renderer-config.ts",
     "./lib/renderer": "./lib/renderer.ts",
     "./lib/reporting-story-budget": "./lib/reporting-story-budget.ts",
+    "./lib/revalidate-secret": "./lib/revalidate-secret.ts",
+    "./lib/robots-policy": "./lib/robots-policy.ts",
+    "./lib/root-route-redirect": "./lib/root-route-redirect.ts",
     "./lib/semantic-graph": "./lib/semantic-graph.ts",
     "./lib/site-brand-tenant": "./lib/site-brand-tenant.ts",
     "./lib/site-brand": "./lib/site-brand.ts",
@@ -187,14 +216,23 @@
     "./lib/site-renderer": "./lib/site-renderer.ts",
     "./lib/site-stack": "./lib/site-stack.ts",
     "./lib/staging-gate": "./lib/staging-gate.ts",
+    "./lib/staging-gated-path": "./lib/staging-gated-path.ts",
+    "./lib/staging-preview-object": "./lib/staging-preview-object.ts",
     "./lib/themed-image": "./lib/themed-image.ts",
     "./lib/utils": "./lib/utils.ts",
+    "./lib/video-mode": "./lib/video-mode.ts",
+    "./lib/video-script": "./lib/video-script.ts",
     "./renderers/markus/index": "./renderers/markus/index.ts",
     "./renderers/markus/stubs": "./renderers/markus/stubs.tsx",
     "./renderers/pretext/article-page": "./renderers/pretext/article-page.tsx",
     "./renderers/pretext/index": "./renderers/pretext/index.ts",
     "./renderers/pretext/layouts": "./renderers/pretext/layouts.ts",
+    "./renderers/pretext/presentation-shared": "./renderers/pretext/presentation-shared.tsx",
     "./renderers/pretext/presentation-shell": "./renderers/pretext/presentation-shell.tsx",
+    "./renderers/pretext/rhythm-article-page": "./renderers/pretext/rhythm-article-page.tsx",
+    "./renderers/pretext/rhythm-blog-presentation": "./renderers/pretext/rhythm-blog-presentation.tsx",
+    "./renderers/pretext/rhythm-shell-style": "./renderers/pretext/rhythm-shell-style.ts",
+    "./app/%5F_preview/[[...path]]/route": "./app/%5F_preview/[[...path]]/route.ts",
     "./app/[year]/[month]/[day]/[articleSlug]/page": "./app/[year]/[month]/[day]/[articleSlug]/page.tsx",
     "./app/[year]/[month]/[day]/page": "./app/[year]/[month]/[day]/page.tsx",
     "./app/[year]/[month]/[day]/page/[pageNumber]/page": "./app/[year]/[month]/[day]/page/[pageNumber]/page.tsx",
@@ -207,6 +245,8 @@
     "./app/layout": "./app/layout.tsx",
     "./app/newsroom/[section]/[...selection]/page": "./app/newsroom/[section]/[...selection]/page.tsx",
     "./app/newsroom/[section]/page": "./app/newsroom/[section]/page.tsx",
+    "./app/newsroom/articles/[id]/page": "./app/newsroom/articles/[id]/page.tsx",
+    "./app/newsroom/articles/page": "./app/newsroom/articles/page.tsx",
     "./app/newsroom/forum/[threadId]/page": "./app/newsroom/forum/[threadId]/page.tsx",
     "./app/newsroom/insights/[threadId]/page": "./app/newsroom/insights/[threadId]/page.tsx",
     "./app/newsroom/insights/page": "./app/newsroom/insights/page.tsx",
@@ -214,6 +254,7 @@
     "./app/newsroom/page": "./app/newsroom/page.tsx",
     "./app/newsroom/sections/[sectionId]/page": "./app/newsroom/sections/[sectionId]/page.tsx",
     "./app/page": "./app/page.tsx",
+    "./app/robots": "./app/robots.ts",
     "./app/settings/page": "./app/settings/page.tsx"
   },
   "files": [
@@ -261,7 +302,7 @@
       "optional": true
     }
   },
-  "version": "1.0.0-next.4",
+  "version": "1.0.0-next.41",
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.7.3",
     "@aws-sdk/client-cognito-identity-provider": "3.1045.0",
@@ -283,6 +324,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "cyclotron": "https://github.com/AnthusAI/Cyclotron/releases/download/ui-v0.2.1/cyclotron-0.2.1.tgz",
+    "esbuild": "^0.28.2",
     "gray-matter": "^4.0.3",
     "gsap": "^3.15.0",
     "katex": "^0.17.0",
@@ -293,6 +336,7 @@
     "streamdown": "^2.5.0",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.0",
+    "tsx": "^4.23.15",
     "tw-animate-css": "^1.4.0",
     "use-stick-to-bottom": "^1.1.4",
     "yaml": "^2.9.0",

package/renderers/pretext/article-page.tsx

@@ -9,6 +9,7 @@ import { SITE_BRAND } from "../../lib/site-brand";
 import { ArticleVideoFigure } from "../../components/article-video";
 import { PictogramFigure as GenericPictogramFigure } from "../../components/pictogram-figure";
 import { PresentationFooter } from "../../components/presentation-footer";
+import { RhythmArticlePage } from "./rhythm-article-page";
 
 const PictogramFigure = SITE_BRAND.components?.PictogramFigure ?? GenericPictogramFigure;
 
@@ -16,7 +17,24 @@ export type { ArticlePageEditionFooter };
 
 type ArticlePageViewProps = RenderArticleProps;
 
-export function ArticlePageView({ article, backHref, backLabel = SITE_BRAND.backToHomeLabel, editionFooter, editionDate }: ArticlePageViewProps) {
+export function ArticlePageView({ article, backHref, backLabel = SITE_BRAND.backToHomeLabel, editionFooter, editionDate, videoScript = null }: ArticlePageViewProps) {
+  if (SITE_BRAND.blogLayout === "rhythm") {
+    return (
+      <RhythmArticlePage
+        body={article.body}
+        deck={article.deck}
+        editionDate={editionDate}
+        editionFooter={editionFooter}
+        headline={article.headline}
+        image={article.image ?? null}
+        section={article.section}
+        slug={article.slug}
+        video={article.video ?? null}
+        videoScript={videoScript}
+      />
+    );
+  }
+
   const articleDate = editionDate ? formatArticleDate(editionDate) : null;
 
   return (
@@ -55,9 +73,27 @@ export function ArticlePageView({ article, backHref, backLabel = SITE_BRAND.back
 
 type ItemPageViewProps = RenderItemProps;
 
-export function ItemPageView({ item, backHref, backLabel = "Back to edition", editionFooter, editionDate }: ItemPageViewProps) {
+export function ItemPageView({ item, backHref, backLabel = "Back to edition", editionFooter, editionDate, videoScript = null }: ItemPageViewProps) {
   if (item.type === "article") {
-    return <ArticlePageView article={item} backHref={backHref} backLabel={backLabel} editionFooter={editionFooter} editionDate={editionDate} />;
+    return <ArticlePageView article={item} backHref={backHref} backLabel={backLabel} editionFooter={editionFooter} editionDate={editionDate} videoScript={videoScript} />;
+  }
+
+  if (SITE_BRAND.blogLayout === "rhythm") {
+    return (
+      <RhythmArticlePage
+        body={item.body ?? []}
+        deck={item.deck}
+        editionDate={editionDate}
+        editionFooter={editionFooter}
+        headline={item.title}
+        image={item.image ?? null}
+        itemType={item.type}
+        section={item.section ?? item.type}
+        slug={item.slug}
+        video={getPublicationItemVideoAsset(item) ?? null}
+        videoScript={videoScript}
+      />
+    );
   }
 
   const itemDate = editionDate ? formatArticleDate(editionDate) : null;

package/renderers/pretext/presentation-shared.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import type { CSSProperties, MouseEvent as ReactMouseEvent, RefObject } from "react";
+import { useEffect, useState } from "react";
+import type { EditionSection } from "../../lib/content-types";
+import { truncateWords } from "../../lib/excerpts";
+import type { PresentationFooterEntry } from "../../lib/presentation-footer";
+import type { PublicationItem } from "../../lib/publication-items";
+import type { TextLine } from "../../lib/pretext-layout";
+
+export type PresentationItemMode = "blog" | "magazine" | "magazine-feature";
+
+export function MeasuredPresentationLines({ lines }: { lines: TextLine[] }) {
+  return (
+    <div className="presentation-measured-lines">
+      {lines.map((line, index) => (
+        <span
+          className="presentation-measured-line"
+          key={`${index}-${line.text}`}
+          style={{
+            "--line-font-family": line.fontFamily,
+            "--line-font-size": `${line.fontSize}px`,
+            "--line-height": `${line.lineHeight}px`,
+            "--line-paint-height": `${line.paintHeight}px`,
+            left: line.x,
+            top: line.y,
+          } as CSSProperties}
+        >
+          {line.text}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export function useMeasuredWidth(ref: RefObject<HTMLElement | null>): number {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const update = () => setWidth(Math.max(1, Math.floor(node.getBoundingClientRect().width)));
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [ref]);
+  return width;
+}
+
+export function usePresentationTargetScroll(targetSection: EditionSection | undefined) {
+  useEffect(() => {
+    const scrollToCurrentTarget = () => {
+      const hashTarget = parseItemAnchorHash(window.location.hash);
+      const targetId = hashTarget ?? (targetSection ? getSectionAnchorId(targetSection.key) : null);
+      if (!targetId) return;
+      document.getElementById(targetId)?.scrollIntoView({ block: "start" });
+    };
+    requestAnimationFrame(scrollToCurrentTarget);
+    window.addEventListener("hashchange", scrollToCurrentTarget);
+    return () => window.removeEventListener("hashchange", scrollToCurrentTarget);
+  }, [targetSection]);
+}
+
+export function getSectionAnchorId(sectionKey: string): string {
+  return `section-${sectionKey}`;
+}
+
+export function getPresentationTitle(item: PublicationItem): string {
+  return item.type === "article" ? item.headline : item.title;
+}
+
+export function getPresentationBodyText(item: PublicationItem, mode: PresentationItemMode): string {
+  const body = item.type === "article" ? item.body.join("\n\n") : (item.body ?? []).join("\n\n");
+  if (mode !== "blog") return body;
+  const excerpt = String(item.excerpt ?? "").trim();
+  if (excerpt) return excerpt;
+  return truncateWords(body, 80);
+}
+
+export function parseItemAnchorHash(hash: string): string | null {
+  if (!hash) return null;
+  try {
+    const value = decodeURIComponent(hash.slice(1)).trim();
+    return /^[a-z0-9][a-z0-9-]*$/i.test(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+export function getBlogFooterSectionHref(entry: PresentationFooterEntry, editionBasePath?: string): string {
+  const anchor = `#${getSectionAnchorId(entry.sectionKey)}`;
+  return editionBasePath ? `${editionBasePath}${anchor}` : anchor;
+}
+
+export function handleBlogFooterSectionClick(
+  event: ReactMouseEvent<HTMLAnchorElement>,
+  entry: PresentationFooterEntry,
+  href: string,
+) {
+  event.preventDefault();
+  window.history.pushState(null, "", href);
+  document.getElementById(getSectionAnchorId(entry.sectionKey))?.scrollIntoView({ block: "start" });
+}
+
+export function getPresentationItemRole(mode: PresentationItemMode, index?: number): "lead" | "secondary" {
+  if (mode === "magazine-feature") return "lead";
+  if (mode === "blog" && index === 0) return "lead";
+  return "secondary";
+}

package/renderers/pretext/presentation-shell.tsx

@@ -23,6 +23,18 @@ import { Newspaper } from "../../components/newspaper";
 import { PictogramFigure as GenericPictogramFigure } from "../../components/pictogram-figure";
 import { PresentationFooter } from "../../components/presentation-footer";
 import { readLocalReaderSettings, resolveReaderSettings, subscribeReaderSettingsChanges } from "../../components/reader-settings";
+import { RhythmBlogPresentation } from "./rhythm-blog-presentation";
+import {
+  getBlogFooterSectionHref,
+  getPresentationBodyText,
+  getPresentationItemRole,
+  getPresentationTitle,
+  getSectionAnchorId,
+  handleBlogFooterSectionClick,
+  MeasuredPresentationLines,
+  useMeasuredWidth,
+  usePresentationTargetScroll,
+} from "./presentation-shared";
 
 const BlogPageBackground = SITE_BRAND.components?.BlogPageBackground ?? GenericBlogPageBackground;
 const PictogramFigure = SITE_BRAND.components?.PictogramFigure ?? GenericPictogramFigure;
@@ -94,7 +106,9 @@ export function PresentationShell({
 
   return (
     <PresentationFrame>
-      {activePresentation === "blog" ? (
+      {activePresentation === "blog" && SITE_BRAND.blogLayout === "rhythm" ? (
+        <RhythmBlogPresentation {...presentationProps} />
+      ) : activePresentation === "blog" ? (
         <BlogPresentation {...presentationProps} />
       ) : (
         <MagazinePresentation {...presentationProps} />
@@ -340,67 +354,6 @@ function PresentationItem({
   );
 }
 
-function getPresentationItemRole(mode: "blog" | "magazine" | "magazine-feature", index?: number): "lead" | "secondary" {
-  if (mode === "magazine-feature") return "lead";
-  if (mode === "blog" && index === 0) return "lead";
-  return "secondary";
-}
-
-function MeasuredPresentationLines({ lines }: { lines: TextLine[] }) {
-  return (
-    <div className="presentation-measured-lines">
-      {lines.map((line, index) => (
-        <span
-          className="presentation-measured-line"
-          key={`${index}-${line.text}`}
-          style={{
-            "--line-font-family": line.fontFamily,
-            "--line-font-size": `${line.fontSize}px`,
-            "--line-height": `${line.lineHeight}px`,
-            "--line-paint-height": `${line.paintHeight}px`,
-            left: line.x,
-            top: line.y,
-          } as CSSProperties}
-        >
-          {line.text}
-        </span>
-      ))}
-    </div>
-  );
-}
-
-function useMeasuredWidth(ref: RefObject<HTMLElement | null>): number {
-  const [width, setWidth] = useState(0);
-  useEffect(() => {
-    const node = ref.current;
-    if (!node) return;
-    const update = () => setWidth(Math.max(1, Math.floor(node.getBoundingClientRect().width)));
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(node);
-    window.addEventListener("resize", update);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("resize", update);
-    };
-  }, [ref]);
-  return width;
-}
-
-function usePresentationTargetScroll(targetSection: EditionSection | undefined) {
-  useEffect(() => {
-    const scrollToCurrentTarget = () => {
-      const hashTarget = parseItemAnchorHash(window.location.hash);
-      const targetId = hashTarget ?? (targetSection ? getSectionAnchorId(targetSection.key) : null);
-      if (!targetId) return;
-      document.getElementById(targetId)?.scrollIntoView({ block: "start" });
-    };
-    requestAnimationFrame(scrollToCurrentTarget);
-    window.addEventListener("hashchange", scrollToCurrentTarget);
-    return () => window.removeEventListener("hashchange", scrollToCurrentTarget);
-  }, [targetSection]);
-}
-
 function getSectionHref(content: EditionContent, section: EditionSection, editionBasePath?: string): string {
   if (SITE_BRAND.sectionLinkStrategy === "anchor") {
     const anchor = `#${getSectionAnchorId(section.key)}`;
@@ -411,37 +364,11 @@ function getSectionHref(content: EditionContent, section: EditionSection, editio
   return datedPath.startsWith("//") ? `#${getSectionAnchorId(section.key)}` : datedPath;
 }
 
-function getSectionAnchorId(sectionKey: string): string {
-  return `section-${sectionKey}`;
-}
-
 function getMeasuredTextHeight(lines: TextLine[]): number {
   const last = lines[lines.length - 1];
   return last ? last.y + last.paintHeight : 0;
 }
 
-function getPresentationTitle(item: PublicationItem): string {
-  return item.type === "article" ? item.headline : item.title;
-}
-
-function getPresentationBodyText(item: PublicationItem, mode: "blog" | "magazine" | "magazine-feature"): string {
-  const body = item.type === "article" ? item.body.join("\n\n") : (item.body ?? []).join("\n\n");
-  if (mode !== "blog") return body;
-  const excerpt = String(item.excerpt ?? "").trim();
-  if (excerpt) return excerpt;
-  return truncateWords(body, 80);
-}
-
-function parseItemAnchorHash(hash: string): string | null {
-  if (!hash) return null;
-  try {
-    const value = decodeURIComponent(hash.slice(1)).trim();
-    return /^[a-z0-9][a-z0-9-]*$/i.test(value) ? value : null;
-  } catch {
-    return null;
-  }
-}
-
 function formatMastheadDate(value: string): string {
   const normalized = value?.trim();
   if (!normalized) return value;
@@ -454,17 +381,3 @@ function formatMastheadDate(value: string): string {
   }).format(date);
 }
 
-function getBlogFooterSectionHref(entry: PresentationFooterEntry, editionBasePath?: string): string {
-  const anchor = `#${getSectionAnchorId(entry.sectionKey)}`;
-  return editionBasePath ? `${editionBasePath}${anchor}` : anchor;
-}
-
-function handleBlogFooterSectionClick(
-  event: ReactMouseEvent<HTMLAnchorElement>,
-  entry: PresentationFooterEntry,
-  href: string,
-) {
-  event.preventDefault();
-  window.history.pushState(null, "", href);
-  document.getElementById(getSectionAnchorId(entry.sectionKey))?.scrollIntoView({ block: "start" });
-}