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

package/scripts/videoml/bundle-common.mjs

@@ -0,0 +1,129 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { createRequire } from "node:module";
+
+const scriptsDirectory = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+
+const OPTIONAL_DYNAMIC_IMPORTS_OF_VIDEOML = ["p5", "lottie-web", "animejs"];
+
+const REACT_GLOBALS_JSX_RUNTIME = `
+var React = window.React;
+function jsx(type, config, maybeKey) {
+  var props = config || {};
+  var key = maybeKey !== undefined ? maybeKey : props.key;
+  if (key !== undefined) {
+    props = Object.assign({}, props, { key: key });
+  }
+  return React.createElement(type, props);
+}
+exports.Fragment = React.Fragment;
+exports.jsx = jsx;
+exports.jsxs = jsx;
+`;
+
+const reactGlobalsPlugin = {
+  name: "react-globals",
+  setup(build) {
+    const globals = {
+      react: "module.exports = window.React",
+      "react-dom": "module.exports = window.ReactDOM",
+      "react-dom/client": "module.exports = window.ReactDOM",
+      "react/jsx-runtime": REACT_GLOBALS_JSX_RUNTIME,
+      "react/jsx-dev-runtime": REACT_GLOBALS_JSX_RUNTIME,
+    };
+    build.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, (args) =>
+      args.path in globals ? { path: args.path, namespace: "react-globals" } : undefined,
+    );
+    build.onLoad({ filter: /.*/, namespace: "react-globals" }, (args) => ({
+      contents: globals[args.path],
+      loader: "js",
+    }));
+  },
+};
+
+export function resolveSelectedBrandId(site, env) {
+  const requested = (env.PAPYRUS_SITE_BRAND ?? "").trim();
+  return requested || site.defaultBrand || "papyrus";
+}
+
+/**
+ * Loads the publication's `papyrus.config.ts` from the project root and returns the
+ * selected brand's `video` slot. Fails with a message naming the missing piece.
+ */
+export async function loadBrandVideoSlot(projectRoot, env = process.env) {
+  const configPath = path.join(projectRoot, "papyrus.config.ts");
+  if (!fs.existsSync(configPath)) {
+    throw new Error(`No papyrus.config.ts in ${projectRoot}. Run the VideoML bundle builder from the publication root.`);
+  }
+  const { tsImport } = await import("tsx/esm/api");
+  // Inside a Papyrus checkout, brand components import lib/site-brand, which imports this
+  // config: load site-brand first so the cycle resolves in the same order as in the app.
+  const checkoutSiteBrand = path.join(projectRoot, "lib/site-brand.ts");
+  if (fs.existsSync(checkoutSiteBrand)) await tsImport(pathToFileURL(checkoutSiteBrand).href, import.meta.url);
+  const loaded = await tsImport(pathToFileURL(configPath).href, import.meta.url);
+  const exported = loaded.default ?? loaded;
+  const site = exported.brands === undefined && exported.default ? exported.default : exported;
+  const brandId = resolveSelectedBrandId(site, env);
+  const brand = (site.brands ?? []).find((candidate) => candidate.id === brandId);
+  if (!brand) {
+    const registered = (site.brands ?? []).map((candidate) => candidate.id).join(", ") || "none";
+    throw new Error(`Brand '${brandId}' is not registered in papyrus.config.ts (registered: ${registered}).`);
+  }
+  if (!brand.video || typeof brand.video.bundleEntry !== "string" || !brand.video.bundleEntry) {
+    throw new Error(
+      `Brand '${brandId}' has no brand.video.bundleEntry in papyrus.config.ts. ` +
+        "Set brand.video = { bundleEntry: \"<path to a TSX module that registers the brand's VideoML scene components>\" }.",
+    );
+  }
+  const bundleEntry = path.resolve(projectRoot, brand.video.bundleEntry);
+  if (!fs.existsSync(bundleEntry)) {
+    throw new Error(`brand.video.bundleEntry for '${brandId}' does not exist: ${bundleEntry}`);
+  }
+  return { brandId, bundleEntry, video: brand.video };
+}
+
+function resolveEsbuild(projectRoot) {
+  for (const base of [projectRoot, scriptsDirectory]) {
+    try {
+      return require(require.resolve("esbuild", { paths: [base] }));
+    } catch {
+      continue;
+    }
+  }
+  throw new Error("esbuild not found. Install it in the publication (npm install --save-dev esbuild).");
+}
+
+/**
+ * Bundles [standard entry, optional extra entries, brand entry] into one IIFE.
+ * React comes from `window.React` / `window.ReactDOM` (the render shell loads React 18 UMD).
+ */
+export async function bundleVideoEntries({ projectRoot, entries, outfile }) {
+  const esbuild = resolveEsbuild(projectRoot);
+  fs.mkdirSync(path.dirname(outfile), { recursive: true });
+  const importLines = entries.map((entry) => `import ${JSON.stringify(entry)};`).join("\n");
+  await esbuild.build({
+    stdin: { contents: importLines, resolveDir: projectRoot, sourcefile: "papyrus-videoml-entry.ts", loader: "ts" },
+    bundle: true,
+    format: "iife",
+    platform: "browser",
+    jsx: "automatic",
+    outfile,
+    absWorkingDir: projectRoot,
+    nodePaths: [path.join(projectRoot, "node_modules")],
+    external: OPTIONAL_DYNAMIC_IMPORTS_OF_VIDEOML,
+    plugins: [reactGlobalsPlugin],
+    loader: { ".tsx": "tsx", ".ts": "ts" },
+    define: { "process.env.NODE_ENV": '"production"' },
+    sourcemap: true,
+    logLevel: "warning",
+  });
+  const size = fs.statSync(outfile).size;
+  if (size === 0) throw new Error(`VideoML bundle is empty: ${outfile}`);
+  return { outfile, size };
+}
+
+export const standardEntryPath = path.join(scriptsDirectory, "standard-entry.tsx");
+export const previewEntryPath = path.join(scriptsDirectory, "preview/preview-entry.tsx");
+export const previewHtmlTemplatePath = path.join(scriptsDirectory, "preview.html");

package/scripts/videoml/preview/preview-entry.tsx

@@ -0,0 +1,381 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ComposableRenderer, RendererProvider } from "@videoml/toolchain/renderer";
+import { dslToScriptData } from "@videoml/toolchain/shared";
+import { executeVomXml } from "@videoml/player";
+import { advanceScriptPreviewTime, computePreviewPlaybackState } from "./preview-timing";
+import { computePreviewStageFit } from "./preview-stage-fit";
+
+type PreviewTheme = "dark" | "light";
+type ScriptData = ReturnType<typeof dslToScriptData>;
+type PreviewRetheme = (xml: string, theme: PreviewTheme) => string;
+
+type PreviewMountOptions = {
+  xml: string;
+  theme?: PreviewTheme;
+  autoPlay?: boolean;
+  audioSrc?: string;
+};
+
+type PreviewPlayerProps = {
+  script: ScriptData;
+  width: number;
+  height: number;
+  autoPlay?: boolean;
+  audioSrc?: string;
+};
+
+let rethemeXml: PreviewRetheme = (xml) => xml;
+
+function registerPreviewRetheme(retheme: PreviewRetheme): void {
+  rethemeXml = retheme;
+}
+
+function scriptDuration(script: ScriptData): number {
+  const scenes = script.scenes ?? [];
+  if (!scenes.length) return 10;
+  const lastScene = scenes[scenes.length - 1];
+  return typeof lastScene.endSec === "number" && lastScene.endSec > 0 ? lastScene.endSec : 10;
+}
+
+function PreviewPlayer({ script, width, height, autoPlay = false, audioSrc }: PreviewPlayerProps) {
+  const [isPlaying, setIsPlaying] = useState(autoPlay);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [audioDuration, setAudioDuration] = useState<number | null>(null);
+  const [audioBlocked, setAudioBlocked] = useState(false);
+  const [audioProgressObserved, setAudioProgressObserved] = useState(false);
+  const [viewportSize, setViewportSize] = useState({ width, height });
+  const animationFrameRef = useRef<number | undefined>(undefined);
+  const lastTimestampRef = useRef<number | undefined>(undefined);
+  const currentTimeRef = useRef(0);
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const lastAudioTimeRef = useRef(0);
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const usedAudioClockRef = useRef(false);
+
+  const fps = script.fps ?? 30;
+  const scriptDerivedDuration = useMemo(() => scriptDuration(script), [script]);
+  const playbackState = useMemo(
+    () =>
+      computePreviewPlaybackState({
+        audioBlocked,
+        audioDuration,
+        audioProgressObserved,
+        audioSrc,
+        currentTime,
+        isPlaying,
+        scriptDerivedDuration,
+      }),
+    [audioBlocked, audioDuration, audioProgressObserved, audioSrc, currentTime, isPlaying, scriptDerivedDuration],
+  );
+  const { duration, hasAudioSource, useAudioClock, visualTime } = playbackState;
+
+  const currentFrame = Math.floor(visualTime * fps);
+  const sceneBackground = script.scenes?.[0]?.styles?.background;
+  const backgroundColor = typeof sceneBackground === "string" ? sceneBackground : "#000";
+  const fittedStage = useMemo(
+    () =>
+      computePreviewStageFit({
+        containerHeight: viewportSize.height,
+        containerWidth: viewportSize.width,
+        stageHeight: height,
+        stageWidth: width,
+      }),
+    [height, viewportSize.height, viewportSize.width, width],
+  );
+
+  const applyTime = useCallback(
+    (nextTime: number) => {
+      const clamped = Math.max(0, Math.min(nextTime, duration));
+      currentTimeRef.current = clamped;
+      setCurrentTime(clamped);
+    },
+    [duration],
+  );
+
+  const playAudio = useCallback(async () => {
+    const audio = audioRef.current;
+    if (!audio || !hasAudioSource) return true;
+    try {
+      await audio.play();
+      setAudioBlocked(false);
+      return true;
+    } catch {
+      setAudioBlocked(true);
+      return false;
+    }
+  }, [hasAudioSource]);
+
+  const pauseAudio = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio || !hasAudioSource) return;
+    audio.pause();
+  }, [hasAudioSource]);
+
+  const seekAudio = useCallback(
+    (nextTime: number) => {
+      const audio = audioRef.current;
+      if (!audio || !hasAudioSource) return;
+      try {
+        audio.currentTime = nextTime;
+      } catch {
+        return;
+      }
+    },
+    [hasAudioSource],
+  );
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    setAudioDuration(null);
+    setAudioProgressObserved(false);
+    setAudioBlocked(false);
+    lastAudioTimeRef.current = 0;
+    if (!audio || !hasAudioSource) return;
+
+    const onLoadedMetadata = () => {
+      if (Number.isFinite(audio.duration) && audio.duration > 0) {
+        setAudioDuration(audio.duration);
+      }
+    };
+    const markAudioProgress = () => {
+      if (!Number.isFinite(audio.currentTime)) return;
+      if (audio.currentTime > 0 || audio.currentTime !== lastAudioTimeRef.current) {
+        setAudioProgressObserved(true);
+        setAudioBlocked(false);
+      }
+      lastAudioTimeRef.current = audio.currentTime;
+    };
+    const onEnded = () => setIsPlaying(false);
+    const onError = () => {
+      setAudioBlocked(true);
+      setAudioProgressObserved(false);
+    };
+
+    audio.addEventListener("loadedmetadata", onLoadedMetadata);
+    audio.addEventListener("timeupdate", markAudioProgress);
+    audio.addEventListener("seeked", markAudioProgress);
+    audio.addEventListener("ended", onEnded);
+    audio.addEventListener("error", onError);
+    if (audio.readyState >= 1) onLoadedMetadata();
+
+    return () => {
+      audio.removeEventListener("loadedmetadata", onLoadedMetadata);
+      audio.removeEventListener("timeupdate", markAudioProgress);
+      audio.removeEventListener("seeked", markAudioProgress);
+      audio.removeEventListener("ended", onEnded);
+      audio.removeEventListener("error", onError);
+    };
+  }, [audioSrc, hasAudioSource]);
+
+  useEffect(() => {
+    if (!autoPlay || !hasAudioSource) return;
+    void playAudio();
+  }, [audioSrc, autoPlay, hasAudioSource, playAudio]);
+
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport || typeof ResizeObserver === "undefined") return;
+    const updateViewport = () => {
+      const rect = viewport.getBoundingClientRect();
+      const nextWidth = Math.round(rect.width);
+      const nextHeight = Math.round(rect.height);
+      setViewportSize((current) => {
+        if (current.width === nextWidth && current.height === nextHeight) return current;
+        return { width: nextWidth > 0 ? nextWidth : width, height: nextHeight > 0 ? nextHeight : height };
+      });
+    };
+    updateViewport();
+    const observer = new ResizeObserver(updateViewport);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, [height, width]);
+
+  useEffect(() => {
+    if (usedAudioClockRef.current && !useAudioClock) {
+      currentTimeRef.current = visualTime;
+      setCurrentTime(visualTime);
+    }
+    usedAudioClockRef.current = useAudioClock;
+  }, [useAudioClock, visualTime]);
+
+  useEffect(() => {
+    if (!isPlaying) {
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+      pauseAudio();
+      return;
+    }
+    if (hasAudioSource) void playAudio();
+
+    const tick = (timestamp: number) => {
+      if (!isPlaying) return;
+      if (useAudioClock) {
+        const audio = audioRef.current;
+        if (audio && Number.isFinite(audio.currentTime)) {
+          let nextTime = audio.currentTime;
+          if (nextTime >= duration && duration > 0) {
+            nextTime = 0;
+            audio.currentTime = 0;
+          }
+          applyTime(nextTime);
+        }
+      } else if (lastTimestampRef.current !== undefined) {
+        const delta = (timestamp - lastTimestampRef.current) / 1000;
+        applyTime(advanceScriptPreviewTime(currentTimeRef.current, delta, duration));
+      }
+      lastTimestampRef.current = timestamp;
+      animationFrameRef.current = requestAnimationFrame(tick);
+    };
+
+    lastTimestampRef.current = undefined;
+    animationFrameRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+    };
+  }, [applyTime, duration, hasAudioSource, isPlaying, pauseAudio, playAudio, useAudioClock]);
+
+  const startPlayback = useCallback(async () => {
+    if (hasAudioSource) await playAudio();
+    setIsPlaying(true);
+    lastTimestampRef.current = undefined;
+  }, [hasAudioSource, playAudio]);
+
+  const stopPlayback = useCallback(() => {
+    setIsPlaying(false);
+    lastTimestampRef.current = undefined;
+  }, []);
+
+  const handleSeek = useCallback(
+    (nextTime: number) => {
+      applyTime(nextTime);
+      seekAudio(nextTime);
+      lastTimestampRef.current = undefined;
+    },
+    [applyTime, seekAudio],
+  );
+
+  const lastBroadcastRef = useRef<{ currentTime: number; duration: number } | null>(null);
+  useEffect(() => {
+    if (typeof window === "undefined" || window.parent === window) return;
+    const roundedTime = Math.round(currentTime * 10) / 10;
+    const roundedDuration = Math.round(duration * 10) / 10;
+    const previous = lastBroadcastRef.current;
+    if (previous && previous.currentTime === roundedTime && previous.duration === roundedDuration) return;
+    lastBroadcastRef.current = { currentTime: roundedTime, duration: roundedDuration };
+    window.parent.postMessage({ kind: "papyrus-video-time", currentTime: roundedTime, duration: roundedDuration }, "*");
+  }, [currentTime, duration]);
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      const payload = event.data;
+      if (!payload || typeof payload !== "object") return;
+      if (payload.kind === "papyrus-video-play") {
+        void startPlayback();
+        return;
+      }
+      if (payload.kind === "papyrus-video-pause") {
+        stopPlayback();
+        return;
+      }
+      if (payload.kind === "papyrus-video-seek" && typeof payload.time === "number") {
+        handleSeek(payload.time);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [handleSeek, startPlayback, stopPlayback]);
+
+  return (
+    <div style={{ background: "#000", height: "100%", overflow: "hidden", position: "relative", width: "100%" }}>
+      {hasAudioSource ? <audio ref={audioRef} preload="auto" src={audioSrc} style={{ display: "none" }} /> : null}
+      <div
+        ref={viewportRef}
+        style={{
+          alignItems: "center",
+          background: backgroundColor,
+          display: "flex",
+          inset: 0,
+          justifyContent: "center",
+          overflow: "hidden",
+          position: "absolute",
+        }}
+      >
+        <div
+          style={{
+            height,
+            left: "50%",
+            position: "absolute",
+            top: "50%",
+            transform: `translate(-50%, -50%) scale(${fittedStage.scale})`,
+            transformOrigin: "center center",
+            width,
+          }}
+        >
+          <RendererProvider
+            frame={currentFrame}
+            config={{ fps, width, height, durationFrames: Math.max(1, Math.floor(duration * fps)) }}
+          >
+            <ComposableRenderer script={script} />
+          </RendererProvider>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function parsePreviewScript(xml: string): ScriptData {
+  const result = executeVomXml(xml);
+  const composition = Array.isArray(result?.compositions) && result.compositions[0] ? result.compositions[0] : result;
+  const script = dslToScriptData(composition, { type: "cue-count", secondsPerCue: 3 });
+
+  const timeline: unknown[] = [];
+  const scenes = script.scenes ?? [];
+  let sceneIndex = 0;
+
+  const doc = new DOMParser().parseFromString(xml, "text/xml");
+  for (const element of Array.from(doc.documentElement.children)) {
+    if (element.tagName === "scene") {
+      const scene = scenes[sceneIndex];
+      if (scene) {
+        timeline.push(scene);
+        sceneIndex += 1;
+      }
+    } else if (element.tagName === "transition") {
+      const previousScene = sceneIndex > 0 ? scenes[sceneIndex - 1] : null;
+      const nextScene = sceneIndex < scenes.length ? scenes[sceneIndex] : null;
+      const durationAttribute = element.getAttribute("duration");
+      const durationFrames = durationAttribute ? parseFloat(durationAttribute.replace("f", "")) : 16;
+      const startSec = nextScene ? (nextScene.startSec ?? 0) : 0;
+      const propsAttribute = element.getAttribute("props");
+      timeline.push({
+        kind: "transition",
+        id: element.getAttribute("id") || `trans-${sceneIndex}`,
+        effect: element.getAttribute("effect") || "push",
+        durationFrames,
+        ease: element.getAttribute("ease"),
+        props: propsAttribute ? JSON.parse(propsAttribute) : undefined,
+        startSec,
+        endSec: startSec + durationFrames / (script.fps ?? 30),
+        fromSceneId: previousScene?.id,
+        toSceneId: nextScene?.id,
+      });
+    }
+  }
+
+  (script as { timeline?: unknown[] }).timeline = timeline;
+  return script;
+}
+
+function mountPreview(container: HTMLElement, options: PreviewMountOptions): () => void {
+  const theme = options.theme ?? "light";
+  const script = parsePreviewScript(rethemeXml(options.xml, theme));
+  const width = script.meta?.width && script.meta.width > 0 ? script.meta.width : 1280;
+  const height = script.meta?.height && script.meta.height > 0 ? script.meta.height : 720;
+  const root = (window as unknown as { ReactDOM: { createRoot: (el: HTMLElement) => { render: (node: React.ReactNode) => void; unmount: () => void } } }).ReactDOM.createRoot(container);
+  root.render(
+    <PreviewPlayer audioSrc={options.audioSrc} autoPlay={options.autoPlay ?? false} height={height} script={script} width={width} />,
+  );
+  return () => root.unmount();
+}
+
+(window as unknown as Record<string, unknown>).PapyrusVideo = { registerPreviewRetheme };
+(window as unknown as Record<string, unknown>).mountPapyrusVideoPreview = mountPreview;

package/scripts/videoml/preview/preview-stage-fit.ts

@@ -0,0 +1,28 @@
+export type PreviewStageFitInput = {
+  containerHeight: number;
+  containerWidth: number;
+  stageHeight: number;
+  stageWidth: number;
+};
+
+export type PreviewStageFit = {
+  height: number;
+  scale: number;
+  width: number;
+};
+
+export function computePreviewStageFit(input: PreviewStageFitInput): PreviewStageFit {
+  const stageWidth = input.stageWidth > 0 ? input.stageWidth : 1280;
+  const stageHeight = input.stageHeight > 0 ? input.stageHeight : 720;
+  const containerWidth = input.containerWidth > 0 ? input.containerWidth : stageWidth;
+  const containerHeight = input.containerHeight > 0 ? input.containerHeight : stageHeight;
+
+  const scale = Math.min(containerWidth / stageWidth, containerHeight / stageHeight);
+  const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
+
+  return {
+    height: stageHeight * safeScale,
+    scale: safeScale,
+    width: stageWidth * safeScale,
+  };
+}

package/scripts/videoml/preview/preview-timing.ts

@@ -0,0 +1,42 @@
+export type PreviewPlaybackStateInput = {
+  audioBlocked: boolean;
+  audioDuration: number | null;
+  audioProgressObserved: boolean;
+  audioSrc?: string | null;
+  currentTime: number;
+  isPlaying: boolean;
+  scriptDerivedDuration: number;
+};
+
+export type PreviewPlaybackState = {
+  audioReady: boolean;
+  controlLabel: string;
+  duration: number;
+  hasAudioSource: boolean;
+  useAudioClock: boolean;
+  visualTime: number;
+};
+
+export function computePreviewPlaybackState(input: PreviewPlaybackStateInput): PreviewPlaybackState {
+  const hasAudioSource = Boolean(input.audioSrc);
+  const audioReady =
+    input.audioDuration != null && Number.isFinite(input.audioDuration) && input.audioDuration > 0;
+  const useAudioClock = hasAudioSource && audioReady && input.audioProgressObserved && !input.audioBlocked;
+  const duration = useAudioClock && input.audioDuration != null ? input.audioDuration : input.scriptDerivedDuration;
+  const visualTime =
+    useAudioClock && duration > 0 && input.scriptDerivedDuration > 0
+      ? (input.currentTime / duration) * input.scriptDerivedDuration
+      : input.currentTime;
+  const controlLabel = input.isPlaying ? "Pause" : hasAudioSource && input.audioBlocked ? "Play (audio)" : "Play";
+
+  return { audioReady, controlLabel, duration, hasAudioSource, useAudioClock, visualTime };
+}
+
+export function advanceScriptPreviewTime(currentTime: number, deltaSeconds: number, duration: number): number {
+  if (!(duration > 0)) return 0;
+  let nextTime = currentTime + Math.max(0, deltaSeconds);
+  if (nextTime >= duration) {
+    nextTime = 0;
+  }
+  return Math.max(0, Math.min(nextTime, duration));
+}

package/scripts/videoml/preview.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Video preview</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        background: #000;
+        overflow: hidden;
+      }
+
+      #preview-root {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="preview-root"></div>
+    <script src="./vendor/react.production.min.js"></script>
+    <script src="./vendor/react-dom.production.min.js"></script>
+    <script src="./preview-bundle.js"></script>
+    <script>
+      const root = document.getElementById("preview-root");
+      const params = new URLSearchParams(window.location.search);
+      let cleanup = null;
+
+      function showMessage(text) {
+        root.textContent = text;
+        root.style.cssText = "color:#eee;font:14px/1.4 system-ui,sans-serif;padding:24px;";
+      }
+
+      function readPayload(overrides) {
+        const target = (overrides && overrides.target) || params.get("target") || "";
+        const theme = (overrides && overrides.theme) || params.get("theme") || "light";
+        const audioSrc = (overrides && overrides.audio) || params.get("audio") || "";
+        const xml = target ? sessionStorage.getItem("papyrus-video-preview:" + target) : null;
+        return { theme, xml, audioSrc };
+      }
+
+      function mountPreview(payload) {
+        if (!payload || typeof payload.xml !== "string" || !payload.xml.trim()) {
+          showMessage("No VideoML DSL available for preview.");
+          return;
+        }
+        if (typeof cleanup === "function") {
+          cleanup();
+          cleanup = null;
+        }
+        root.textContent = "";
+        root.removeAttribute("style");
+        cleanup = window.mountPapyrusVideoPreview(root, {
+          xml: payload.xml,
+          theme: payload.theme || "light",
+          audioSrc: payload.audioSrc || undefined,
+          autoPlay: false,
+        });
+      }
+
+      window.addEventListener("message", (event) => {
+        const payload = event.data;
+        if (payload && payload.kind === "papyrus-video-refresh") mountPreview(readPayload(payload));
+      });
+
+      mountPreview(readPayload());
+
+      if (window.parent !== window) {
+        window.parent.postMessage({ kind: "papyrus-video-ready" }, "*");
+      }
+    </script>
+  </body>
+</html>