@scenar/remotion 0.11.0 → 0.12.0

package/PresentationStack.d.ts

@@ -0,0 +1,69 @@
+import { type ReactNode } from "react";
+import { type NarrationManifest, type ScenarioBundle } from "@scenar/core";
+/**
+ * The canonical viewport a scenario lays out at inside the video frame.
+ * Mirrors the embed's `ScenarEmbedViewport` vocabulary (`widthPx` /
+ * `heightPx`) — the same numbers a bundle would announce over the embed
+ * handshake.
+ */
+export interface RenderViewport {
+    readonly widthPx: number;
+    readonly heightPx: number;
+}
+/**
+ * The contain-fit placement of a canonical box inside a video frame: one
+ * uniform scale factor (the DD-008 rule — the frame boundary owns the only
+ * scale), centered with letterbox/pillarbox margins on the shorter axis.
+ * Exported for tests.
+ */
+export declare function computeContainFit(frameWidth: number, frameHeight: number, boxWidth: number, boxHeight: number): {
+    scale: number;
+    offsetX: number;
+    offsetY: number;
+};
+interface PresentationStackProps<T> {
+    /** The applied bundle (cards synthesized) the player renders. */
+    bundle: ScenarioBundle<T> & {
+        narrationManifest?: NarrationManifest;
+    };
+    captions: boolean;
+    viewport: RenderViewport;
+    /** Wrap each step's content in `<ScenarioStage>` (staged bundles). */
+    stage: boolean;
+    /** Render the cursor overlay for interactions. */
+    cursor: boolean;
+    children: (data: T, stepIndex: number) => ReactNode;
+}
+/**
+ * The full presentation stack for the video-export path — the same stack
+ * the packed embed entry mounts around the player (scenar#35), assembled
+ * from the pieces that are already frame-driven under a TimeSource:
+ *
+ *   fixed canonical box (geometry the embed's DemoViewport provides)
+ *     └ ViewportTransformLayer(camera — its export path interpolates
+ *       per frame with `interpolateViewportTransform`)
+ *         └ ScenarioPlayer
+ *         └ Cursor              ← child of the camera, so it scales and
+ *                                 pans with the content under a zoom
+ *   + useStepInteractions       ← switches to the frame-driven scheduler
+ *                                 whenever a TimeSource is present
+ *
+ * Geometry: `DemoViewport` is deliberately a passthrough under
+ * `isVideoExport` (see ScenarioCaptureMount), so this stack owns it — a
+ * definite canonical box (`viewport.widthPx` × `heightPx`) exposing the
+ * `--scenar-shell-height` variable the shells consume, contain-fit into
+ * the composition frame with exactly one scale factor (DD-008). Without a
+ * definite box, surfaces that size through the shell-geometry contract
+ * collapse to zero height — the scenar#35 black frames.
+ *
+ * Interaction state assumes frames render in timeline order — the same
+ * sequential model `ScenarioCaptureMount.walkTo` documents. The render
+ * pipeline enforces it by rendering with concurrency 1.
+ *
+ * Must render below the composition's `TimeSourceProvider`, or
+ * `useStepInteractions` silently selects the wall-clock browser path
+ * (the capture mount's load-bearing lesson).
+ */
+export declare function PresentationStack<T>({ bundle, captions, viewport, stage, cursor, children, }: PresentationStackProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PresentationStack.d.ts.map

package/PresentationStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresentationStack.d.ts","sourceRoot":"","sources":["../src/PresentationStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAiC,MAAM,OAAO,CAAC;AAEtE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAC;AAStB;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,GAChB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAOrD;AAED,UAAU,sBAAsB,CAAC,CAAC;IAChC,iEAAiE;IACjE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;QAAE,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;KAAE,CAAC;IACtE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,cAAc,CAAC;IACzB,sEAAsE;IACtE,KAAK,EAAE,OAAO,CAAC;IACf,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,CAAC;CACrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,EACnC,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,sBAAsB,CAAC,CAAC,CAAC,2CA+F3B"}

package/PresentationStack.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { useVideoConfig } from "remotion";
+import { VIEWPORT_TRANSFORM_IDENTITY, } from "@scenar/core";
+import { Cursor, ScenarioPlayer, ScenarioStage, ViewportTransformLayer, useStepInteractions, } from "@scenar/react";
+/**
+ * The contain-fit placement of a canonical box inside a video frame: one
+ * uniform scale factor (the DD-008 rule — the frame boundary owns the only
+ * scale), centered with letterbox/pillarbox margins on the shorter axis.
+ * Exported for tests.
+ */
+export function computeContainFit(frameWidth, frameHeight, boxWidth, boxHeight) {
+    const scale = Math.min(frameWidth / boxWidth, frameHeight / boxHeight);
+    return {
+        scale,
+        offsetX: (frameWidth - boxWidth * scale) / 2,
+        offsetY: (frameHeight - boxHeight * scale) / 2,
+    };
+}
+/**
+ * The full presentation stack for the video-export path — the same stack
+ * the packed embed entry mounts around the player (scenar#35), assembled
+ * from the pieces that are already frame-driven under a TimeSource:
+ *
+ *   fixed canonical box (geometry the embed's DemoViewport provides)
+ *     └ ViewportTransformLayer(camera — its export path interpolates
+ *       per frame with `interpolateViewportTransform`)
+ *         └ ScenarioPlayer
+ *         └ Cursor              ← child of the camera, so it scales and
+ *                                 pans with the content under a zoom
+ *   + useStepInteractions       ← switches to the frame-driven scheduler
+ *                                 whenever a TimeSource is present
+ *
+ * Geometry: `DemoViewport` is deliberately a passthrough under
+ * `isVideoExport` (see ScenarioCaptureMount), so this stack owns it — a
+ * definite canonical box (`viewport.widthPx` × `heightPx`) exposing the
+ * `--scenar-shell-height` variable the shells consume, contain-fit into
+ * the composition frame with exactly one scale factor (DD-008). Without a
+ * definite box, surfaces that size through the shell-geometry contract
+ * collapse to zero height — the scenar#35 black frames.
+ *
+ * Interaction state assumes frames render in timeline order — the same
+ * sequential model `ScenarioCaptureMount.walkTo` documents. The render
+ * pipeline enforces it by rendering with concurrency 1.
+ *
+ * Must render below the composition's `TimeSourceProvider`, or
+ * `useStepInteractions` silently selects the wall-clock browser path
+ * (the capture mount's load-bearing lesson).
+ */
+export function PresentationStack({ bundle, captions, viewport, stage, cursor, children, }) {
+    const { width: frameWidth, height: frameHeight } = useVideoConfig();
+    const containerRef = useRef(null);
+    const cameraRef = useRef(null);
+    const [stepIndex, setStepIndex] = useState(0);
+    const [cursorTarget, setCursorTarget] = useState(undefined);
+    const [showRipple, setShowRipple] = useState(true);
+    const [dragging, setDragging] = useState(false);
+    const [cameraTransform, setCameraTransform] = useState(VIEWPORT_TRANSFORM_IDENTITY);
+    // Reset the cursor when the step changes so a prior step's target never
+    // lingers; the new step's interactions re-set it at their scheduled time.
+    // One handler feeds both step-change callbacks: authored steps deliver
+    // data, card steps deliver the card — the wiring needs only the index,
+    // and it must track BOTH so card-step interactions (the outro's
+    // cursor-clear and viewport-reset housekeeping) reach the scheduler.
+    // Mirrors the packed embed entry's handler exactly, so the two outputs
+    // cannot diverge on cursor semantics.
+    const handleStepChange = useCallback((_dataOrCard, index) => {
+        setStepIndex(index);
+        setCursorTarget(undefined);
+    }, []);
+    useStepInteractions({
+        stepIndex,
+        narrationManifest: bundle.narrationManifest,
+        containerRef,
+        cameraRef,
+        setCursorTarget,
+        setShowRipple,
+        setDragging,
+        setViewportTransform: setCameraTransform,
+        steps: bundle.steps,
+    });
+    const fit = computeContainFit(frameWidth, frameHeight, viewport.widthPx, viewport.heightPx);
+    return (
+    // The letterbox/pillarbox canvas: painted with the theme surface token
+    // so uncovered margins read as an intentional page, not dead pixels.
+    _jsx("div", { style: {
+            position: "absolute",
+            inset: 0,
+            background: "var(--scenar-surface)",
+        }, children: _jsx("div", { ref: containerRef, style: {
+                position: "absolute",
+                left: fit.offsetX,
+                top: fit.offsetY,
+                width: viewport.widthPx,
+                height: viewport.heightPx,
+                transform: `scale(${fit.scale})`,
+                transformOrigin: "top left",
+                overflow: "hidden",
+                "--scenar-shell-height": `${viewport.heightPx}px`,
+            }, children: _jsxs(ViewportTransformLayer, { transform: cameraTransform, contentRef: cameraRef, children: [_jsx(ScenarioPlayer, { bundle: bundle, captions: captions, onStepChange: handleStepChange, onCardStepChange: handleStepChange, children: stage
+                            ? (data, i) => _jsx(ScenarioStage, { children: children(data, i) })
+                            : children }), cursor && (_jsx(Cursor, { target: cursorTarget, containerRef: cameraRef, showRipple: showRipple, isDragging: dragging }))] }) }) }));
+}
+//# sourceMappingURL=PresentationStack.js.map

package/PresentationStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresentationStack.js","sourceRoot":"","sources":["../src/PresentationStack.tsx"],"names":[],"mappings":"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"}

package/ScenarioComposition.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { type ScenarioBundle, type SfxSound } from "@scenar/core";
+import { type RenderViewport } from "./PresentationStack.js";
 interface ScenarioCompositionProps<T> {
     /** Self-contained scenario bundle with steps and optional narration. */
     bundle: ScenarioBundle<T>;
@@ -28,6 +29,29 @@ interface ScenarioCompositionProps<T> {
      * render` stages them at (`soundtrack/sfx/<name>.mp3`).
      */
     sfxSrcs?: Record<SfxSound, string>;
+    /**
+     * Mount the full presentation stack around the player — the same stack
+     * packed embeds mount: a definite canonical box contain-fit into the
+     * video frame (the geometry `DemoViewport` provides in browsers but
+     * deliberately passes through under `isVideoExport`), the
+     * `ViewportTransformLayer` camera, the `Cursor`, and TimeSource-driven
+     * step interactions. Without it, only step content renders:
+     * interactions' visible effects are absent from the MP4 and surfaces
+     * that size through the shell-geometry contract
+     * (`--scenar-shell-height`) collapse (scenar#35). Omitted, the
+     * composition keeps its prior bare-player output.
+     */
+    viewport?: RenderViewport;
+    /**
+     * Wrap each step's content in `<ScenarioStage>` (staged bundles — the
+     * `scenar pack --stage` presentation). Only meaningful with `viewport`.
+     */
+    stage?: boolean;
+    /**
+     * Render the cursor overlay for interactions. Defaults to true; only
+     * meaningful with `viewport`.
+     */
+    cursor?: boolean;
 }
 /**
  * Root component for rendering a Scenar scenario as a Remotion video.
@@ -71,6 +95,6 @@ interface ScenarioCompositionProps<T> {
  * );
  * ```
  */
-export declare function ScenarioComposition<T>({ bundle, children, fps: fpsProp, useStaticFile: useStaticFileProp, captions, sfxSrcs, }: ScenarioCompositionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ScenarioComposition<T>({ bundle, children, fps: fpsProp, useStaticFile: useStaticFileProp, captions, sfxSrcs, viewport, stage, cursor, }: ScenarioCompositionProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ScenarioComposition.d.ts.map

package/ScenarioComposition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScenarioComposition.d.ts","sourceRoot":"","sources":["../src/ScenarioComposition.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAShD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,QAAQ,EAId,MAAM,cAAc,CAAC;AA4BtB,UAAU,wBAAwB,CAAC,CAAC;IAClC,wEAAwE;IACxE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC1B,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,CAAC;IACpD,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACrC,MAAM,EACN,QAAQ,EACR,GAAG,EAAE,OAAO,EACZ,aAAa,EAAE,iBAAwB,EACvC,QAAgB,EAChB,OAA0B,GAC3B,EAAE,wBAAwB,CAAC,CAAC,CAAC,2CA6I7B"}
+{"version":3,"file":"ScenarioComposition.d.ts","sourceRoot":"","sources":["../src/ScenarioComposition.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAShD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,QAAQ,EAId,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAsBhF,UAAU,wBAAwB,CAAC,CAAC;IAClC,wEAAwE;IACxE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC1B,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,CAAC;IACpD,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACnC;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACrC,MAAM,EACN,QAAQ,EACR,GAAG,EAAE,OAAO,EACZ,aAAa,EAAE,iBAAwB,EACvC,QAAgB,EAChB,OAA0B,EAC1B,QAAQ,EACR,KAAa,EACb,MAAa,GACd,EAAE,wBAAwB,CAAC,CAAC,CAAC,2CA6J7B"}

package/ScenarioComposition.js

@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { Audio, OffthreadVideo, Sequence, staticFile, useCurrentFrame, useVideoConfig, } from "remotion";
 import { computeMusicEnvelope, deriveSfxTimeline, musicGainAt, } from "@scenar/core";
 import { TimeSourceProvider, VideoExportProvider, ScenarioPlayer, } from "@scenar/react";
+import { PresentationStack } from "./PresentationStack.js";
 import { msToFrames, useScenarioTimeline } from "./useScenarioTimeline.js";
 const DEFAULT_FPS = 30;
 /**
@@ -62,7 +63,7 @@ const DEFAULT_SFX_SRCS = {
  * );
  * ```
  */
-export function ScenarioComposition({ bundle, children, fps: fpsProp, useStaticFile: useStaticFileProp = true, captions = false, sfxSrcs = DEFAULT_SFX_SRCS, }) {
+export function ScenarioComposition({ bundle, children, fps: fpsProp, useStaticFile: useStaticFileProp = true, captions = false, sfxSrcs = DEFAULT_SFX_SRCS, viewport, stage = false, cursor = true, }) {
     const videoConfig = useVideoConfig();
     const fps = fpsProp ?? videoConfig.fps ?? DEFAULT_FPS;
     const frame = useCurrentFrame();
@@ -122,7 +123,12 @@ export function ScenarioComposition({ bundle, children, fps: fpsProp, useStaticF
             src: sfxSrcs[event.sound],
         }));
     }, [soundtrack, bundle.steps, bundle.narrationManifest, timeline, fps, sfxSrcs]);
-    return (_jsxs(_Fragment, { children: [_jsx(TimeSourceProvider, { currentTimeMs: currentTimeMs, stepStartTimesMs: timeline.stepStartTimesMs, children: _jsx(VideoExportProvider, { presenterMedia: presenterMedia, children: _jsx(ScenarioPlayer, { bundle: playerBundle, captions: captions, children: children }) }) }), timeline.audioClips.map((clip) => (_jsx(Sequence, { from: clip.startFrame, durationInFrames: clip.durationFrames, children: _jsx(Audio, { src: resolveAssetSrc(clip.src, useStaticFileProp) }) }, clip.stepIndex))), soundtrack?.musicSrc && (
+    return (_jsxs(_Fragment, { children: [_jsx(TimeSourceProvider, { currentTimeMs: currentTimeMs, stepStartTimesMs: timeline.stepStartTimesMs, children: _jsx(VideoExportProvider, { presenterMedia: presenterMedia, children: viewport ? (
+                    // The full presentation stack (scenar#35). Rendered below the
+                    // TimeSourceProvider on purpose: its useStepInteractions call
+                    // must see the time source or it silently selects the
+                    // wall-clock browser scheduler (the capture mount's lesson).
+                    _jsx(PresentationStack, { bundle: playerBundle, captions: captions, viewport: viewport, stage: stage, cursor: cursor, children: children })) : (_jsx(ScenarioPlayer, { bundle: playerBundle, captions: captions, children: children })) }) }), timeline.audioClips.map((clip) => (_jsx(Sequence, { from: clip.startFrame, durationInFrames: clip.durationFrames, children: _jsx(Audio, { src: resolveAssetSrc(clip.src, useStaticFileProp) }) }, clip.stepIndex))), soundtrack?.musicSrc && (
             // The music spans the whole composition: `loop` folds a shorter
             // asset seamlessly; the volume function carries fade-in, ducking,
             // and the closing fade-out, so no trim math is needed here.

package/ScenarioComposition.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScenarioComposition.js","sourceRoot":"","sources":["../src/ScenarioComposition.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScenarioComposition.js","sourceRoot":"","sources":["../src/ScenarioComposition.tsx"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -1,6 +1,8 @@
 export type { ScenarioBundle, NarrationManifest, ScenarioStep, StepTimeline, TitleCard, TitleCards, StepCard, AppliedTitleCards, } from "@scenar/core";
 export { applyTitleCards } from "@scenar/core";
 export { ScenarioComposition } from "./ScenarioComposition.js";
+export type { RenderViewport } from "./PresentationStack.js";
+export { PresentationStack, computeContainFit } from "./PresentationStack.js";
 export type { ScenarioTimeline, AudioClip } from "./useScenarioTimeline.js";
 export { useScenarioTimeline, calculateScenarioTimeline, msToFrames, } from "./useScenarioTimeline.js";
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,YAAY,EACV,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,UAAU,EACV,QAAQ,EACR,iBAAiB,GAClB,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D,YAAY,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,UAAU,GACX,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,YAAY,EACV,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,UAAU,EACV,QAAQ,EACR,iBAAiB,GAClB,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAK/D,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG9E,YAAY,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,UAAU,GACX,MAAM,0BAA0B,CAAC"}

package/index.js

@@ -6,5 +6,6 @@
 export { applyTitleCards } from "@scenar/core";
 // Composition
 export { ScenarioComposition } from "./ScenarioComposition.js";
+export { PresentationStack, computeContainFit } from "./PresentationStack.js";
 export { useScenarioTimeline, calculateScenarioTimeline, msToFrames, } from "./useScenarioTimeline.js";
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,iEAAiE;AAajE,sEAAsE;AACtE,sEAAsE;AACtE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,cAAc;AACd,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAI/D,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,UAAU,GACX,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,iEAAiE;AAajE,sEAAsE;AACtE,sEAAsE;AACtE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,cAAc;AACd,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAM/D,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAI9E,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,UAAU,GACX,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenar/remotion",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Remotion integration for Scenar — render scenario demos as pixel-perfect MP4 videos.",
   "license": "Apache-2.0",
   "type": "module",
@@ -29,8 +29,8 @@
     }
   },
   "dependencies": {
-    "@scenar/core": "0.11.0",
-    "@scenar/react": "0.11.0"
+    "@scenar/core": "0.12.0",
+    "@scenar/react": "0.12.0"
   },
   "peerDependencies": {
     "@remotion/renderer": "4.0.448",

package/src/PresentationStack.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import { computeContainFit } from "./PresentationStack.js";
+
+/**
+ * The contain-fit math is the presentation stack's one piece of geometry:
+ * a single uniform scale factor (DD-008 — the frame boundary owns the only
+ * scale), centered margins on the shorter axis.
+ */
+describe("computeContainFit", () => {
+  it("pillarboxes a 16:10 canonical box in a 16:9 frame (the render default)", () => {
+    const fit = computeContainFit(1920, 1080, 1440, 900);
+    expect(fit.scale).toBeCloseTo(1080 / 900); // height-limited: 1.2
+    expect(fit.offsetY).toBe(0);
+    expect(fit.offsetX).toBeCloseTo((1920 - 1440 * 1.2) / 2); // 96px pillars
+  });
+
+  it("letterboxes a wide box in a tall frame", () => {
+    const fit = computeContainFit(1080, 1920, 1440, 900);
+    expect(fit.scale).toBeCloseTo(1080 / 1440); // width-limited: 0.75
+    expect(fit.offsetX).toBe(0);
+    expect(fit.offsetY).toBeCloseTo((1920 - 900 * 0.75) / 2);
+  });
+
+  it("is the identity when the box matches the frame", () => {
+    const fit = computeContainFit(1440, 900, 1440, 900);
+    expect(fit).toEqual({ scale: 1, offsetX: 0, offsetY: 0 });
+  });
+
+  it("scales up as well as down (a small box fills a large frame)", () => {
+    const fit = computeContainFit(2880, 1800, 1440, 900);
+    expect(fit).toEqual({ scale: 2, offsetX: 0, offsetY: 0 });
+  });
+});

package/src/PresentationStack.tsx

@@ -0,0 +1,191 @@
+import { type ReactNode, useCallback, useRef, useState } from "react";
+import { useVideoConfig } from "remotion";
+import {
+  type NarrationManifest,
+  type ScenarioBundle,
+  VIEWPORT_TRANSFORM_IDENTITY,
+} from "@scenar/core";
+import {
+  Cursor,
+  ScenarioPlayer,
+  ScenarioStage,
+  ViewportTransformLayer,
+  useStepInteractions,
+} from "@scenar/react";
+
+/**
+ * The canonical viewport a scenario lays out at inside the video frame.
+ * Mirrors the embed's `ScenarEmbedViewport` vocabulary (`widthPx` /
+ * `heightPx`) — the same numbers a bundle would announce over the embed
+ * handshake.
+ */
+export interface RenderViewport {
+  readonly widthPx: number;
+  readonly heightPx: number;
+}
+
+/**
+ * The contain-fit placement of a canonical box inside a video frame: one
+ * uniform scale factor (the DD-008 rule — the frame boundary owns the only
+ * scale), centered with letterbox/pillarbox margins on the shorter axis.
+ * Exported for tests.
+ */
+export function computeContainFit(
+  frameWidth: number,
+  frameHeight: number,
+  boxWidth: number,
+  boxHeight: number,
+): { scale: number; offsetX: number; offsetY: number } {
+  const scale = Math.min(frameWidth / boxWidth, frameHeight / boxHeight);
+  return {
+    scale,
+    offsetX: (frameWidth - boxWidth * scale) / 2,
+    offsetY: (frameHeight - boxHeight * scale) / 2,
+  };
+}
+
+interface PresentationStackProps<T> {
+  /** The applied bundle (cards synthesized) the player renders. */
+  bundle: ScenarioBundle<T> & { narrationManifest?: NarrationManifest };
+  captions: boolean;
+  viewport: RenderViewport;
+  /** Wrap each step's content in `<ScenarioStage>` (staged bundles). */
+  stage: boolean;
+  /** Render the cursor overlay for interactions. */
+  cursor: boolean;
+  children: (data: T, stepIndex: number) => ReactNode;
+}
+
+/**
+ * The full presentation stack for the video-export path — the same stack
+ * the packed embed entry mounts around the player (scenar#35), assembled
+ * from the pieces that are already frame-driven under a TimeSource:
+ *
+ *   fixed canonical box (geometry the embed's DemoViewport provides)
+ *     └ ViewportTransformLayer(camera — its export path interpolates
+ *       per frame with `interpolateViewportTransform`)
+ *         └ ScenarioPlayer
+ *         └ Cursor              ← child of the camera, so it scales and
+ *                                 pans with the content under a zoom
+ *   + useStepInteractions       ← switches to the frame-driven scheduler
+ *                                 whenever a TimeSource is present
+ *
+ * Geometry: `DemoViewport` is deliberately a passthrough under
+ * `isVideoExport` (see ScenarioCaptureMount), so this stack owns it — a
+ * definite canonical box (`viewport.widthPx` × `heightPx`) exposing the
+ * `--scenar-shell-height` variable the shells consume, contain-fit into
+ * the composition frame with exactly one scale factor (DD-008). Without a
+ * definite box, surfaces that size through the shell-geometry contract
+ * collapse to zero height — the scenar#35 black frames.
+ *
+ * Interaction state assumes frames render in timeline order — the same
+ * sequential model `ScenarioCaptureMount.walkTo` documents. The render
+ * pipeline enforces it by rendering with concurrency 1.
+ *
+ * Must render below the composition's `TimeSourceProvider`, or
+ * `useStepInteractions` silently selects the wall-clock browser path
+ * (the capture mount's load-bearing lesson).
+ */
+export function PresentationStack<T>({
+  bundle,
+  captions,
+  viewport,
+  stage,
+  cursor,
+  children,
+}: PresentationStackProps<T>) {
+  const { width: frameWidth, height: frameHeight } = useVideoConfig();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const cameraRef = useRef<HTMLDivElement>(null);
+  const [stepIndex, setStepIndex] = useState(0);
+  const [cursorTarget, setCursorTarget] = useState<string | undefined>(undefined);
+  const [showRipple, setShowRipple] = useState(true);
+  const [dragging, setDragging] = useState(false);
+  const [cameraTransform, setCameraTransform] = useState(VIEWPORT_TRANSFORM_IDENTITY);
+
+  // Reset the cursor when the step changes so a prior step's target never
+  // lingers; the new step's interactions re-set it at their scheduled time.
+  // One handler feeds both step-change callbacks: authored steps deliver
+  // data, card steps deliver the card — the wiring needs only the index,
+  // and it must track BOTH so card-step interactions (the outro's
+  // cursor-clear and viewport-reset housekeeping) reach the scheduler.
+  // Mirrors the packed embed entry's handler exactly, so the two outputs
+  // cannot diverge on cursor semantics.
+  const handleStepChange = useCallback((_dataOrCard: unknown, index: number) => {
+    setStepIndex(index);
+    setCursorTarget(undefined);
+  }, []);
+
+  useStepInteractions({
+    stepIndex,
+    narrationManifest: bundle.narrationManifest,
+    containerRef,
+    cameraRef,
+    setCursorTarget,
+    setShowRipple,
+    setDragging,
+    setViewportTransform: setCameraTransform,
+    steps: bundle.steps,
+  });
+
+  const fit = computeContainFit(
+    frameWidth,
+    frameHeight,
+    viewport.widthPx,
+    viewport.heightPx,
+  );
+
+  return (
+    // The letterbox/pillarbox canvas: painted with the theme surface token
+    // so uncovered margins read as an intentional page, not dead pixels.
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        background: "var(--scenar-surface)",
+      }}
+    >
+      {/* The canonical box, contain-fit into the frame. `transform` does
+          not affect layout, so the box is positioned at its scaled offset
+          and scaled from its top-left corner — one scale factor, owned by
+          this boundary. */}
+      <div
+        ref={containerRef}
+        style={
+          {
+            position: "absolute",
+            left: fit.offsetX,
+            top: fit.offsetY,
+            width: viewport.widthPx,
+            height: viewport.heightPx,
+            transform: `scale(${fit.scale})`,
+            transformOrigin: "top left",
+            overflow: "hidden",
+            "--scenar-shell-height": `${viewport.heightPx}px`,
+          } as React.CSSProperties
+        }
+      >
+        <ViewportTransformLayer transform={cameraTransform} contentRef={cameraRef}>
+          <ScenarioPlayer
+            bundle={bundle}
+            captions={captions}
+            onStepChange={handleStepChange}
+            onCardStepChange={handleStepChange}
+          >
+            {stage
+              ? (data: T, i: number) => <ScenarioStage>{children(data, i)}</ScenarioStage>
+              : children}
+          </ScenarioPlayer>
+          {cursor && (
+            <Cursor
+              target={cursorTarget}
+              containerRef={cameraRef}
+              showRipple={showRipple}
+              isDragging={dragging}
+            />
+          )}
+        </ViewportTransformLayer>
+      </div>
+    </div>
+  );
+}

package/src/ScenarioComposition.tsx

@@ -20,6 +20,7 @@ import {
   VideoExportProvider,
   ScenarioPlayer,
 } from "@scenar/react";
+import { PresentationStack, type RenderViewport } from "./PresentationStack.js";
 import { msToFrames, useScenarioTimeline } from "./useScenarioTimeline.js";
 
 const DEFAULT_FPS = 30;
@@ -69,6 +70,29 @@ interface ScenarioCompositionProps<T> {
    * render` stages them at (`soundtrack/sfx/<name>.mp3`).
    */
   sfxSrcs?: Record<SfxSound, string>;
+  /**
+   * Mount the full presentation stack around the player — the same stack
+   * packed embeds mount: a definite canonical box contain-fit into the
+   * video frame (the geometry `DemoViewport` provides in browsers but
+   * deliberately passes through under `isVideoExport`), the
+   * `ViewportTransformLayer` camera, the `Cursor`, and TimeSource-driven
+   * step interactions. Without it, only step content renders:
+   * interactions' visible effects are absent from the MP4 and surfaces
+   * that size through the shell-geometry contract
+   * (`--scenar-shell-height`) collapse (scenar#35). Omitted, the
+   * composition keeps its prior bare-player output.
+   */
+  viewport?: RenderViewport;
+  /**
+   * Wrap each step's content in `<ScenarioStage>` (staged bundles — the
+   * `scenar pack --stage` presentation). Only meaningful with `viewport`.
+   */
+  stage?: boolean;
+  /**
+   * Render the cursor overlay for interactions. Defaults to true; only
+   * meaningful with `viewport`.
+   */
+  cursor?: boolean;
 }
 
 /**
@@ -120,6 +144,9 @@ export function ScenarioComposition<T>({
   useStaticFile: useStaticFileProp = true,
   captions = false,
   sfxSrcs = DEFAULT_SFX_SRCS,
+  viewport,
+  stage = false,
+  cursor = true,
 }: ScenarioCompositionProps<T>) {
   const videoConfig = useVideoConfig();
   const fps = fpsProp ?? videoConfig.fps ?? DEFAULT_FPS;
@@ -223,9 +250,25 @@ export function ScenarioComposition<T>({
         stepStartTimesMs={timeline.stepStartTimesMs}
       >
         <VideoExportProvider presenterMedia={presenterMedia}>
-          <ScenarioPlayer bundle={playerBundle} captions={captions}>
-            {children}
-          </ScenarioPlayer>
+          {viewport ? (
+            // The full presentation stack (scenar#35). Rendered below the
+            // TimeSourceProvider on purpose: its useStepInteractions call
+            // must see the time source or it silently selects the
+            // wall-clock browser scheduler (the capture mount's lesson).
+            <PresentationStack
+              bundle={playerBundle}
+              captions={captions}
+              viewport={viewport}
+              stage={stage}
+              cursor={cursor}
+            >
+              {children}
+            </PresentationStack>
+          ) : (
+            <ScenarioPlayer bundle={playerBundle} captions={captions}>
+              {children}
+            </ScenarioPlayer>
+          )}
         </VideoExportProvider>
       </TimeSourceProvider>
 

package/src/index.ts

@@ -20,6 +20,12 @@ export { applyTitleCards } from "@scenar/core";
 // Composition
 export { ScenarioComposition } from "./ScenarioComposition.js";
 
+// The video-export presentation stack (scenar#35). The composition mounts
+// it when given `viewport`; the pieces are exported for custom entries
+// that assemble their own tree.
+export type { RenderViewport } from "./PresentationStack.js";
+export { PresentationStack, computeContainFit } from "./PresentationStack.js";
+
 // Timeline
 export type { ScenarioTimeline, AudioClip } from "./useScenarioTimeline.js";
 export {