@treeseed/sdk 0.10.28 → 0.12.4

package/dist/scenes/remotion-input.js

@@ -0,0 +1,291 @@
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { sceneErrorDiagnostic, sceneWarningDiagnostic } from "./diagnostics.js";
+import { buildTreeseedSceneRenderDiagrams } from "./diagram-validation.js";
+import { resolveTreeseedSceneDeviceProfile } from "./devices.js";
+import { resolveTreeseedSceneRunRoot } from "./inspect.js";
+import { validateTreeseedScene } from "./planner.js";
+import { listTreeseedSceneRemotionCompositions } from "./remotion-composition-registry.js";
+import { resolveTreeseedScenePlugins } from "./registry.js";
+import { buildTreeseedSceneTrainingOutputs } from "./training.js";
+function readJson(path) {
+  return JSON.parse(readFileSync(path, "utf8"));
+}
+function hasError(diagnostics) {
+  return diagnostics.some((entry) => entry.severity === "error");
+}
+function defaultRenderMode(scene, run) {
+  if (scene.runtime.mode === "training") return "training";
+  if (scene.runtime.mode === "demo") return "demo";
+  if (run.workflowStatus === "failed") return "failure-review";
+  return "demo";
+}
+function defaultTreeseedSceneRemotionComposition(mode) {
+  if (mode === "training") return "treeseed-training-default";
+  if (mode === "failure-review") return "treeseed-failure-review";
+  if (mode === "diagram-only") return "treeseed-diagram-only";
+  return "treeseed-demo-default";
+}
+function renderSettings(scene, run, mode, composition, format, durationMs) {
+  const remotion = scene.render.remotion;
+  const fps = remotion?.output?.fps ?? 30;
+  const resolution = run.device?.output ?? remotion?.output?.resolution ?? { width: 1920, height: 1080 };
+  const width = resolution.width;
+  const height = resolution.height;
+  const selectedFormat = format ?? (remotion?.output?.format === "mp4" ? "mp4" : "mp4");
+  const durationSeconds = Math.max(4, durationMs / 1e3);
+  return {
+    mode,
+    composition: composition ?? remotion?.composition ?? defaultTreeseedSceneRemotionComposition(mode),
+    fps,
+    width,
+    height,
+    durationInFrames: Math.max(1, Math.ceil(durationSeconds * fps)),
+    format: selectedFormat
+  };
+}
+function renderSettingsWithLayout(settings, mode, renderDiagrams) {
+  if (mode === "diagram-only") {
+    return {
+      ...settings,
+      durationInFrames: Math.max(1, Math.ceil(renderDiagrams.reduce((sum, diagram) => sum + diagram.durationSeconds, 0) * settings.fps)),
+      introFrames: 0,
+      interstitialFrames: 0,
+      evidenceStartFrame: 0,
+      evidenceDurationInFrames: 0
+    };
+  }
+  const sourceFrames = settings.durationInFrames;
+  const introFrames = Math.min(90, Math.floor(settings.fps * 3));
+  const interstitialFrames = renderDiagrams.filter((entry) => entry.placement !== "overlay").reduce((sum, diagram) => sum + Math.max(1, Math.ceil(diagram.durationSeconds * settings.fps)), 0);
+  const evidenceStartFrame = introFrames + interstitialFrames;
+  return {
+    ...settings,
+    introFrames,
+    interstitialFrames,
+    evidenceStartFrame,
+    evidenceDurationInFrames: sourceFrames,
+    durationInFrames: evidenceStartFrame + sourceFrames
+  };
+}
+function captureViewportForRender(scene, run) {
+  return run.capture?.videoSize ?? run.capture?.viewport ?? scene.render.remotion?.capture?.video ?? scene.render.remotion?.capture?.viewport ?? scene.target.viewport;
+}
+function aspect(value) {
+  return value.width / Math.max(1, value.height);
+}
+function durationMsFor(input) {
+  if (input.chapterId) {
+    const chapter = input.run.chapters.find((entry) => entry.id === input.chapterId);
+    if (chapter) return Math.max(4e3, chapter.durationMs);
+  }
+  const stepStarts = input.run.steps.map((step) => input.timeline.find((event) => event.type === "step.start" && event.stepId === step.id)?.offsetMs ?? null).filter((offset) => typeof offset === "number");
+  const stepEnds = input.run.steps.map((step) => input.timeline.find((event) => event.type === "step.end" && event.stepId === step.id)?.offsetMs ?? null).filter((offset) => typeof offset === "number");
+  if (stepStarts.length > 0 && stepEnds.length > 0) {
+    return Math.max(4e3, Math.max(...stepEnds) - Math.min(...stepStarts) + 3e3);
+  }
+  if (input.run.durationMs > 0) return input.run.durationMs;
+  const maxTimeline = Math.max(0, ...input.timeline.map((event) => event.offsetMs));
+  if (maxTimeline > 0) return maxTimeline;
+  return Math.max(input.run.steps.length * 4e3, 8e3);
+}
+function readCheckpoints(run) {
+  const root = run.artifacts?.checkpointsRoot;
+  if (!root || !existsSync(root)) return run.checkpoints ?? [];
+  return readdirSync(root).filter((entry) => entry.endsWith(".json")).sort().map((entry) => readJson(join(root, entry)));
+}
+function readSegmentPaths(run) {
+  return (run.segments ?? []).map((segment) => segment.segmentPath).filter((path) => typeof path === "string" && path.length > 0);
+}
+function imageDimensions(path) {
+  if (!existsSync(path)) return { width: null, height: null };
+  try {
+    const buffer = readFileSync(path);
+    if (buffer.length >= 24 && buffer.toString("ascii", 1, 4) === "PNG") {
+      return { width: buffer.readUInt32BE(16), height: buffer.readUInt32BE(20) };
+    }
+  } catch {
+  }
+  return { width: null, height: null };
+}
+function screenshotsFromRun(run, timeline) {
+  const timelineByStep = /* @__PURE__ */ new Map();
+  for (const event of timeline) {
+    if ((event.type === "screenshot.viewport" || event.type === "screenshot") && event.stepId && !timelineByStep.has(event.stepId)) timelineByStep.set(event.stepId, event);
+  }
+  return run.steps.map((step) => {
+    const viewportPath = step.viewportScreenshotPath && existsSync(step.viewportScreenshotPath) ? step.viewportScreenshotPath : null;
+    const fullPagePath = step.screenshotPath && existsSync(step.screenshotPath) ? step.screenshotPath : null;
+    const path = viewportPath ?? fullPagePath;
+    if (!path) return null;
+    const event = timelineByStep.get(step.id);
+    const dimensions = imageDimensions(path);
+    return {
+      stepId: step.id,
+      path,
+      src: imageDataUri(path),
+      timestamp: event?.timestamp ?? null,
+      offsetMs: event?.offsetMs ?? null,
+      captureKind: viewportPath ? "viewport" : "full-page",
+      width: dimensions.width,
+      height: dimensions.height
+    };
+  }).filter((entry) => Boolean(entry)).sort((a, b) => (a.offsetMs ?? Number.MAX_SAFE_INTEGER) - (b.offsetMs ?? Number.MAX_SAFE_INTEGER));
+}
+function videoRefFromPath(path) {
+  const lower = path.toLowerCase();
+  const mimeType = lower.endsWith(".mp4") ? "video/mp4" : lower.endsWith(".mov") || lower.endsWith(".qt") ? "video/quicktime" : "video/webm";
+  if (/^(https?:|data:)/iu.test(path)) {
+    return { path, src: path, mimeType, source: "playwright" };
+  }
+  if (existsSync(path)) return { path, mimeType, source: "playwright" };
+  return null;
+}
+function legacyFullPageScreenshotsFromArtifacts(run, timeline) {
+  const known = new Set(run.steps.map((step) => step.screenshotPath).filter(Boolean));
+  return (run.artifacts?.screenshotPaths ?? []).filter((path) => !known.has(path) && existsSync(path)).map((step) => {
+    const event = timeline.find((entry) => entry.type === "screenshot" && "path" in entry.data && entry.data.path === step);
+    const dimensions = imageDimensions(step);
+    return {
+      stepId: event?.stepId ?? null,
+      path: step,
+      src: imageDataUri(step),
+      timestamp: event?.timestamp ?? null,
+      offsetMs: event?.offsetMs ?? null,
+      captureKind: "full-page",
+      width: dimensions.width,
+      height: dimensions.height
+    };
+  });
+}
+function imageDataUri(path) {
+  if (/^(https?:|data:)/iu.test(path) || !existsSync(path)) return path;
+  const extension = path.toLowerCase().endsWith(".jpg") || path.toLowerCase().endsWith(".jpeg") ? "jpeg" : "png";
+  return `data:image/${extension};base64,${readFileSync(path).toString("base64")}`;
+}
+function filterForChapter(run, timeline, chapterId) {
+  if (!chapterId) return { timeline, segments: run.segments ?? [] };
+  const chapter = run.chapters.find((entry) => entry.id === chapterId);
+  if (!chapter) return null;
+  const stepIds = new Set(chapter.stepIds);
+  return {
+    timeline: timeline.filter((event) => !event.stepId || stepIds.has(event.stepId)),
+    segments: (run.segments ?? []).filter((segment) => segment.chapterId === chapterId)
+  };
+}
+function filterDiagramsForChapter(diagrams, run, chapterId) {
+  if (!chapterId) return diagrams;
+  const chapter = run.chapters.find((entry) => entry.id === chapterId);
+  if (!chapter) return diagrams;
+  const stepIds = new Set(chapter.stepIds);
+  return diagrams.filter((diagram) => stepIds.has(diagram.at));
+}
+function loadTreeseedSceneRenderInput(input) {
+  const diagnostics = [];
+  const warnings = [];
+  const blockers = [];
+  if (input.format && input.format !== "mp4") {
+    blockers.push(sceneErrorDiagnostic("scene.render_format_unsupported", `Unsupported scene render format: ${input.format}.`, "format"));
+    return { ok: false, input: null, runRoot: null, diagnostics: [...diagnostics, ...blockers], warnings, blockers };
+  }
+  const resolved = resolveTreeseedSceneRunRoot(input.projectRoot, input.from);
+  diagnostics.push(...resolved.diagnostics);
+  if (!resolved.runRoot) return { ok: false, input: null, runRoot: null, diagnostics, warnings, blockers: resolved.diagnostics.filter((entry) => entry.severity === "error") };
+  const scenePath = join(resolved.runRoot, "scene.normalized.json");
+  const runPath = join(resolved.runRoot, "run.json");
+  const timelinePath = join(resolved.runRoot, "timeline.json");
+  if (!existsSync(scenePath)) blockers.push(sceneErrorDiagnostic("scene.render_missing_scene", `Normalized scene artifact not found: ${scenePath}.`, "scene"));
+  if (!existsSync(runPath)) blockers.push(sceneErrorDiagnostic("scene.render_missing_run", `Run report artifact not found: ${runPath}.`, "from"));
+  if (!existsSync(timelinePath)) blockers.push(sceneErrorDiagnostic("scene.render_missing_timeline", `Timeline artifact not found: ${timelinePath}.`, "from"));
+  if (blockers.length > 0) return { ok: false, input: null, runRoot: resolved.runRoot, diagnostics: [...diagnostics, ...blockers], warnings, blockers };
+  const scene = readJson(scenePath);
+  const run = readJson(runPath);
+  const timeline = readJson(timelinePath);
+  if (input.device && run.device?.id && input.device !== run.device.id) {
+    blockers.push(sceneErrorDiagnostic("scene.render_device_mismatch", `Requested render device "${input.device}" does not match source run device "${run.device.id}".`, "device"));
+  }
+  if (input.device && !run.device?.id) {
+    const resolvedDevice = resolveTreeseedSceneDeviceProfile({ scene, device: input.device });
+    blockers.push(...resolvedDevice.diagnostics.filter((entry) => entry.severity === "error"));
+    warnings.push(...resolvedDevice.diagnostics.filter((entry) => entry.severity === "warning"));
+    if (resolvedDevice.profile) run.device = resolvedDevice.profile;
+  }
+  const validation = validateTreeseedScene({ projectRoot: input.projectRoot, scene: input.scene });
+  if (!validation.ok) {
+    blockers.push(...validation.diagnostics);
+  } else if (validation.scene?.id !== scene.id) {
+    blockers.push(sceneErrorDiagnostic("scene.render_scene_mismatch", `Scene manifest "${validation.scene?.id ?? "(unknown)"}" does not match source run scene "${scene.id}".`, "scene"));
+  }
+  if (input.chapterId && !run.chapters.some((chapter) => chapter.id === input.chapterId)) {
+    blockers.push(sceneErrorDiagnostic("scene.render_chapter_not_found", `Scene run chapter not found: ${input.chapterId}.`, "chapter"));
+  }
+  const mode = input.mode ?? defaultRenderMode(scene, run);
+  let settings = renderSettings(scene, run, mode, input.composition, input.format, durationMsFor({ run, timeline, chapterId: input.chapterId }));
+  const renderer = input.renderer ?? "remotion";
+  if (renderer === "remotion" && !listTreeseedSceneRemotionCompositions().some((composition) => composition.id === settings.composition)) {
+    blockers.push(sceneErrorDiagnostic("scene.render_composition_unknown", `Unknown Remotion scene composition: ${settings.composition}.`, "composition"));
+  }
+  const filtered = filterForChapter(run, timeline, input.chapterId);
+  if (!filtered) blockers.push(sceneErrorDiagnostic("scene.render_chapter_not_found", `Scene run chapter not found: ${input.chapterId}.`, "chapter"));
+  const pluginResolution = resolveTreeseedScenePlugins();
+  const renderDiagramReport = buildTreeseedSceneRenderDiagrams({
+    scene,
+    run,
+    timeline: filtered?.timeline ?? timeline,
+    registry: pluginResolution.registry
+  });
+  const renderDiagrams = filterDiagramsForChapter(renderDiagramReport.diagrams, run, input.chapterId);
+  settings = renderSettingsWithLayout(settings, mode, renderDiagrams);
+  const captureViewport = captureViewportForRender(scene, run);
+  if (Math.abs(aspect(captureViewport) - aspect({ width: settings.width, height: settings.height })) > 0.01) {
+    warnings.push(sceneWarningDiagnostic(
+      "scene.render_capture_aspect_mismatch",
+      `Scene capture viewport ${captureViewport.width}x${captureViewport.height} does not match render output ${settings.width}x${settings.height}; fixed-browser rendering will preserve the browser viewport and may add padding.`,
+      "render.remotion.capture"
+    ));
+  }
+  const diagramDiagnostics = [...renderDiagramReport.diagnostics, ...pluginResolution.diagnostics];
+  warnings.push(...diagramDiagnostics.filter((entry) => entry.severity === "warning"));
+  blockers.push(...diagramDiagnostics.filter((entry) => entry.severity === "error"));
+  if (mode === "diagram-only" && renderDiagrams.length === 0) blockers.push(sceneErrorDiagnostic("scene.render_missing_diagram", "Diagram-only rendering requires at least one valid diagram for the selected run or chapter.", "diagrams"));
+  const sourceVideos = [...new Set([...run.videoPaths ?? [], ...run.artifacts?.videoPaths ?? []].filter(Boolean))];
+  const videoRefs = sourceVideos.map(videoRefFromPath).filter((path) => Boolean(path));
+  const videos = videoRefs.map((entry) => entry.src ?? entry.staticPath ?? entry.path);
+  const screenshots = [
+    ...screenshotsFromRun(run, filtered?.timeline ?? timeline),
+    ...legacyFullPageScreenshotsFromArtifacts(run, filtered?.timeline ?? timeline)
+  ].sort((a, b) => (a.offsetMs ?? Number.MAX_SAFE_INTEGER) - (b.offsetMs ?? Number.MAX_SAFE_INTEGER));
+  if (videoRefs.length === 0 && screenshots.length > 0) {
+    const message = sourceVideos.length > 0 ? "Playwright video artifacts were not directly loadable by the Remotion browser; rendering from screenshots and timeline evidence." : "No Playwright video was found; rendering from screenshots and timeline evidence.";
+    warnings.push(sceneWarningDiagnostic("scene.render_video_missing", message, "from"));
+  }
+  if (mode !== "diagram-only" && videoRefs.length === 0 && screenshots.length === 0) blockers.push(sceneErrorDiagnostic("scene.render_missing_media", "Scene render requires at least one Playwright video or screenshot artifact.", "from"));
+  if (hasError(blockers)) return { ok: false, input: null, runRoot: resolved.runRoot, diagnostics: [...diagnostics, ...warnings, ...blockers], warnings, blockers };
+  const trainingOutputs = buildTreeseedSceneTrainingOutputs({ scene, run, timeline: filtered?.timeline ?? timeline });
+  const renderInput = {
+    schemaVersion: "treeseed.scene.render-input/v1",
+    scene,
+    run,
+    timeline: filtered?.timeline ?? timeline,
+    chapters: input.chapterId ? run.chapters.filter((chapter) => chapter.id === input.chapterId) : run.chapters ?? [],
+    segments: filtered?.segments ?? run.segments ?? [],
+    checkpoints: readCheckpoints(run),
+    overlays: scene.overlays,
+    diagrams: scene.diagrams,
+    renderDiagrams,
+    training: {
+      captions: trainingOutputs.captions,
+      transcript: trainingOutputs.transcript,
+      narration: trainingOutputs.narration,
+      glossary: trainingOutputs.glossary,
+      chapterClips: trainingOutputs.chapterClips
+    },
+    media: { videos, videoRefs, screenshots },
+    render: settings
+  };
+  return { ok: true, input: renderInput, runRoot: resolved.runRoot, diagnostics: [...diagnostics, ...warnings], warnings, blockers };
+}
+export {
+  defaultTreeseedSceneRemotionComposition,
+  loadTreeseedSceneRenderInput
+};

package/dist/scenes/remotion-visuals.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { TreeseedSceneMotion, TreeseedSceneVisualObject, TreeseedSceneVisualRegion, TreeseedSceneVisualStyle } from './types.js';
+export declare const treeseedSceneVideoTheme: {
+    bg: string;
+    panel: string;
+    panelSolid: string;
+    text: string;
+    muted: string;
+    accent: string;
+    success: string;
+    warning: string;
+    danger: string;
+    brand: string;
+    line: string;
+};
+export declare function resolveVisualRegion(region: TreeseedSceneVisualRegion | undefined, margin?: number): React.CSSProperties;
+export declare function visualStyle(style?: TreeseedSceneVisualStyle): React.CSSProperties;
+export declare function interpolateSceneMotion(input: {
+    motion?: TreeseedSceneMotion;
+    frame: number;
+    fps: number;
+    durationSeconds: number;
+}): React.CSSProperties;
+export declare function renderTreeseedVisualObject(input: {
+    object: TreeseedSceneVisualObject;
+    frame: number;
+    fps: number;
+    durationSeconds: number;
+}): React.ReactElement | null;

package/dist/scenes/remotion-visuals.js

@@ -0,0 +1,198 @@
+import React from "react";
+import { interpolate } from "remotion";
+const treeseedSceneVideoTheme = {
+  bg: "#0f172a",
+  panel: "rgba(15,23,42,0.88)",
+  panelSolid: "#172033",
+  text: "#f8fafc",
+  muted: "#cbd5e1",
+  accent: "#38bdf8",
+  success: "#22c55e",
+  warning: "#f59e0b",
+  danger: "#ef4444",
+  brand: "#14b8a6",
+  line: "rgba(148,163,184,0.42)"
+};
+function unitValue(value, unit) {
+  return unit === "percent" ? `${value}%` : value;
+}
+function pointStyle(point) {
+  if (!point) return {};
+  return { left: unitValue(point.x, point.unit), top: unitValue(point.y, point.unit) };
+}
+function sizeStyle(size) {
+  if (!size) return {};
+  return { width: unitValue(size.width, size.unit), height: unitValue(size.height, size.unit) };
+}
+function resolveVisualRegion(region, margin = 48) {
+  const common = { position: "absolute" };
+  if (region === "top-left") return { ...common, left: margin, top: margin };
+  if (region === "top") return { ...common, left: "50%", top: margin, transform: "translateX(-50%)" };
+  if (region === "top-right" || !region) return { ...common, right: margin, top: margin };
+  if (region === "left") return { ...common, left: margin, top: "50%", transform: "translateY(-50%)" };
+  if (region === "center") return { ...common, left: "50%", top: "50%", transform: "translate(-50%, -50%)" };
+  if (region === "right") return { ...common, right: margin, top: "50%", transform: "translateY(-50%)" };
+  if (region === "bottom-left") return { ...common, left: margin, bottom: margin };
+  if (region === "bottom") return { ...common, left: "50%", bottom: margin, transform: "translateX(-50%)" };
+  return { ...common, right: margin, bottom: margin };
+}
+function toneColors(style) {
+  if (style?.tone === "success") return { accent: treeseedSceneVideoTheme.success, background: "rgba(20,83,45,0.88)" };
+  if (style?.tone === "warning") return { accent: treeseedSceneVideoTheme.warning, background: "rgba(120,53,15,0.9)" };
+  if (style?.tone === "danger") return { accent: treeseedSceneVideoTheme.danger, background: "rgba(127,29,29,0.9)" };
+  if (style?.tone === "brand") return { accent: treeseedSceneVideoTheme.brand, background: "rgba(19,78,74,0.9)" };
+  if (style?.tone === "info") return { accent: treeseedSceneVideoTheme.accent, background: "rgba(12,74,110,0.9)" };
+  return { accent: treeseedSceneVideoTheme.accent, background: treeseedSceneVideoTheme.panel };
+}
+function visualStyle(style) {
+  const colors = toneColors(style);
+  const shadow = style?.shadow === "none" ? "none" : style?.shadow === "strong" ? "0 28px 80px rgba(0,0,0,0.44)" : style?.shadow === "soft" ? "0 10px 24px rgba(0,0,0,0.18)" : "0 18px 46px rgba(0,0,0,0.28)";
+  return {
+    background: style?.background ?? colors.background,
+    color: style?.color ?? treeseedSceneVideoTheme.text,
+    borderColor: style?.borderColor ?? colors.accent,
+    borderStyle: "solid",
+    borderWidth: style?.borderWidth ?? 1,
+    borderRadius: style?.radius ?? 10,
+    boxShadow: shadow,
+    opacity: style?.opacity ?? 1
+  };
+}
+function easing(value) {
+  if (value === "ease-in") return (t) => t * t;
+  if (value === "ease-out") return (t) => 1 - (1 - t) * (1 - t);
+  if (value === "ease" || value === "ease-in-out") return (t) => t * t * (3 - 2 * t);
+  return (t) => t;
+}
+function interpolateSceneMotion(input) {
+  const motion = input.motion;
+  if (!motion || motion.keyframes.length === 0) return {};
+  const durationFrames = Math.max(1, Math.ceil(input.durationSeconds * input.fps));
+  const frame = motion.loop ? input.frame % durationFrames : Math.min(input.frame, durationFrames);
+  const currentSeconds = frame / Math.max(1, input.fps);
+  const normalized = frame / durationFrames;
+  const keyframes = [...motion.keyframes].sort((a, b) => a.at - b.at);
+  const frameAt = (at, unit) => unit === "progress" ? at : at / Math.max(1e-3, input.durationSeconds);
+  const progress = keyframes[0]?.unit === "progress" ? normalized : currentSeconds / Math.max(1e-3, input.durationSeconds);
+  let previous = keyframes[0];
+  let next = keyframes[keyframes.length - 1];
+  for (let index = 0; index < keyframes.length - 1; index += 1) {
+    const a = keyframes[index];
+    const b = keyframes[index + 1];
+    const start2 = frameAt(a.at, a.unit);
+    const end2 = frameAt(b.at, b.unit);
+    if (progress >= start2 && progress <= end2) {
+      previous = a;
+      next = b;
+      break;
+    }
+  }
+  const start = frameAt(previous.at, previous.unit);
+  const end = frameAt(next.at, next.unit);
+  const raw = end === start ? 1 : Math.max(0, Math.min(1, (progress - start) / (end - start)));
+  const t = easing(next.easing ?? previous.easing)(raw);
+  const mix = (a, b, fallback) => interpolate(t, [0, 1], [a ?? fallback, b ?? a ?? fallback]);
+  const style = {};
+  if (previous.position || next.position) {
+    const from = previous.position ?? next.position;
+    const to = next.position ?? previous.position;
+    style.left = unitValue(mix(from.x, to.x, from.x), to.unit ?? from.unit);
+    style.top = unitValue(mix(from.y, to.y, from.y), to.unit ?? from.unit);
+  }
+  if (previous.size || next.size) {
+    const from = previous.size ?? next.size;
+    const to = next.size ?? previous.size;
+    style.width = unitValue(mix(from.width, to.width, from.width), to.unit ?? from.unit);
+    style.height = unitValue(mix(from.height, to.height, from.height), to.unit ?? from.unit);
+  }
+  if (previous.opacity !== void 0 || next.opacity !== void 0) style.opacity = mix(previous.opacity, next.opacity, previous.opacity ?? 1);
+  const scale = mix(previous.scale, next.scale, previous.scale ?? 1);
+  const rotate = mix(previous.rotateDeg, next.rotateDeg, previous.rotateDeg ?? 0);
+  style.transform = `scale(${scale}) rotate(${rotate}deg)`;
+  return style;
+}
+function renderTreeseedVisualObject(input) {
+  const object = input.object;
+  const base = {
+    position: "absolute",
+    ...resolveVisualRegion(object.region, 0),
+    ...pointStyle(object.position),
+    ...sizeStyle(object.size),
+    ...visualStyle(object.style),
+    ...interpolateSceneMotion({ motion: object.motion, frame: input.frame, fps: input.fps, durationSeconds: input.durationSeconds }),
+    boxSizing: "border-box",
+    fontFamily: "Inter, Arial, sans-serif",
+    pointerEvents: "none"
+  };
+  if (object.type === "text" || object.type === "badge") {
+    return React.createElement("div", {
+      key: object.id,
+      style: {
+        ...base,
+        padding: object.type === "badge" ? "8px 12px" : "12px 16px",
+        fontSize: object.type === "badge" ? 18 : 24,
+        fontWeight: 800,
+        whiteSpace: "pre-wrap"
+      }
+    }, object.text ?? object.id);
+  }
+  if (object.type === "circle" || object.type === "spotlight") {
+    return React.createElement("div", { key: object.id, style: { ...base, borderRadius: 999, background: object.type === "spotlight" ? "rgba(56,189,248,0.12)" : base.background } });
+  }
+  if (object.type === "line" || object.type === "arrow") {
+    const from = object.from ?? object.position ?? { x: 0, y: 0 };
+    const to = object.to ?? { x: from.x + 160, y: from.y };
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const length = Math.sqrt(dx * dx + dy * dy);
+    const angle = Math.atan2(dy, dx) * 180 / Math.PI;
+    return React.createElement("div", {
+      key: object.id,
+      style: {
+        position: "absolute",
+        left: unitValue(from.x, from.unit),
+        top: unitValue(from.y, from.unit),
+        width: length,
+        height: object.style?.borderWidth ?? 4,
+        background: object.style?.color ?? object.style?.borderColor ?? treeseedSceneVideoTheme.accent,
+        transformOrigin: "0 50%",
+        transform: `rotate(${angle}deg)`,
+        boxShadow: "0 0 18px rgba(56,189,248,0.4)"
+      }
+    }, object.type === "arrow" ? React.createElement("span", {
+      style: {
+        position: "absolute",
+        right: -2,
+        top: -7,
+        width: 0,
+        height: 0,
+        borderTop: "8px solid transparent",
+        borderBottom: "8px solid transparent",
+        borderLeft: `14px solid ${object.style?.color ?? object.style?.borderColor ?? treeseedSceneVideoTheme.accent}`
+      }
+    }) : null);
+  }
+  if (object.type === "cursor") {
+    return React.createElement("div", {
+      key: object.id,
+      style: {
+        ...base,
+        width: object.size?.width ?? 28,
+        height: object.size?.height ?? 28,
+        background: "transparent",
+        border: 0,
+        boxShadow: "none",
+        color: object.style?.color ?? treeseedSceneVideoTheme.text,
+        fontSize: 30
+      }
+    }, "\u25B8");
+  }
+  return React.createElement("div", { key: object.id, style: base });
+}
+export {
+  interpolateSceneMotion,
+  renderTreeseedVisualObject,
+  resolveVisualRegion,
+  treeseedSceneVideoTheme,
+  visualStyle
+};

package/dist/scenes/render-media-assets.d.ts

@@ -0,0 +1,9 @@
+import type { TreeseedSceneDiagnostic, TreeseedSceneRenderInput } from './types.js';
+export declare function stageTreeseedSceneRenderMediaAssets(input: {
+    renderRoot: string;
+    renderInput: TreeseedSceneRenderInput;
+}): {
+    renderInput: TreeseedSceneRenderInput;
+    publicDir: string;
+    warnings: TreeseedSceneDiagnostic[];
+};

package/dist/scenes/render-media-assets.js

@@ -0,0 +1,117 @@
+import { copyFileSync, existsSync, mkdirSync, readFileSync, statSync } from "node:fs";
+import { createHash } from "node:crypto";
+import { spawnSync } from "node:child_process";
+import { extname, join } from "node:path";
+import { sceneWarningDiagnostic } from "./diagnostics.js";
+function extensionFor(path, mimeType) {
+  const extension = extname(path);
+  if (extension) return extension;
+  if (mimeType === "video/mp4") return ".mp4";
+  if (mimeType === "video/quicktime") return ".mov";
+  return ".webm";
+}
+function smallDataUriFallback(path, mimeType) {
+  if (!existsSync(path)) return null;
+  const stat = statSync(path);
+  if (stat.size > 1024 * 1024) return null;
+  return `data:${mimeType};base64,${readFileSync(path).toString("base64")}`;
+}
+function normalizePlaywrightVideo(input) {
+  const filename = `${input.hash}-normalized-v1.mp4`;
+  const outputPath = join(input.mediaDir, filename);
+  if (existsSync(outputPath)) return { path: outputPath, staticPath: `media/${filename}` };
+  const cropWidth = Math.max(2, Math.floor(input.sourceWidth * 0.95 / 2) * 2);
+  const cropHeight = Math.max(2, Math.floor(input.sourceHeight * 0.95 / 2) * 2);
+  const result = spawnSync("ffmpeg", [
+    "-y",
+    "-loglevel",
+    "error",
+    "-i",
+    input.path,
+    "-vf",
+    `crop=${cropWidth}:${cropHeight}:0:0,scale=${input.width}:${input.height},setsar=1,fps=${input.fps}`,
+    "-an",
+    "-c:v",
+    "libx264",
+    "-preset",
+    "veryfast",
+    "-crf",
+    "18",
+    "-pix_fmt",
+    "yuv420p",
+    "-movflags",
+    "+faststart",
+    outputPath
+  ], { encoding: "utf8" });
+  if (result.status !== 0 || !existsSync(outputPath)) return null;
+  return { path: outputPath, staticPath: `media/${filename}` };
+}
+function stageTreeseedSceneRenderMediaAssets(input) {
+  const publicDir = join(input.renderRoot, "public");
+  const mediaDir = join(publicDir, "media");
+  mkdirSync(mediaDir, { recursive: true });
+  const warnings = [];
+  const stagedRefs = (input.renderInput.media.videoRefs ?? []).flatMap((ref) => {
+    if (ref.staticPath || ref.src) return [ref];
+    try {
+      if (!existsSync(ref.path)) return [];
+      const bytes = readFileSync(ref.path);
+      const hash = createHash("sha256").update(bytes).digest("hex");
+      const filename = `${hash}${extensionFor(ref.path, ref.mimeType)}`;
+      const targetPath = join(mediaDir, filename);
+      if (!existsSync(targetPath)) copyFileSync(ref.path, targetPath);
+      if (input.renderInput.run.capture?.evidenceFit === "fixed-browser") {
+        const source = input.renderInput.run.capture?.videoSize ?? input.renderInput.run.capture?.viewport ?? {
+          width: input.renderInput.render.width,
+          height: input.renderInput.render.height
+        };
+        const normalized = normalizePlaywrightVideo({
+          path: ref.path,
+          hash,
+          mediaDir,
+          fps: input.renderInput.render.fps,
+          sourceWidth: source.width,
+          sourceHeight: source.height,
+          width: input.renderInput.render.width,
+          height: input.renderInput.render.height
+        });
+        if (normalized) {
+          return [{ ...ref, staticPath: normalized.staticPath, mimeType: "video/mp4" }];
+        }
+        if (!normalized) {
+          warnings.push(sceneWarningDiagnostic(
+            "scene.render_video_normalization_failed",
+            "Playwright video normalization failed; Remotion will use staged source video or screenshot fallback.",
+            ref.path
+          ));
+        }
+      }
+      return [{ ...ref, staticPath: `media/${filename}` }];
+    } catch (error) {
+      const fallback = smallDataUriFallback(ref.path, ref.mimeType);
+      if (fallback) return [{ ...ref, src: fallback }];
+      warnings.push(sceneWarningDiagnostic(
+        "scene.render_video_staging_failed",
+        `Playwright video could not be staged for Remotion rendering and screenshots will be used if available. ${error instanceof Error ? error.message : String(error ?? "")}`.trim(),
+        ref.path
+      ));
+      return [];
+    }
+  });
+  return {
+    publicDir,
+    warnings,
+    renderInput: {
+      ...input.renderInput,
+      media: {
+        ...input.renderInput.media,
+        videoRefs: stagedRefs,
+        videoFrames: [],
+        videos: stagedRefs.map((ref) => ref.staticPath ?? ref.src ?? ref.path)
+      }
+    }
+  };
+}
+export {
+  stageTreeseedSceneRenderMediaAssets
+};

package/dist/scenes/render-report.d.ts

@@ -0,0 +1,10 @@
+import type { TreeseedSceneDiagnostic, TreeseedSceneRenderInput, TreeseedSceneRenderReport } from './types.js';
+export declare function writeTreeseedSceneRenderReport(input: {
+    report: TreeseedSceneRenderReport;
+    input: TreeseedSceneRenderInput | null;
+    composition: Record<string, unknown> | null;
+}): void;
+export declare function appendTreeseedSceneRenderedVideo(input: {
+    runPath: string;
+    outputPath: string;
+}): TreeseedSceneDiagnostic[];