@contractspec/lib.video-gen 1.42.0

package/dist/browser/docs/generators.docblock.js

@@ -0,0 +1,187 @@
+// src/docs/generators.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts-spec/docs";
+var generatorsDocBlocks = [
+  {
+    id: "docs.video-gen.generators",
+    title: "Video Generation Pipeline",
+    summary: "VideoGenerator, ScenePlanner, and ScriptGenerator -- from content brief to video project with optional LLM enhancement.",
+    kind: "reference",
+    visibility: "public",
+    route: "/docs/video-gen/generators",
+    tags: [
+      "video",
+      "generators",
+      "scene-planner",
+      "script-generator",
+      "llm",
+      "content-pipeline"
+    ],
+    owners: ["@contractspec/lib.video-gen"],
+    body: `# Video Generation Pipeline
+
+The generators layer converts a \`VideoBrief\` (content brief + video config) into a fully specified \`VideoProject\` (scene graph ready for rendering). It follows the \`@contractspec/lib.content-gen\` pattern: optional LLM, deterministic fallback.
+
+\`\`\`
+VideoBrief
+    |
+    v
+ScenePlanner.plan(brief)       --> ScenePlan (scenes + durations)
+    |
+    v
+ScriptGenerator.generate(brief) --> NarrationScript (text + segments)
+    |
+    v
+VoiceProvider.synthesize(text)  --> AudioTrack (optional)
+    |
+    v
+VideoGenerator.generate(brief)  --> VideoProject (complete scene graph)
+\`\`\`
+
+## VideoGenerator
+
+The main orchestrator. Wires ScenePlanner, ScriptGenerator, and optional VoiceProvider into a single pipeline.
+
+\`\`\`ts
+import { VideoGenerator } from "@contractspec/lib.video-gen/generators";
+import type { VideoBrief } from "@contractspec/lib.video-gen/types";
+
+// Minimal (deterministic, no LLM, no voice)
+const generator = new VideoGenerator({ fps: 30 });
+
+// Full (with LLM for richer scenes + voice narration)
+const generator = new VideoGenerator({
+  llm: myLLMProvider,
+  voice: myVoiceProvider,
+  model: "gpt-4o",
+  temperature: 0.4,
+  defaultVoiceId: "rachel",
+  fps: 30,
+});
+
+const project = await generator.generate(brief);
+\`\`\`
+
+### Pipeline Steps
+
+1. **Scene planning** -- \`ScenePlanner.plan(brief)\` breaks the brief into concrete \`PlannedScene[]\` with composition IDs, props, and durations.
+2. **Script generation** -- If \`brief.narration.enabled\`, \`ScriptGenerator.generate()\` produces a \`NarrationScript\` with per-scene text segments.
+3. **Voice synthesis** -- If a \`VoiceProvider\` is configured and narration is enabled, synthesizes audio via \`voice.synthesize()\`.
+4. **Assembly** -- Combines scenes, audio, and metadata into a \`VideoProject\`.
+
+### Constructor Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| \`llm\` | \`LLMProvider\` | -- | Optional LLM for enhanced generation |
+| \`voice\` | \`VoiceProvider\` | -- | Optional voice synthesis provider |
+| \`model\` | \`string\` | -- | LLM model override |
+| \`temperature\` | \`number\` | \`0.4\` | LLM temperature (lower = more deterministic) |
+| \`defaultVoiceId\` | \`string\` | -- | Default voice for narration |
+| \`fps\` | \`number\` | \`30\` | Frames per second |
+
+## ScenePlanner
+
+Breaks a \`VideoBrief\` into concrete scenes mapped to registered compositions.
+
+\`\`\`ts
+import { ScenePlanner } from "@contractspec/lib.video-gen/generators";
+
+const planner = new ScenePlanner({ fps: 30 });
+const plan = await planner.plan(brief);
+
+plan.scenes;                    // PlannedScene[]
+plan.estimatedDurationSeconds;  // total estimated duration
+plan.narrationScript;           // combined narration text
+\`\`\`
+
+### Deterministic Path (no LLM)
+
+Maps brief sections to \`SocialClip\` compositions:
+
+| Brief Section | Scene | Duration |
+|---------------|-------|----------|
+| \`title\` + \`summary\` | Hook / title | 3s |
+| \`problems\` | Problem statement | 4s |
+| \`solutions\` | Solution showcase | 5s |
+| \`metrics\` | Proof / results | 3s |
+| \`callToAction\` | CTA | 2s |
+
+If \`brief.targetDurationSeconds\` is set, all scene durations are scaled proportionally.
+
+### LLM-Enhanced Path
+
+With an \`LLMProvider\`, the planner sends the brief to the LLM and requests a scene breakdown as JSON. The LLM can choose from \`ApiOverview\`, \`SocialClip\`, or \`TerminalDemo\` compositions. Falls back to deterministic on any failure.
+
+## ScriptGenerator
+
+Produces narration text from a \`ContentBrief\` with style control.
+
+\`\`\`ts
+import { ScriptGenerator } from "@contractspec/lib.video-gen/generators";
+
+const scriptGen = new ScriptGenerator({ temperature: 0.5 });
+const script = await scriptGen.generate(brief.content, brief.narration);
+
+script.fullText;                // complete narration
+script.segments;                // NarrationSegment[] (per-scene text)
+script.estimatedDurationSeconds; // at ~150 words/min
+script.style;                   // "professional" | "casual" | "technical"
+\`\`\`
+
+### Narration Styles
+
+| Style | Tone |
+|-------|------|
+| \`professional\` | Clear, authoritative, concise |
+| \`casual\` | Friendly, conversational, approachable |
+| \`technical\` | Precise, detailed, accurate |
+
+### NarrationSegment
+
+Each segment maps to a scene and provides timing estimates:
+
+\`\`\`ts
+interface NarrationSegment {
+  sceneId: string;                // "intro", "problems", "solutions", "metrics", "cta"
+  text: string;                   // narration text for this segment
+  estimatedDurationSeconds: number; // at ~150 words/min
+}
+\`\`\`
+
+## Input Types
+
+### VideoBrief
+
+\`\`\`ts
+interface VideoBrief {
+  content: ContentBrief;            // from @contractspec/lib.content-gen
+  format: VideoFormat;              // landscape, portrait, square, or custom
+  targetDurationSeconds?: number;   // auto-calculated if omitted
+  narration?: NarrationConfig;      // { enabled, voiceId, language, style }
+  style?: VideoStyleOverrides;      // colors, fonts, dark mode
+  compositionId?: string;           // force a specific composition
+}
+\`\`\`
+
+### PlannedScene
+
+\`\`\`ts
+interface PlannedScene {
+  compositionId: string;            // maps to a registered Remotion composition
+  props: Record<string, unknown>;   // input props for the composition
+  durationInFrames: number;         // scene duration
+  narrationText?: string;           // narrator text for this scene
+  notes?: string;                   // planning notes (LLM path only)
+}
+\`\`\`
+
+## Guardrails
+
+- Generators are **stateless** -- no side effects, no caching. Call \`generate()\` / \`plan()\` for each video.
+- LLM responses are parsed as JSON; any parse failure falls back to deterministic.
+- Temperature defaults are conservative (0.3-0.5) for reproducibility.
+- Duration estimates use 150 words/min speaking rate.
+`
+  }
+];
+registerDocBlocks(generatorsDocBlocks);

package/dist/browser/docs/rendering.docblock.js

@@ -0,0 +1,197 @@
+// src/docs/rendering.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts-spec/docs";
+var renderingDocBlocks = [
+  {
+    id: "docs.video-gen.rendering",
+    title: "Video Rendering & Playback",
+    summary: "LocalRenderer for MP4 output, render configuration, quality presets, DemoPlayer for web embedding, and Remotion Studio setup.",
+    kind: "reference",
+    visibility: "public",
+    route: "/docs/video-gen/rendering",
+    tags: [
+      "video",
+      "rendering",
+      "remotion",
+      "player",
+      "mp4",
+      "quality-presets"
+    ],
+    owners: ["@contractspec/lib.video-gen"],
+    body: `# Video Rendering & Playback
+
+The rendering layer wraps \`@remotion/renderer\` for MP4/WebM output and \`@remotion/player\` for interactive web embedding. It implements the \`VideoProvider\` contract from \`@contractspec/lib.contracts-integrations\`.
+
+## LocalRenderer
+
+Renders a \`VideoProject\` to a video file using the local Remotion renderer. Requires **Node.js** (not Bun-compatible).
+
+\`\`\`ts
+import { LocalRenderer } from "@contractspec/lib.video-gen/renderers/local";
+
+const renderer = new LocalRenderer({
+  entryPoint: "./src/remotion/index.ts",
+});
+
+const result = await renderer.render(project, {
+  outputPath: "out/video.mp4",
+  codec: "h264",
+  crf: 18,
+});
+
+result.outputPath;      // "out/video.mp4"
+result.format;          // "mp4"
+result.durationSeconds; // total duration
+result.fileSizeBytes;   // file size
+result.dimensions;      // { width: 1920, height: 1080 }
+\`\`\`
+
+> **Important**: Import \`LocalRenderer\` from the \`/renderers/local\` subpath, not from the main entry. It dynamically imports \`@remotion/bundler\` and \`@remotion/renderer\` which are Node.js-only.
+
+### Auto-Variants
+
+Set \`autoVariants: true\` to generate landscape + square + portrait versions:
+
+\`\`\`ts
+const result = await renderer.render(project, {
+  outputPath: "out/video.mp4",
+  autoVariants: true,
+});
+
+result.variants; // [
+//   { outputPath: "out/video-square.mp4", dimensions: { width: 1080, height: 1080 } },
+//   { outputPath: "out/video-portrait.mp4", dimensions: { width: 1080, height: 1920 } },
+// ]
+\`\`\`
+
+## Render Configuration
+
+### Defaults
+
+\`\`\`ts
+import {
+  defaultRenderConfig,
+  resolveRenderConfig,
+  qualityPresets,
+  codecFormatMap,
+} from "@contractspec/lib.video-gen/renderers/config";
+
+defaultRenderConfig.codec;       // "h264"
+defaultRenderConfig.outputFormat; // "mp4"
+defaultRenderConfig.crf;         // 18
+defaultRenderConfig.pixelFormat; // "yuv420p"
+\`\`\`
+
+### RenderConfig Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| \`outputPath\` | \`string\` | -- | **Required**. Output file path |
+| \`codec\` | \`"h264" \\| "h265" \\| "vp8" \\| "vp9"\` | \`"h264"\` | Video codec |
+| \`outputFormat\` | \`"mp4" \\| "webm" \\| "gif"\` | \`"mp4"\` | Container format |
+| \`crf\` | \`number\` | \`18\` | Constant Rate Factor (lower = better quality) |
+| \`pixelFormat\` | \`string\` | \`"yuv420p"\` | Pixel format |
+| \`concurrency\` | \`number\` | CPU count | Rendering threads |
+| \`autoVariants\` | \`boolean\` | \`false\` | Generate format variants |
+
+### Quality Presets
+
+\`\`\`ts
+import { resolveRenderConfig } from "@contractspec/lib.video-gen/renderers/config";
+
+// Draft (fastest, for previews)
+resolveRenderConfig({ outputPath: "out/preview.mp4" }, "draft");
+// -> crf: 28, concurrency: 1
+
+// Standard (balanced)
+resolveRenderConfig({ outputPath: "out/video.mp4" }, "standard");
+// -> crf: 18
+
+// High (best quality, for final output)
+resolveRenderConfig({ outputPath: "out/final.mp4" }, "high");
+// -> crf: 12
+\`\`\`
+
+### Codec-to-Format Mapping
+
+| Codec | Format |
+|-------|--------|
+| \`h264\` | \`mp4\` |
+| \`h265\` | \`mp4\` |
+| \`vp8\` | \`webm\` |
+| \`vp9\` | \`webm\` |
+
+## DemoPlayer (Web Embedding)
+
+Embeddable Remotion Player for interactive video demos in React apps. Wraps \`@remotion/player\` with ContractSpec compositions.
+
+\`\`\`tsx
+import { DemoPlayer } from "@contractspec/lib.video-gen/player";
+
+<DemoPlayer
+  compositionId="ApiOverview"
+  inputProps={{
+    specName: "CreateUser",
+    specCode: "export const createUser = defineCommand({...})",
+  }}
+  controls
+  autoPlay
+  loop
+  width="100%"
+  clickToPlay
+  doubleClickToFullscreen
+/>
+\`\`\`
+
+### DemoPlayer Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`compositionId\` | \`"ApiOverview" \\| "SocialClip" \\| "TerminalDemo"\` | -- | Composition to play |
+| \`inputProps\` | composition props type | -- | Props for the selected composition |
+| \`controls\` | \`boolean\` | \`true\` | Show playback controls |
+| \`autoPlay\` | \`boolean\` | \`false\` | Auto-play on mount |
+| \`loop\` | \`boolean\` | \`false\` | Loop playback |
+| \`width\` | \`string \\| number\` | \`"100%"\` | Player width |
+| \`height\` | \`string \\| number\` | \`"auto"\` | Player height |
+| \`clickToPlay\` | \`boolean\` | \`true\` | Click to toggle playback |
+| \`doubleClickToFullscreen\` | \`boolean\` | \`true\` | Double-click for fullscreen |
+
+> \`@remotion/player\` is a peer dependency. Install it in your app if you use \`DemoPlayer\`.
+
+## Remotion Studio
+
+The \`@contractspec/app.video-studio\` package provides a Remotion Studio entry point for previewing compositions interactively.
+
+\`\`\`bash
+# Start Remotion Studio
+bun run dev:video
+
+# Render a specific composition
+npx remotion render src/index.ts ApiOverview out/api-overview.mp4
+
+# Render all compositions
+bun run render:all
+\`\`\`
+
+### Registered Compositions
+
+| ID | Component | Dimensions | Duration | Description |
+|----|-----------|------------|----------|-------------|
+| \`ApiOverview\` | \`ApiOverview\` | 1920x1080 | 450 frames (15s) | Homepage API demo |
+| \`SocialClip\` | \`SocialClip\` | 1920x1080 | 300 frames (10s) | Landscape social clip |
+| \`SocialClipSquare\` | \`SocialClip\` | 1080x1080 | 300 frames (10s) | Square social clip |
+| \`SocialClipPortrait\` | \`SocialClip\` | 1080x1920 | 300 frames (10s) | Portrait social clip |
+| \`TerminalDemo\` | \`TerminalDemo\` | 1920x1080 | 600 frames (20s) | CLI walkthrough |
+
+All compositions run at 30fps.
+
+## Guardrails
+
+- \`LocalRenderer\` requires Node.js -- do not attempt to use it in browser or Bun environments.
+- Import \`LocalRenderer\` from the \`/renderers/local\` subpath to avoid bundling \`@remotion/renderer\` in browser builds.
+- The \`remotion\` entry point (\`@contractspec/lib.video-gen/remotion\`) is a **side-effect module** that calls \`registerRoot()\`. Only import it from Remotion Studio or render scripts.
+- Use quality presets for consistency: \`draft\` for development, \`standard\` for CI, \`high\` for releases.
+`
+  }
+];
+registerDocBlocks(renderingDocBlocks);

package/dist/browser/docs/video-gen.docblock.js

@@ -0,0 +1,141 @@
+// src/docs/video-gen.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts-spec/docs";
+var videoGenDocBlocks = [
+  {
+    id: "docs.video-gen.overview",
+    title: "Video Generation Library",
+    summary: "Programmatic video generation with Remotion -- from content brief to rendered MP4 in a single pipeline.",
+    kind: "reference",
+    visibility: "public",
+    route: "/docs/video-gen/overview",
+    tags: ["video", "remotion", "generation", "content-pipeline"],
+    owners: ["@contractspec/lib.video-gen"],
+    body: `# Video Generation Library
+
+\`@contractspec/lib.video-gen\` provides **programmatic video generation** using [Remotion](https://remotion.dev). It follows the same generator pattern as \`@contractspec/lib.content-gen\` and consumes provider contracts from \`@contractspec/lib.contracts-integrations/integrations/providers/video\`.
+
+## Architecture
+
+The library is organized into five layers, each buildable and testable independently:
+
+\`\`\`
+Content Brief
+    |
+    v
+Generators -----> ScenePlanner (brief -> scenes)
+    |              ScriptGenerator (brief -> narration)
+    |              VideoGenerator (orchestrator)
+    v
+Compositions ---> Primitives (AnimatedText, CodeBlock, Terminal, ...)
+    |              Full Compositions (ApiOverview, SocialClip, TerminalDemo)
+    v
+Design ---------> Tokens, Motion, Typography, Layouts
+    |
+    v
+Renderers ------> LocalRenderer (@remotion/renderer)
+                   DemoPlayer (@remotion/player, web embedding)
+\`\`\`
+
+### Layer Responsibilities
+
+| Layer | Import Path | Purpose |
+|-------|-------------|---------|
+| **Types** | \`@contractspec/lib.video-gen/types\` | VideoBrief, ScenePlan, GeneratedVideo, re-exported contract types |
+| **Design** | \`@contractspec/lib.video-gen/design\` | Video-optimized tokens, motion primitives, typography, layouts |
+| **Compositions** | \`@contractspec/lib.video-gen/compositions\` | Remotion components (primitives + full compositions) |
+| **Generators** | \`@contractspec/lib.video-gen/generators\` | VideoGenerator, ScenePlanner, ScriptGenerator |
+| **Renderers** | \`@contractspec/lib.video-gen/renderers\` | LocalRenderer, render config, quality presets |
+| **Player** | \`@contractspec/lib.video-gen/player\` | Embeddable DemoPlayer for web apps |
+| **Remotion** | \`@contractspec/lib.video-gen/remotion\` | Remotion Studio entry point (registerRoot) |
+
+## Getting Started
+
+### 1. Generate a video project from a content brief
+
+\`\`\`ts
+import { VideoGenerator } from "@contractspec/lib.video-gen/generators";
+import { VIDEO_FORMATS } from "@contractspec/lib.video-gen/types";
+import type { VideoBrief } from "@contractspec/lib.video-gen/types";
+
+const generator = new VideoGenerator({ fps: 30 });
+
+const brief: VideoBrief = {
+  content: {
+    title: "Ship APIs 10x Faster",
+    summary: "ContractSpec generates everything from a single spec.",
+    problems: ["Manual API maintenance", "Inconsistent surfaces"],
+    solutions: ["One spec, every surface", "Safe regeneration"],
+    callToAction: "Try ContractSpec",
+  },
+  format: VIDEO_FORMATS.landscape,
+  targetDurationSeconds: 30,
+};
+
+const project = await generator.generate(brief);
+\`\`\`
+
+### 2. Render to MP4
+
+\`\`\`ts
+import { LocalRenderer } from "@contractspec/lib.video-gen/renderers/local";
+
+const renderer = new LocalRenderer({
+  entryPoint: "./src/remotion/index.ts",
+});
+
+const result = await renderer.render(project, {
+  outputPath: "out/video.mp4",
+});
+\`\`\`
+
+### 3. Embed in a web app
+
+\`\`\`tsx
+import { DemoPlayer } from "@contractspec/lib.video-gen/player";
+
+<DemoPlayer
+  compositionId="ApiOverview"
+  inputProps={{ specName: "CreateUser", specCode: "..." }}
+  controls
+  autoPlay
+  loop
+/>
+\`\`\`
+
+## Contract Bridge
+
+The library consumes provider contracts defined in \`@contractspec/lib.contracts-integrations\`:
+
+| Contract | Purpose |
+|----------|---------|
+| \`VideoProvider\` | Renderer abstraction (local, Lambda, Cloud Run) |
+| \`VideoProject\` | Scene graph with format, fps, audio tracks |
+| \`RenderConfig\` / \`RenderResult\` | Codec, quality, output path, dimensions |
+| \`CompositionRegistry\` | Metadata for registered Remotion compositions |
+| \`VideoFormat\` | Landscape / portrait / square / custom dimensions |
+
+Types are re-exported from the main entry for convenience:
+
+\`\`\`ts
+import type { VideoProject, RenderConfig } from "@contractspec/lib.video-gen";
+\`\`\`
+
+## Deterministic by Default
+
+All generators support two modes:
+
+- **Without LLM**: Fully deterministic, template-based output. Same brief always produces the same video project.
+- **With LLM**: Richer scene planning and narration scripts via an optional \`LLMProvider\`. Falls back to deterministic on any failure.
+
+This matches the content-gen pattern: \`constructor({ llm? })\` -> \`generate(brief)\`.
+
+## Guardrails
+
+- Compositions must be **deterministic**: same props = same visual output.
+- Design tokens bridge from \`@contractspec/lib.design-system\` -- do not duplicate brand values.
+- \`LocalRenderer\` requires Node.js (\`@remotion/renderer\` is not Bun-compatible).
+- The \`remotion\` entry point is a side-effect module (calls \`registerRoot\`) -- import it only from Remotion Studio or render scripts.
+`
+  }
+];
+registerDocBlocks(videoGenDocBlocks);