@treeseed/sdk 0.11.0 → 0.12.4

package/dist/scenes/remotion-compositions.js

@@ -0,0 +1,464 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  Composition,
+  Img,
+  Sequence,
+  Video,
+  interpolate,
+  registerRoot,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig
+} from "remotion";
+import { renderTreeseedSceneDiagram } from "./remotion-diagrams.js";
+import { interpolateSceneMotion, renderTreeseedVisualObject, resolveVisualRegion, treeseedSceneVideoTheme, visualStyle } from "./remotion-visuals.js";
+function titleCard(input, subtitle) {
+  return React.createElement(
+    AbsoluteFill,
+    {
+      style: {
+        backgroundColor: "#0f172a",
+        color: "white",
+        fontFamily: "Inter, Arial, sans-serif",
+        justifyContent: "center",
+        padding: 96
+      }
+    },
+    React.createElement("div", { style: { fontSize: 56, fontWeight: 700, lineHeight: 1.08 } }, input.scene.title),
+    React.createElement("div", { style: { marginTop: 24, fontSize: 26, color: "#bfdbfe", maxWidth: 1200 } }, subtitle),
+    React.createElement("div", { style: { marginTop: 48, fontSize: 18, color: "#94a3b8" } }, `Scene ${input.scene.id} \xB7 Run ${input.run.runId ?? "unknown"}`)
+  );
+}
+function treeseedSceneRenderLayout(input) {
+  const fps = input.render.fps;
+  const introFrames = input.render.introFrames ?? Math.min(90, Math.floor(fps * 3));
+  const interstitialFrames = input.render.interstitialFrames ?? input.renderDiagrams.filter((entry) => entry.placement !== "overlay").reduce((sum, diagram) => sum + Math.max(1, Math.ceil(diagram.durationSeconds * fps)), 0);
+  const evidenceStartFrame = input.render.evidenceStartFrame ?? introFrames + interstitialFrames;
+  const evidenceDurationInFrames = input.render.evidenceDurationInFrames ?? Math.max(1, input.render.durationInFrames - evidenceStartFrame);
+  return { introFrames, interstitialFrames, evidenceStartFrame, evidenceDurationInFrames };
+}
+function resolveEvidenceViewport(input) {
+  const source = input.run.capture?.videoSize ?? input.run.capture?.viewport ?? input.scene.render.remotion?.capture?.video ?? input.scene.render.remotion?.capture?.viewport ?? { width: input.render.width, height: input.render.height };
+  const availableWidth = Math.max(1, input.render.width);
+  const availableHeight = Math.max(1, input.render.height);
+  const scale = Math.min(availableWidth / source.width, availableHeight / source.height);
+  const width = Math.round(source.width * scale);
+  const height = Math.round(source.height * scale);
+  return {
+    width,
+    height,
+    scale,
+    left: Math.round((input.render.width - width) / 2),
+    top: Math.round((input.render.height - height) / 2)
+  };
+}
+function eventStepOffset(input, stepId, type) {
+  return input.timeline.find((event) => event.type === type && event.stepId === stepId)?.offsetMs ?? null;
+}
+function stepAtEvidenceMs(input, evidenceMs) {
+  let fallback = input.run.steps[0] ?? null;
+  for (const step of input.run.steps) {
+    const start = eventStepOffset(input, step.id, "step.start");
+    const end = eventStepOffset(input, step.id, "step.end");
+    if (start !== null && start <= evidenceMs) fallback = step;
+    if (start !== null && start <= evidenceMs && (end === null || evidenceMs <= end)) return step;
+  }
+  return fallback;
+}
+function stepStartMs(input, stepId) {
+  const timelineStart = eventStepOffset(input, stepId, "step.start");
+  if (timelineStart !== null) return timelineStart;
+  const index = input.run.steps.findIndex((step) => step.id === stepId);
+  if (index < 0) return null;
+  return Math.floor(index / Math.max(1, input.run.steps.length) * Math.max(1, input.run.durationMs));
+}
+function evidenceTimelineOffsetMs(input) {
+  if (!input.media.videoRefs?.length && input.media.videos.length === 0) return 0;
+  const firstStep = input.run.steps[0];
+  if (!firstStep) return 0;
+  return eventStepOffset(input, firstStep.id, "step.start") ?? 0;
+}
+function evidenceSourceMs(input, frame) {
+  const evidenceMs = Math.floor(frame / Math.max(1, input.render.fps) * 1e3);
+  return evidenceMs + evidenceTimelineOffsetMs(input);
+}
+function activeOverlayText(input, evidenceMs) {
+  const overlays = input.overlays.filter((overlay) => overlay.text);
+  return overlays.find((overlay) => {
+    const start = stepStartMs(input, overlay.at);
+    return start !== null && evidenceMs >= start && evidenceMs <= start + 6e3;
+  }) ?? null;
+}
+function activeOverlayDiagram(input, evidenceMs) {
+  const diagrams = input.renderDiagrams.filter((diagram) => diagram.placement === "overlay");
+  return diagrams.find((diagram) => {
+    const start = diagram.startOffsetMs ?? stepStartMs(input, diagram.at);
+    return start !== null && evidenceMs >= start && evidenceMs <= start + diagram.durationSeconds * 1e3;
+  }) ?? null;
+}
+function activeInterstitialDiagram(input, frame) {
+  let cursor = 0;
+  for (const diagram of input.renderDiagrams.filter((entry) => entry.placement !== "overlay")) {
+    const duration = Math.max(1, Math.ceil(diagram.durationSeconds * input.render.fps));
+    if (frame >= cursor && frame < cursor + duration) {
+      return { diagram, frame: frame - cursor };
+    }
+    cursor += duration;
+  }
+  return null;
+}
+function EvidenceFrame({ input, durationFrames }) {
+  const frame = useCurrentFrame();
+  const viewport = resolveEvidenceViewport(input);
+  const frameStyle = {
+    position: "absolute",
+    left: viewport.left,
+    top: viewport.top,
+    width: viewport.width,
+    height: viewport.height,
+    overflow: "hidden",
+    backgroundColor: "#111827",
+    boxShadow: viewport.left === 0 && viewport.top === 0 ? "none" : "0 24px 70px rgba(0,0,0,0.38)"
+  };
+  const videoFrames = input.media.videoFrames ?? [];
+  if (videoFrames.length > 0) {
+    const frameEntry = videoFrames[Math.min(videoFrames.length - 1, Math.max(0, frame))] ?? videoFrames[0];
+    return React.createElement("div", { style: frameStyle }, React.createElement(Img, {
+      src: staticFile(frameEntry.staticPath),
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "block",
+        width: "100%",
+        height: "100%",
+        objectFit: "fill",
+        backgroundColor: "#111827"
+      }
+    }));
+  }
+  const videoRef = input.media.videoRefs?.[0];
+  const videoSrc = videoRef?.staticPath ? staticFile(videoRef.staticPath) : videoRef?.src ?? input.media.videos[0];
+  if (videoSrc) {
+    return React.createElement("div", { style: frameStyle }, React.createElement(Video, {
+      src: videoSrc,
+      muted: true,
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "block",
+        width: "100%",
+        height: "100%",
+        minWidth: "100%",
+        minHeight: "100%",
+        maxWidth: "none",
+        maxHeight: "none",
+        objectFit: input.run.capture?.evidenceFit === "cover" ? "cover" : "fill",
+        backgroundColor: "#111827"
+      }
+    }));
+  }
+  const screenshots = [...input.media.screenshots].sort((a, b) => (a.offsetMs ?? Number.MAX_SAFE_INTEGER) - (b.offsetMs ?? Number.MAX_SAFE_INTEGER));
+  if (screenshots.length === 0) {
+    return React.createElement("div", { style: { color: "white", fontSize: 36 } }, "No browser media available");
+  }
+  const evidenceMs = evidenceSourceMs(input, frame);
+  const timed = screenshots.find((screenshot2, index) => {
+    const start = screenshot2.offsetMs ?? null;
+    const next = screenshots[index + 1]?.offsetMs ?? Number.MAX_SAFE_INTEGER;
+    return start !== null && evidenceMs >= start && evidenceMs < next;
+  });
+  const screenshotIndex = Math.min(screenshots.length - 1, Math.floor(frame / Math.max(1, durationFrames) * screenshots.length));
+  const screenshot = timed ?? screenshots[screenshotIndex];
+  const objectFit = screenshot.captureKind === "full-page" ? "cover" : "contain";
+  return React.createElement("div", { style: frameStyle }, React.createElement(Img, {
+    src: screenshot.src ?? screenshot.path,
+    style: {
+      width: "100%",
+      height: "100%",
+      objectFit: screenshot.captureKind === "viewport" ? "fill" : objectFit,
+      objectPosition: screenshot.captureKind === "full-page" ? "top center" : "center center",
+      backgroundColor: "#111827"
+    }
+  }));
+}
+function BrowserFrame({ input }) {
+  if (input.scene.render.remotion?.browserFrame?.enabled !== true) return null;
+  const viewport = resolveEvidenceViewport(input);
+  return React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: viewport.left,
+      top: viewport.top,
+      width: viewport.width,
+      height: 34,
+      background: "rgba(15,23,42,0.84)",
+      borderBottom: "1px solid rgba(148,163,184,0.32)",
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      padding: "0 12px",
+      boxSizing: "border-box",
+      fontFamily: "Inter, Arial, sans-serif",
+      color: "#cbd5e1",
+      fontSize: 13,
+      pointerEvents: "none"
+    }
+  }, React.createElement(
+    "div",
+    { style: { display: "flex", gap: 6 } },
+    React.createElement("span", { style: { width: 9, height: 9, borderRadius: 999, background: "#ef4444", display: "block" } }),
+    React.createElement("span", { style: { width: 9, height: 9, borderRadius: 999, background: "#f59e0b", display: "block" } }),
+    React.createElement("span", { style: { width: 9, height: 9, borderRadius: 999, background: "#22c55e", display: "block" } })
+  ), React.createElement("div", {
+    style: {
+      flex: 1,
+      height: 22,
+      borderRadius: 999,
+      background: "rgba(255,255,255,0.12)",
+      display: "flex",
+      alignItems: "center",
+      padding: "0 12px",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
+    }
+  }, input.scene.render.remotion.browserFrame.title ?? input.run.baseUrl ?? input.scene.target.baseUrl));
+}
+function LowerThird({ input }) {
+  const frame = useCurrentFrame();
+  const evidenceMs = evidenceSourceMs(input, frame);
+  const step = stepAtEvidenceMs(input, evidenceMs);
+  if (!step) return null;
+  return React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 48,
+        bottom: 42,
+        background: "rgba(15, 23, 42, 0.86)",
+        color: "white",
+        borderRadius: 6,
+        padding: "16px 20px",
+        fontFamily: "Inter, Arial, sans-serif",
+        maxWidth: 980,
+        boxShadow: "0 16px 40px rgba(0,0,0,0.25)"
+      }
+    },
+    React.createElement("div", { style: { fontSize: 17, color: "#93c5fd", textTransform: "uppercase" } }, step.id),
+    React.createElement("div", { style: { fontSize: 26, fontWeight: 700, marginTop: 4 } }, step.title)
+  );
+}
+function CaptionOverlay({ input }) {
+  const frame = useCurrentFrame();
+  if (input.render.mode !== "training" || input.scene.training?.captions?.renderInTrainingVideo === false || input.training.captions.length === 0) return null;
+  const ms = evidenceSourceMs(input, frame);
+  const cue = input.training.captions.find((entry) => ms >= entry.startMs && ms <= entry.endMs);
+  if (!cue) return null;
+  return React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: "50%",
+        bottom: 132,
+        transform: "translateX(-50%)",
+        width: 1040,
+        maxWidth: "82%",
+        minHeight: 64,
+        background: "rgba(15, 23, 42, 0.88)",
+        color: "#f8fafc",
+        border: "1px solid rgba(56,189,248,0.36)",
+        borderRadius: 8,
+        padding: "14px 22px",
+        fontFamily: "Inter, Arial, sans-serif",
+        fontSize: 26,
+        lineHeight: 1.22,
+        textAlign: "center",
+        boxShadow: "0 18px 42px rgba(0,0,0,0.34)"
+      }
+    },
+    React.createElement("span", { style: { color: "#38bdf8", marginRight: 10 } }, "Training"),
+    React.createElement("span", null, cue.text)
+  );
+}
+function Callouts({ input }) {
+  const frame = useCurrentFrame();
+  const evidenceMs = evidenceSourceMs(input, frame);
+  const overlay = activeOverlayText(input, evidenceMs);
+  if (!overlay?.text) return null;
+  const start = stepStartMs(input, overlay.at) ?? evidenceMs;
+  const localFrame = Math.max(0, Math.floor((evidenceMs - start) / 1e3 * input.render.fps));
+  const durationSeconds = overlay.durationSeconds ?? 6;
+  const opacity = overlay.motion ? void 0 : interpolate(localFrame, [0, 20, Math.max(21, durationSeconds * input.render.fps - 20), Math.max(22, durationSeconds * input.render.fps)], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const regionStyle = overlay.position ? { position: "absolute", left: overlay.position.unit === "percent" ? `${overlay.position.x}%` : overlay.position.x, top: overlay.position.unit === "percent" ? `${overlay.position.y}%` : overlay.position.y } : resolveVisualRegion(overlay.region ?? (overlay.variant === "lower-third" ? "bottom-left" : "top-right"), 48);
+  const sizeStyle = overlay.size ? { width: overlay.size.unit === "percent" ? `${overlay.size.width}%` : overlay.size.width, height: overlay.size.unit === "percent" ? `${overlay.size.height}%` : overlay.size.height } : {};
+  const variant = overlay.variant ?? (overlay.type === "callout" ? "callout" : "panel");
+  const variantStyle = variant === "badge" ? { width: "auto", maxWidth: 520, padding: "10px 14px", borderRadius: 999, fontSize: 18, fontWeight: 800 } : variant === "label" ? { width: 360, padding: "14px 16px", fontSize: 20, fontWeight: 700 } : variant === "lower-third" ? { width: 720, padding: "18px 22px", fontSize: 24, fontWeight: 700 } : { width: 480, padding: 24, fontSize: 24, fontWeight: 500 };
+  return React.createElement(
+    "div",
+    {
+      style: {
+        ...regionStyle,
+        ...variantStyle,
+        ...sizeStyle,
+        ...visualStyle({ tone: overlay.style?.tone ?? "neutral", ...overlay.style }),
+        borderLeftWidth: variant === "callout" || variant === "panel" ? 5 : overlay.style?.borderWidth ?? 1,
+        fontFamily: "Inter, Arial, sans-serif",
+        lineHeight: 1.3,
+        opacity,
+        boxSizing: "border-box",
+        overflow: "hidden",
+        ...interpolateSceneMotion({ motion: overlay.motion, frame: localFrame, fps: input.render.fps, durationSeconds })
+      }
+    },
+    React.createElement("div", {
+      style: { color: overlay.style?.color ?? treeseedSceneVideoTheme.text, whiteSpace: "pre-wrap" }
+    }, overlay.text),
+    ...(overlay.objects ?? []).map((object) => renderTreeseedVisualObject({ object, frame: localFrame, fps: input.render.fps, durationSeconds })).filter(Boolean)
+  );
+}
+function OverlayDiagram({ input }) {
+  const frame = useCurrentFrame();
+  const evidenceMs = evidenceSourceMs(input, frame);
+  const diagram = activeOverlayDiagram(input, evidenceMs);
+  if (!diagram) return null;
+  const start = diagram.startOffsetMs ?? stepStartMs(input, diagram.at) ?? evidenceMs;
+  const diagramFrame = Math.max(0, Math.floor((evidenceMs - start) / 1e3 * input.render.fps));
+  return React.createElement("div", {
+    style: {
+      position: "absolute",
+      right: 44,
+      bottom: 132,
+      width: 520,
+      height: 292,
+      ...visualStyle({ tone: diagram.style?.tone ?? "info", background: "#0f172a", ...diagram.style }),
+      border: `${diagram.style?.borderWidth ?? 1}px solid ${diagram.style?.borderColor ?? "rgba(56,189,248,0.45)"}`,
+      borderRadius: diagram.style?.radius ?? 8,
+      overflow: "hidden",
+      ...interpolateSceneMotion({ motion: diagram.motion, frame: diagramFrame, fps: input.render.fps, durationSeconds: diagram.durationSeconds })
+    }
+  }, renderTreeseedSceneDiagram({ diagram, frame: diagramFrame, fps: input.render.fps, width: 520, height: 292 }));
+}
+function ChapterBanner({ input }) {
+  const frame = useCurrentFrame();
+  if (input.chapters.length === 0) return null;
+  const evidenceMs = evidenceSourceMs(input, frame);
+  const step = stepAtEvidenceMs(input, evidenceMs);
+  const chapter = step ? input.chapters.find((entry) => entry.stepIds.includes(step.id)) ?? input.chapters[0] : input.chapters[0];
+  const viewport = resolveEvidenceViewport(input);
+  const hasBrowserFrame = input.scene.render.remotion?.browserFrame?.enabled === true;
+  return React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: hasBrowserFrame ? viewport.left + 24 : 48,
+      top: hasBrowserFrame ? viewport.top + 48 : 38,
+      color: "#e0f2fe",
+      fontFamily: "Inter, Arial, sans-serif",
+      fontSize: 20,
+      fontWeight: 700,
+      textShadow: "0 2px 12px rgba(0,0,0,0.5)"
+    }
+  }, chapter.title);
+}
+function renderShell(input, subtitle) {
+  const config = useVideoConfig();
+  const layout = treeseedSceneRenderLayout(input);
+  return React.createElement(
+    AbsoluteFill,
+    { style: { backgroundColor: "#111827" } },
+    layout.introFrames > 0 ? React.createElement(Sequence, { from: 0, durationInFrames: layout.introFrames }, titleCard(input, subtitle)) : null,
+    layout.interstitialFrames > 0 ? React.createElement(Sequence, { from: layout.introFrames, durationInFrames: layout.interstitialFrames }, React.createElement(InterstitialDiagrams, { input, width: config.width, height: config.height })) : null,
+    React.createElement(
+      Sequence,
+      { from: layout.evidenceStartFrame, durationInFrames: layout.evidenceDurationInFrames },
+      React.createElement(EvidenceFrame, { input, durationFrames: layout.evidenceDurationInFrames }),
+      React.createElement(BrowserFrame, { input }),
+      React.createElement(ChapterBanner, { input }),
+      React.createElement(LowerThird, { input }),
+      React.createElement(CaptionOverlay, { input }),
+      React.createElement(Callouts, { input }),
+      React.createElement(OverlayDiagram, { input })
+    )
+  );
+}
+function InterstitialDiagrams({ input, width, height }) {
+  const frame = useCurrentFrame();
+  const diagram = activeInterstitialDiagram(input, frame);
+  if (!diagram) return null;
+  return renderTreeseedSceneDiagram({ diagram: diagram.diagram, frame: diagram.frame, fps: input.render.fps, width, height });
+}
+function DemoDefault(input) {
+  return renderShell(input, "Workflow evidence rendered from scene timeline artifacts.");
+}
+function TrainingDefault(input) {
+  return renderShell(input, input.scene.description ?? "Training walkthrough rendered from reusable scene evidence.");
+}
+function FailureReview(input) {
+  const failed = input.run.steps.find((step) => step.id === input.run.failedStep);
+  return renderShell(input, failed?.error ? `${failed.id}: ${failed.error.message}` : "Failure review from scene evidence.");
+}
+function DiagramOnly(input) {
+  const frame = useCurrentFrame();
+  const config = useVideoConfig();
+  const diagrams = input.renderDiagrams;
+  if (diagrams.length === 0) {
+    return React.createElement(AbsoluteFill, { style: { backgroundColor: "#0f172a", color: "#f8fafc", fontFamily: "Inter, Arial, sans-serif", justifyContent: "center", alignItems: "center", fontSize: 34 } }, "No validated diagrams available");
+  }
+  let cursor = 0;
+  for (const diagram of diagrams) {
+    const duration = Math.max(1, Math.ceil(diagram.durationSeconds * input.render.fps));
+    if (frame >= cursor && frame < cursor + duration) {
+      return renderTreeseedSceneDiagram({ diagram, frame: frame - cursor, fps: input.render.fps, width: config.width, height: config.height });
+    }
+    cursor += duration;
+  }
+  const last = diagrams[diagrams.length - 1];
+  return renderTreeseedSceneDiagram({ diagram: last, frame: Math.max(0, Math.ceil(last.durationSeconds * input.render.fps) - 1), fps: input.render.fps, width: config.width, height: config.height });
+}
+function TreeseedSceneRemotionRoot() {
+  const defaultProps = {
+    schemaVersion: "treeseed.scene.render-input/v1",
+    scene: { id: "treeseed-render-preview", title: "Treeseed Scene Render Preview", description: "", audience: [], workflow: [], chapters: [], overlays: [], diagrams: [], runtime: { mode: "demo" }, render: {} },
+    run: { runId: "treeseed-render-preview", steps: [], workflowStatus: "passed", durationMs: 8e3, renderedVideoPaths: [] },
+    timeline: [],
+    chapters: [],
+    segments: [],
+    checkpoints: [],
+    overlays: [],
+    diagrams: [],
+    renderDiagrams: [],
+    training: { captions: [], transcript: [], narration: [], glossary: [], chapterClips: [] },
+    media: { videos: [], screenshots: [] },
+    render: { mode: "demo", composition: "treeseed-demo-default", fps: 30, width: 1920, height: 1080, durationInFrames: 240, format: "mp4" }
+  };
+  const compositions = [
+    ["treeseed-demo-default", DemoDefault],
+    ["treeseed-training-default", TrainingDefault],
+    ["treeseed-failure-review", FailureReview],
+    ["treeseed-diagram-only", DiagramOnly]
+  ];
+  return React.createElement(React.Fragment, null, ...compositions.map(([id, component]) => React.createElement(Composition, {
+    key: id,
+    id,
+    component,
+    durationInFrames: defaultProps.render.durationInFrames,
+    fps: defaultProps.render.fps,
+    width: defaultProps.render.width,
+    height: defaultProps.render.height,
+    defaultProps,
+    calculateMetadata: ({ props }) => ({
+      durationInFrames: props.render.durationInFrames,
+      fps: props.render.fps,
+      width: props.render.width,
+      height: props.render.height
+    })
+  })));
+}
+registerRoot(TreeseedSceneRemotionRoot);
+export {
+  TreeseedSceneRemotionRoot,
+  resolveEvidenceViewport,
+  treeseedSceneRenderLayout
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { TreeseedSceneRenderDiagram } from './types.js';
+export declare function renderTreeseedSceneDiagram(input: {
+    diagram: TreeseedSceneRenderDiagram;
+    frame: number;
+    fps: number;
+    width: number;
+    height: number;
+}): React.ReactElement;

package/dist/scenes/remotion-diagrams.js

@@ -0,0 +1,188 @@
+import React from "react";
+import { interpolate } from "remotion";
+import { interpolateSceneMotion, renderTreeseedVisualObject, visualStyle } from "./remotion-visuals.js";
+const colors = {
+  bg: "#0f172a",
+  panel: "#172033",
+  text: "#f8fafc",
+  muted: "#cbd5e1",
+  accent: "#38bdf8",
+  success: "#22c55e",
+  warning: "#f59e0b",
+  error: "#ef4444",
+  line: "#334155"
+};
+function text(value, fallback = "") {
+  return typeof value === "string" && value.trim() ? value.trim() : fallback;
+}
+function array(value, fallback) {
+  return Array.isArray(value) ? value : fallback;
+}
+function title(value) {
+  return React.createElement("div", {
+    style: { color: colors.text, fontSize: 46, fontWeight: 800, marginBottom: 40, maxWidth: 1500 }
+  }, value);
+}
+function frameShell(children) {
+  return React.createElement("div", {
+    style: {
+      width: "100%",
+      height: "100%",
+      background: colors.bg,
+      color: colors.text,
+      fontFamily: "Inter, Arial, sans-serif",
+      padding: 80,
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center"
+    }
+  }, children);
+}
+function diagramShell(diagram, frame, fps, children) {
+  return React.createElement(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+        ...visualStyle({ background: colors.bg, color: colors.text, borderWidth: 0, shadow: "none", ...diagram.style }),
+        ...interpolateSceneMotion({ motion: diagram.motion, frame, fps, durationSeconds: diagram.durationSeconds })
+      }
+    },
+    children,
+    ...(diagram.objects ?? []).map((object) => renderTreeseedVisualObject({ object, frame, fps, durationSeconds: diagram.durationSeconds })).filter(Boolean)
+  );
+}
+function progress(frame, fps, durationSeconds) {
+  return Math.max(0, Math.min(1, frame / Math.max(1, durationSeconds * fps)));
+}
+function OperationLifecycleDiagram(diagram, frame, fps) {
+  const props = diagram.props;
+  const states = array(props.states, ["queued", "claimed", "running", "verified", "completed"]).map((entry) => String(entry));
+  const activeState = text(props.activeState);
+  const pct = progress(frame, fps, diagram.durationSeconds);
+  const activeIndex = activeState ? Math.max(0, states.indexOf(activeState)) : Math.min(states.length - 1, Math.floor(pct * states.length));
+  return frameShell(React.createElement(
+    React.Fragment,
+    null,
+    title(text(props.title, "Operation lifecycle")),
+    React.createElement(
+      "div",
+      { style: { display: "grid", gridTemplateColumns: `repeat(${states.length}, minmax(0, 1fr))`, gap: 18, alignItems: "center" } },
+      ...states.map((state, index) => {
+        const active = index <= activeIndex;
+        return React.createElement(
+          "div",
+          { key: state, style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 16 } },
+          React.createElement("div", { style: { width: 86, height: 86, borderRadius: 43, background: active ? colors.success : colors.panel, border: `4px solid ${active ? colors.success : colors.line}`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 28, fontWeight: 800 } }, String(index + 1)),
+          React.createElement("div", { style: { color: active ? colors.text : colors.muted, fontSize: 24, fontWeight: active ? 800 : 600, textAlign: "center" } }, state)
+        );
+      })
+    ),
+    React.createElement(
+      "div",
+      { style: { marginTop: 46, height: 10, background: colors.line, borderRadius: 6, overflow: "hidden" } },
+      React.createElement("div", { style: { width: `${interpolate(pct, [0, 1], [0, 100])}%`, height: "100%", background: colors.accent } })
+    )
+  ));
+}
+function ReconciliationLifecycleDiagram(diagram, frame, fps) {
+  const props = diagram.props;
+  const stages = array(props.stages, ["refresh", "diff", "plan", "validate", "apply", "refresh", "verify", "persist"]).map((entry) => String(entry));
+  const pct = progress(frame, fps, diagram.durationSeconds);
+  const activeIndex = Math.min(stages.length - 1, Math.floor(pct * stages.length));
+  return frameShell(React.createElement(
+    React.Fragment,
+    null,
+    title(text(props.title, "Reconciliation lifecycle")),
+    React.createElement(
+      "div",
+      { style: { display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: 18 } },
+      ...stages.map((stage, index) => {
+        const active = index <= activeIndex;
+        return React.createElement(
+          "div",
+          { key: `${stage}-${index}`, style: { minHeight: 132, border: `2px solid ${active ? colors.accent : colors.line}`, borderRadius: 8, padding: 22, background: active ? "#123044" : colors.panel } },
+          React.createElement("div", { style: { color: active ? colors.accent : colors.muted, fontSize: 18, fontWeight: 800 } }, `0${index + 1}`.slice(-2)),
+          React.createElement("div", { style: { marginTop: 14, fontSize: 28, fontWeight: 800 } }, stage)
+        );
+      })
+    ),
+    React.createElement("div", { style: { marginTop: 38, color: colors.muted, fontSize: 24 } }, `Current stage: ${stages[activeIndex] ?? stages[0]}`)
+  ));
+}
+function DevRuntimeTopologyDiagram(diagram, frame, fps) {
+  const props = diagram.props;
+  const surfaces = array(props.surfaces, []).map((entry) => entry && typeof entry === "object" ? entry : {});
+  const links = array(props.links, []).map((entry) => entry && typeof entry === "object" ? entry : {});
+  const pct = progress(frame, fps, diagram.durationSeconds);
+  return frameShell(React.createElement(
+    React.Fragment,
+    null,
+    title(text(props.title, "Managed dev topology")),
+    React.createElement(
+      "div",
+      { style: { display: "grid", gridTemplateColumns: `repeat(${Math.max(1, surfaces.length)}, minmax(0, 1fr))`, gap: 32, alignItems: "center" } },
+      ...surfaces.map((surface, index) => React.createElement(
+        "div",
+        { key: String(surface.id ?? index), style: { border: `3px solid ${colors.accent}`, background: colors.panel, borderRadius: 8, padding: 28, minHeight: 180 } },
+        React.createElement("div", { style: { fontSize: 34, fontWeight: 800 } }, text(surface.label, String(surface.id ?? `surface-${index}`))),
+        React.createElement("div", { style: { marginTop: 16, fontSize: 22, color: colors.muted } }, text(surface.kind, "service"))
+      ))
+    ),
+    React.createElement(
+      "div",
+      { style: { marginTop: 42, display: "grid", gap: 14 } },
+      ...links.map((link, index) => React.createElement("div", { key: index, style: { color: index / Math.max(1, links.length) <= pct ? colors.success : colors.muted, fontSize: 24 } }, `${text(link.from)} -> ${text(link.to)}${link.label ? ` (${text(link.label)})` : ""}`))
+    )
+  ));
+}
+function SceneExecutionTimelineDiagram(diagram, frame, fps) {
+  const props = diagram.props;
+  const steps = array(props.steps, []).map((entry) => entry && typeof entry === "object" ? entry : {});
+  const chapters = array(props.chapters, []).map((entry) => entry && typeof entry === "object" ? entry : {});
+  const checkpoints = array(props.checkpoints, []).map((entry) => entry && typeof entry === "object" ? entry : {});
+  const pct = progress(frame, fps, diagram.durationSeconds);
+  const visibleSteps = Math.max(1, Math.ceil(pct * Math.max(1, steps.length)));
+  return frameShell(React.createElement(
+    React.Fragment,
+    null,
+    title(text(props.title, "Scene execution timeline")),
+    React.createElement(
+      "div",
+      { style: { display: "grid", gap: 16 } },
+      ...steps.slice(0, visibleSteps).map((step, index) => {
+        const failed = step.id === props.failedStep || step.status === "failed";
+        return React.createElement(
+          "div",
+          { key: String(step.id ?? index), style: { display: "grid", gridTemplateColumns: "80px 1fr 180px", gap: 18, alignItems: "center", color: colors.text } },
+          React.createElement("div", { style: { color: failed ? colors.error : colors.accent, fontSize: 22, fontWeight: 800 } }, `#${index + 1}`),
+          React.createElement(
+            "div",
+            { style: { borderLeft: `5px solid ${failed ? colors.error : colors.success}`, background: colors.panel, borderRadius: 8, padding: 18 } },
+            React.createElement("div", { style: { fontSize: 24, fontWeight: 800 } }, text(step.title, String(step.id ?? "step"))),
+            React.createElement("div", { style: { marginTop: 8, color: colors.muted, fontSize: 17 } }, String(step.id ?? ""))
+          ),
+          React.createElement("div", { style: { color: failed ? colors.error : colors.success, fontSize: 20, fontWeight: 800 } }, text(step.status, "planned"))
+        );
+      })
+    ),
+    React.createElement(
+      "div",
+      { style: { marginTop: 30, display: "flex", gap: 28, color: colors.muted, fontSize: 22 } },
+      React.createElement("span", null, `${chapters.length} chapters`),
+      React.createElement("span", null, `${array(props.segments, []).length} segments`),
+      React.createElement("span", null, `${checkpoints.length} checkpoints`)
+    )
+  ));
+}
+function renderTreeseedSceneDiagram(input) {
+  const content = input.diagram.kind === "operation-lifecycle" ? OperationLifecycleDiagram(input.diagram, input.frame, input.fps) : input.diagram.kind === "reconciliation-lifecycle" ? ReconciliationLifecycleDiagram(input.diagram, input.frame, input.fps) : input.diagram.kind === "dev-runtime-topology" ? DevRuntimeTopologyDiagram(input.diagram, input.frame, input.fps) : SceneExecutionTimelineDiagram(input.diagram, input.frame, input.fps);
+  return diagramShell(input.diagram, input.frame, input.fps, content);
+}
+export {
+  renderTreeseedSceneDiagram
+};

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

@@ -0,0 +1,13 @@
+import type { TreeseedSceneRenderFormat, TreeseedSceneRenderInputLoadReport, TreeseedSceneRenderMode } from './types.js';
+export declare function defaultTreeseedSceneRemotionComposition(mode: TreeseedSceneRenderMode): "treeseed-demo-default" | "treeseed-training-default" | "treeseed-failure-review" | "treeseed-diagram-only";
+export declare function loadTreeseedSceneRenderInput(input: {
+    projectRoot: string;
+    scene: string;
+    from: string;
+    mode?: TreeseedSceneRenderMode;
+    composition?: string;
+    format?: TreeseedSceneRenderFormat;
+    chapterId?: string;
+    renderer?: string;
+    device?: string;
+}): TreeseedSceneRenderInputLoadReport;