@anthusai/papyrus 1.0.0-next.2 → 1.0.0-next.20

package/renderers/pretext/rhythm-article-page.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState, type RefObject } from "react";
+import type { ArticleImage, ArticleVideoAsset } from "../../lib/articles";
+import { solveFeaturedFloatGeometry } from "../../lib/blog-feature-solver";
+import type { ArticlePageEditionFooter } from "../../lib/renderer";
+import { SITE_BRAND } from "../../lib/site-brand";
+import type { VideoScriptRef } from "../../lib/video-script";
+import { ArticleVideoFigure } from "../../components/article-video";
+import { BlogPageBackground as GenericBlogPageBackground } from "../../components/blog-page-background";
+import { PictogramFigure as GenericPictogramFigure } from "../../components/pictogram-figure";
+import { PresentationFooter } from "../../components/presentation-footer";
+import { PresentationHeader } from "../../components/presentation-header";
+import { useBlogHeaderObstacles } from "../../components/use-blog-header-obstacles";
+import { useRhythmOverlay } from "../../components/use-rhythm-overlay";
+import { BLOG_RHYTHM, getFeaturedLayoutStyle, getRhythmShellStyle } from "./rhythm-shell-style";
+
+const BlogPageBackground = SITE_BRAND.components?.BlogPageBackground ?? GenericBlogPageBackground;
+const PictogramFigure = SITE_BRAND.components?.PictogramFigure ?? GenericPictogramFigure;
+
+export type RhythmArticlePageProps = {
+  body: string[];
+  deck?: string;
+  editionDate?: string;
+  editionFooter?: ArticlePageEditionFooter;
+  headline: string;
+  image: ArticleImage | null;
+  itemType?: string;
+  section: string;
+  slug: string;
+  video: ArticleVideoAsset | null;
+  videoScript: VideoScriptRef | null;
+};
+
+export function RhythmArticlePage({
+  body,
+  deck,
+  editionDate,
+  editionFooter,
+  headline,
+  image,
+  itemType,
+  section,
+  slug,
+  video,
+  videoScript,
+}: RhythmArticlePageProps) {
+  const articleRef = useRef<HTMLElement | null>(null);
+  const pageRef = useRef<HTMLElement | null>(null);
+  const containerWidth = useMeasuredWidth(articleRef);
+  const viewportWidth = useViewportWidth();
+  const showRhythmOverlay = useRhythmOverlay();
+  const headerObstacles = useBlogHeaderObstacles(pageRef, BLOG_RHYTHM.paintBuffer);
+  const floatGeometry = useMemo(() => {
+    if (!image || !containerWidth) return null;
+    return solveFeaturedFloatGeometry({
+      containerWidth,
+      viewportWidth,
+      rhythm: BLOG_RHYTHM,
+      imageAsset: image,
+      itemIndex: 0,
+    });
+  }, [containerWidth, image, viewportWidth]);
+
+  const hasImage = Boolean(image);
+  const articleClassName = hasImage ? "article-page article-float-grid" : "article-page";
+
+  return (
+    <main
+      className={`${editionFooter ? "article-shell article-shell--edition" : "article-shell"} blog-rhythm-shell`}
+      data-rhythm-overlay={showRhythmOverlay ? "true" : "false"}
+      ref={pageRef}
+      style={getRhythmShellStyle(BLOG_RHYTHM)}
+    >
+      <BlogPageBackground headerObstacles={headerObstacles} pageRef={pageRef} rhythm={BLOG_RHYTHM} />
+      <PresentationHeader
+        editionBasePath={editionFooter?.editionBasePath}
+        editionDate={editionDate}
+        sections={editionFooter?.sections}
+      />
+      <article
+        className={articleClassName}
+        data-feature-layout={hasImage ? (floatGeometry?.mode ?? "float") : undefined}
+        data-has-image={hasImage ? "true" : "false"}
+        data-item-type={itemType}
+        ref={articleRef}
+        style={floatGeometry ? getFeaturedLayoutStyle(floatGeometry) : undefined}
+      >
+        {video ? (
+          <div className="article-page__hero-video">
+            <ArticleVideoFigure slug={slug} video={video} videoScript={videoScript} />
+          </div>
+        ) : null}
+        <header className={hasImage ? "article-float-grid__header" : undefined}>
+          <p className="story-label">{section}</p>
+          <h1>{headline}</h1>
+          {deck ? <p className="article-deck">{deck}</p> : null}
+        </header>
+        {image ? (
+          <div className="presentation-item__media article-float-grid__media">
+            <PictogramFigure
+              alt={image.alt}
+              caption={image.caption}
+              credit={image.credit}
+              figureClassName="presentation-item__image"
+              frameHeight={floatGeometry?.imageHeight}
+              frameWidth={floatGeometry?.imageWidth}
+              height={760}
+              layout={image.layout}
+              priority
+              sizes="(max-width: 900px) 100vw, 760px"
+              slug={slug}
+              src={image.src}
+              themeVariants={image.themeVariants}
+              width={1200}
+            />
+          </div>
+        ) : null}
+        <div className={hasImage ? "article-body article-float-grid__body" : "article-body"}>
+          {body.map((paragraph) => (
+            <p key={paragraph}>{paragraph}</p>
+          ))}
+        </div>
+      </article>
+      {editionFooter ? (
+        <PresentationFooter
+          editionBasePath={editionFooter.editionBasePath}
+          entries={editionFooter.entries}
+          resolveSectionHref={(entry) => `${editionFooter.editionBasePath}#section-${entry.sectionKey}`}
+          subtitle={editionFooter.subtitle}
+          title={editionFooter.title}
+        />
+      ) : null}
+    </main>
+  );
+}
+
+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 useViewportWidth(): number {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const update = () => setWidth(Math.max(1, Math.floor(window.innerWidth)));
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+  return width;
+}

package/renderers/pretext/rhythm-blog-presentation.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { solveFeaturedItem } from "../../lib/blog-feature-solver";
+import { createDefaultBlogTextStyle, getMeasuredTextHeight, reserveRhythmRows } from "../../lib/blog-rhythm";
+import type { ArticleVideoAsset } from "../../lib/articles";
+import type { EditionContent, EditionSection } from "../../lib/content-types";
+import { getEditionSectionItems } from "../../lib/edition-sections";
+import { layoutAllTextLines, prepareWithSegments } from "../../lib/pretext-layout";
+import { buildPresentationFooterEntries } from "../../lib/presentation-footer";
+import {
+  getPublicationItemImageAssets,
+  getPublicationItemVideoAsset,
+  type PublicationItem,
+} from "../../lib/publication-items";
+import { SITE_BRAND } from "../../lib/site-brand";
+import type { VideoScriptRef } from "../../lib/video-script";
+import { ArticleVideoFigure } from "../../components/article-video";
+import { BlogPageBackground as GenericBlogPageBackground } from "../../components/blog-page-background";
+import { PictogramFigure as GenericPictogramFigure } from "../../components/pictogram-figure";
+import { PresentationFooter } from "../../components/presentation-footer";
+import { getSectionAnchorId, PresentationHeader } from "../../components/presentation-header";
+import { PresentationRhythmHRule } from "../../components/presentation-rhythm-hrule";
+import { useBlogHeaderObstacles } from "../../components/use-blog-header-obstacles";
+import { useBrandFontsReadyVersion } from "../../components/use-brand-fonts-ready";
+import { useRhythmOverlay } from "../../components/use-rhythm-overlay";
+import {
+  getBlogFooterSectionHref,
+  getPresentationBodyText,
+  getPresentationItemRole,
+  getPresentationTitle,
+  handleBlogFooterSectionClick,
+  MeasuredPresentationLines,
+  useMeasuredWidth,
+  usePresentationTargetScroll,
+} from "./presentation-shared";
+import { BLOG_RHYTHM, getFeaturedLayoutStyle, getRhythmShellStyle } from "./rhythm-shell-style";
+
+const BlogPageBackground = SITE_BRAND.components?.BlogPageBackground ?? GenericBlogPageBackground;
+const PictogramFigure = SITE_BRAND.components?.PictogramFigure ?? GenericPictogramFigure;
+const BLOG_TEXT_STYLE = createDefaultBlogTextStyle(SITE_BRAND.textFont);
+const EDITION_OVERVIEW_VIDEO_KEY = "edition-overview";
+const SECONDARY_PAIR_ITEM_INDEX = 2;
+
+type PapyrusTestWindow = Window & typeof globalThis & {
+  __PAPYRUS_SCENARIO__?: string;
+};
+
+export function RhythmBlogPresentation({
+  content,
+  editionBasePath,
+  targetSection,
+}: {
+  content: EditionContent;
+  editionBasePath?: string;
+  targetSection?: EditionSection;
+}) {
+  const footerEntries = useMemo(() => buildPresentationFooterEntries(content), [content]);
+  const footerSubtitle = SITE_BRAND.id === "papyrus" ? (content.description?.trim() || "Inside Papyrus") : SITE_BRAND.mastheadSubtitle;
+  const pageRef = useRef<HTMLElement | null>(null);
+  const showRhythmOverlay = useRhythmOverlay();
+  const headerObstacles = useBlogHeaderObstacles(pageRef, BLOG_RHYTHM.paintBuffer);
+  usePresentationTargetScroll(targetSection);
+  useEffect(() => {
+    (window as PapyrusTestWindow).__PAPYRUS_SCENARIO__ = content.scenarioId;
+    return () => {
+      delete (window as PapyrusTestWindow).__PAPYRUS_SCENARIO__;
+    };
+  }, [content.scenarioId]);
+
+  return (
+    <main
+      className="presentation-page presentation-page--blog blog-rhythm-shell"
+      data-presentation-engine="blog"
+      data-rhythm-overlay={showRhythmOverlay ? "true" : "false"}
+      ref={pageRef}
+      style={getRhythmShellStyle(BLOG_RHYTHM)}
+    >
+      <BlogPageBackground headerObstacles={headerObstacles} pageRef={pageRef} rhythm={BLOG_RHYTHM} />
+      <PresentationHeader
+        description={content.description}
+        editionBasePath={editionBasePath}
+        editionDate={content.editionDate}
+        sections={content.sections}
+        title={content.title}
+      />
+      <div className="blog-sections">
+        {content.sections.map((section, sectionIndex) => (
+          <section className="blog-section" data-edition-section={section.key} id={getSectionAnchorId(section.key)} key={section.key}>
+            {sectionIndex === 0 && content.editionVideo ? (
+              <EditionOverviewVideo
+                editionVideo={content.editionVideo}
+                videoScript={content.videoScripts?.[EDITION_OVERVIEW_VIDEO_KEY] ?? null}
+              />
+            ) : null}
+            <header className="presentation-section-header">
+              <div className="presentation-section-header__band">
+                <p>{section.label}</p>
+              </div>
+              {section.description ? <span>{section.description}</span> : null}
+            </header>
+            {getEditionSectionItems(section, content.items).flatMap((item, index) => [
+              ...(index > 0
+                ? [
+                    <PresentationRhythmHRule
+                      hideInSecondaryPair={index === SECONDARY_PAIR_ITEM_INDEX}
+                      key={`hrule-before-${item.slug}`}
+                    />,
+                  ]
+                : []),
+              <RhythmPresentationItem
+                editionBasePath={editionBasePath}
+                index={index}
+                item={item}
+                key={item.slug}
+                videoScript={content.videoScripts?.[item.slug] ?? null}
+              />,
+            ])}
+          </section>
+        ))}
+      </div>
+      <PresentationFooter
+        editionBasePath={editionBasePath}
+        entries={footerEntries}
+        onSectionClick={handleBlogFooterSectionClick}
+        resolveSectionHref={(entry) => getBlogFooterSectionHref(entry, editionBasePath)}
+        subtitle={SITE_BRAND.footerSubtitleOverride ?? footerSubtitle}
+        title={SITE_BRAND.footerTitle}
+      />
+    </main>
+  );
+}
+
+function EditionOverviewVideo({
+  editionVideo,
+  videoScript,
+}: {
+  editionVideo: ArticleVideoAsset;
+  videoScript: VideoScriptRef | null;
+}) {
+  return (
+    <section className="presentation-edition-video" aria-label={editionVideo.alt}>
+      <ArticleVideoFigure
+        figureClassName="presentation-edition-video__figure article-video"
+        slug={EDITION_OVERVIEW_VIDEO_KEY}
+        video={editionVideo}
+        videoScript={videoScript}
+      />
+    </section>
+  );
+}
+
+function RhythmPresentationItem({
+  editionBasePath,
+  index,
+  item,
+  videoScript,
+}: {
+  editionBasePath?: string;
+  index: number;
+  item: PublicationItem;
+  videoScript: VideoScriptRef | null;
+}) {
+  const articleRef = useRef<HTMLElement | null>(null);
+  const frameRef = useRef<HTMLDivElement | null>(null);
+  const containerWidth = useMeasuredWidth(articleRef);
+  const frameWidth = useMeasuredWidth(frameRef);
+  const viewportWidth = useViewportWidth();
+  const fontsReadyVersion = useBrandFontsReadyVersion();
+  const textStyle = useMemo(() => ({ ...BLOG_TEXT_STYLE, fontsReadyVersion }), [fontsReadyVersion]);
+  const image = getPublicationItemImageAssets(item)[0];
+  const video = getPublicationItemVideoAsset(item);
+  const text = getPresentationBodyText(item, "blog");
+  const hasImage = Boolean(image);
+  const featuredLayout = useMemo(() => {
+    if (!hasImage || !containerWidth || !image) return null;
+    return solveFeaturedItem({
+      text,
+      containerWidth,
+      viewportWidth,
+      rhythm: BLOG_RHYTHM,
+      textStyle,
+      imageAsset: image,
+      itemIndex: index,
+    });
+  }, [containerWidth, hasImage, image, index, text, textStyle, viewportWidth]);
+  const lines = useMemo(() => {
+    if (featuredLayout) return featuredLayout.textLines;
+    const maxWidth = frameWidth || containerWidth;
+    if (!maxWidth || !text.trim()) return [];
+    return layoutAllTextLines({
+      prepared: prepareWithSegments(text, `${textStyle.fontSize}px ${textStyle.fontFamily}`, { whiteSpace: "pre-wrap" }),
+      maxWidth,
+      ...textStyle,
+    });
+  }, [containerWidth, featuredLayout, frameWidth, text, textStyle]);
+  const textHeight = featuredLayout?.textFrameHeight ?? reserveRhythmRows(getMeasuredTextHeight(lines), BLOG_RHYTHM);
+  const layoutMode = featuredLayout?.mode ?? "stacked";
+  const directHref = editionBasePath ? `${editionBasePath}/${encodeURIComponent(item.slug)}` : `/articles/${encodeURIComponent(item.slug)}`;
+
+  return (
+    <article
+      className="presentation-item presentation-item--blog"
+      data-feature-layout={hasImage ? layoutMode : undefined}
+      data-has-image={hasImage ? "true" : "false"}
+      data-has-video={video ? "true" : "false"}
+      data-item-id={item.slug}
+      data-item-index={index}
+      data-item-role={getPresentationItemRole("blog", index)}
+      data-item-type={item.type}
+      id={item.slug}
+      ref={articleRef}
+      style={featuredLayout ? getFeaturedLayoutStyle(featuredLayout) : undefined}
+    >
+      <div className="presentation-item__copy">
+        <header className="presentation-item__header">
+          <p>{item.section ?? "General"}</p>
+          <h2>
+            <Link href={directHref}>{getPresentationTitle(item)}</Link>
+          </h2>
+          {item.deck ? <span>{item.deck}</span> : null}
+        </header>
+        <div className="presentation-item__body">
+          {image ? (
+            <div className="presentation-item__media">
+              <PictogramFigure
+                alt={image.alt}
+                caption={image.caption}
+                credit={image.credit}
+                figureClassName="presentation-item__image"
+                frameHeight={featuredLayout?.imageHeight}
+                frameWidth={featuredLayout?.imageWidth}
+                height={760}
+                layout={image.layout}
+                sizes="(max-width: 900px) 100vw, 760px"
+                slug={item.slug}
+                src={image.src}
+                themeVariants={image.themeVariants}
+                width={1200}
+              />
+            </div>
+          ) : null}
+          <div
+            className="presentation-item__text-frame"
+            data-layout-mode={layoutMode}
+            ref={frameRef}
+            style={{ height: textHeight }}
+          >
+            <MeasuredPresentationLines lines={lines} />
+          </div>
+          <Link className="presentation-item__cta" href={directHref}>
+            Read Article
+          </Link>
+        </div>
+      </div>
+      {video ? (
+        <div className="presentation-item__video">
+          <ArticleVideoFigure
+            figureClassName="presentation-item__video-figure article-video"
+            slug={item.slug}
+            video={video}
+            videoScript={videoScript}
+          />
+        </div>
+      ) : null}
+    </article>
+  );
+}
+
+function useViewportWidth(): number {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const update = () => setWidth(Math.max(1, Math.floor(window.innerWidth)));
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+  return width;
+}

package/renderers/pretext/rhythm-shell-style.ts

@@ -0,0 +1,35 @@
+import type { CSSProperties } from "react";
+import {
+  BLOG_COPY_ROW_MULTIPLE,
+  createDefaultBlogVerticalRhythm,
+  type VerticalRhythm,
+} from "../../lib/blog-rhythm";
+
+export const BLOG_RHYTHM: VerticalRhythm = createDefaultBlogVerticalRhythm();
+
+export function getRhythmShellStyle(rhythm: VerticalRhythm): CSSProperties {
+  return {
+    "--blog-rhythm": `${rhythm.rowHeight / BLOG_COPY_ROW_MULTIPLE}px`,
+    "--blog-row-height": `${rhythm.rowHeight}px`,
+    "--blog-paint-buffer": `${rhythm.paintBuffer}px`,
+    "--blog-paint-height": `${rhythm.paintHeight}px`,
+  } as CSSProperties;
+}
+
+export function getFeaturedLayoutStyle(layout: {
+  copyWidth: number;
+  imageWidth: number;
+  imageHeight: number;
+  gap: number;
+  mediaHeight?: number;
+  textFrameHeight?: number;
+}): CSSProperties {
+  return {
+    "--feature-copy-width": `${layout.copyWidth}px`,
+    "--feature-image-width": `${layout.imageWidth}px`,
+    "--feature-image-height": `${layout.imageHeight}px`,
+    "--feature-layout-gap": `${layout.gap}px`,
+    ...(layout.mediaHeight === undefined ? {} : { "--feature-media-height": `${layout.mediaHeight}px` }),
+    ...(layout.textFrameHeight === undefined ? {} : { "--feature-text-frame-height": `${layout.textFrameHeight}px` }),
+  } as CSSProperties;
+}

package/routes.manifest.json

@@ -1,8 +1,19 @@
 {
-  "version": "1.0.0-next.2",
+  "version": "1.0.0-next.20",
   "routes": [
+    {
+      "file": "app/%5F_preview/[[...path]]/route.ts",
+      "hasDefault": false,
+      "exports": [
+        "GET"
+      ],
+      "config": {
+        "dynamic": "\"force-dynamic\""
+      }
+    },
     {
       "file": "app/[year]/[month]/[day]/[articleSlug]/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [
         "generateMetadata"
@@ -13,6 +24,7 @@
     },
     {
       "file": "app/[year]/[month]/[day]/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [
         "generateStaticParams"
@@ -23,6 +35,7 @@
     },
     {
       "file": "app/[year]/[month]/[day]/page/[pageNumber]/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [],
       "config": {
@@ -31,6 +44,7 @@
     },
     {
       "file": "app/[year]/[month]/[day]/section/[sectionKey]/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [],
       "config": {
@@ -69,6 +83,7 @@
     },
     {
       "file": "app/archive/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [],
       "config": {
@@ -77,6 +92,7 @@
     },
     {
       "file": "app/articles/[slug]/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [
         "generateMetadata",
@@ -110,6 +126,22 @@
         "dynamic": "\"force-dynamic\""
       }
     },
+    {
+      "file": "app/newsroom/articles/[id]/page.tsx",
+      "hasDefault": true,
+      "exports": [],
+      "config": {
+        "dynamic": "\"force-dynamic\""
+      }
+    },
+    {
+      "file": "app/newsroom/articles/page.tsx",
+      "hasDefault": true,
+      "exports": [],
+      "config": {
+        "dynamic": "\"force-dynamic\""
+      }
+    },
     {
       "file": "app/newsroom/forum/[threadId]/page.tsx",
       "hasDefault": true,
@@ -158,6 +190,7 @@
     },
     {
       "file": "app/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [],
       "config": {
@@ -166,6 +199,7 @@
     },
     {
       "file": "app/settings/page.tsx",
+      "reader": true,
       "hasDefault": true,
       "exports": [
         "metadata"
@@ -177,6 +211,7 @@
   ],
   "middleware": {
     "file": "middleware.ts",
-    "matcher": "[\"/((?!_next/static|_next/image|favicon.ico|icon).*)\"]"
+    "matcher": "[\"/((?!_next/static|_next/image|favicon.ico|icon).*)\"]",
+    "runtime": "nodejs"
   }
 }

package/scripts/videoml/build-browser-bundle.mjs

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { bundleVideoEntries, loadBrandVideoSlot, standardEntryPath } from "./bundle-common.mjs";
+
+export async function buildBrowserBundle(projectRoot = process.cwd(), env = process.env) {
+  const { brandId, bundleEntry } = await loadBrandVideoSlot(projectRoot, env);
+  const result = await bundleVideoEntries({
+    projectRoot,
+    entries: [standardEntryPath, bundleEntry],
+    outfile: path.join(projectRoot, "public/videoml/browser-bundle.js"),
+  });
+  console.error(`VideoML browser bundle for '${brandId}': ${result.outfile} (${result.size} bytes)`);
+  return result;
+}
+
+if (process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  buildBrowserBundle().catch((error) => {
+    console.error(error.message);
+    process.exit(1);
+  });
+}

package/scripts/videoml/build-preview-bundle.mjs

@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  bundleVideoEntries,
+  loadBrandVideoSlot,
+  previewEntryPath,
+  previewHtmlTemplatePath,
+  standardEntryPath,
+} from "./bundle-common.mjs";
+
+const REACT_18_VERSION = "18.3.1";
+const VENDOR_FILES = {
+  "react.production.min.js": `https://unpkg.com/react@${REACT_18_VERSION}/umd/react.production.min.js`,
+  "react-dom.production.min.js": `https://unpkg.com/react-dom@${REACT_18_VERSION}/umd/react-dom.production.min.js`,
+};
+
+async function ensureReactVendor(outDirectory) {
+  const vendorDirectory = path.join(outDirectory, "vendor");
+  fs.mkdirSync(vendorDirectory, { recursive: true });
+  for (const [name, url] of Object.entries(VENDOR_FILES)) {
+    const target = path.join(vendorDirectory, name);
+    if (fs.existsSync(target)) continue;
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`Failed to download ${url}: ${response.status} ${response.statusText}`);
+    fs.writeFileSync(target, Buffer.from(await response.arrayBuffer()));
+  }
+}
+
+export async function buildPreviewBundle(projectRoot = process.cwd(), env = process.env) {
+  const { brandId, bundleEntry } = await loadBrandVideoSlot(projectRoot, env);
+  const outDirectory = path.join(projectRoot, "public/videoml");
+  await ensureReactVendor(outDirectory);
+  fs.copyFileSync(previewHtmlTemplatePath, path.join(outDirectory, "preview.html"));
+  const result = await bundleVideoEntries({
+    projectRoot,
+    entries: [standardEntryPath, previewEntryPath, bundleEntry],
+    outfile: path.join(outDirectory, "preview-bundle.js"),
+  });
+  console.error(`VideoML preview bundle for '${brandId}': ${result.outfile} (${result.size} bytes)`);
+  return result;
+}
+
+if (process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  buildPreviewBundle().catch((error) => {
+    console.error(error.message);
+    process.exit(1);
+  });
+}