@contractspec/lib.video-gen 2.7.6 → 2.7.7

package/README.md

@@ -1,37 +1,79 @@
 # @contractspec/lib.video-gen
 
-Website: https://contractspec.io/
+**AI-powered video generation with Remotion: compositions, rendering, and design integration.**
 
-Programmatic video generation using Remotion. Follows the same generator pattern as `@contractspec/lib.content-gen` and consumes contracts from video provider integrations. All generators work deterministically by default -- LLM integration is optional and enhances output when available.
+## What It Provides
 
-## Modules
+- **Layer**: lib.
+- **Consumers**: bundles, video-studio app.
+- `src/docs/` contains docblocks and documentation-facing exports.
+- Related ContractSpec packages include `@contractspec/lib.ai-providers`, `@contractspec/lib.content-gen`, `@contractspec/lib.contracts-integrations`, `@contractspec/lib.contracts-spec`, `@contractspec/lib.design-system`, `@contractspec/lib.image-gen`, ...
+- `src/docs/` contains docblocks and documentation-facing exports.
 
-- **Types** -- `VideoBrief`, `VideoGeneratorOptions`, `GeneratedVideo`, `ScenePlan`, `PlannedScene`, plus re-exported contract types (`VideoProject`, `RenderConfig`, `VideoFormat`)
-- **Design** -- Video-specific design tokens extending the design system: color tokens, motion/easing curves, typography scale (1920x1080), and layout safe zones with format variants (landscape/square/portrait)
-- **Compositions** -- Remotion compositions for rendering video scenes:
-  - **Primitives**: `AnimatedText`, `BrandFrame`, `CodeBlock`, `ProgressBar`, `Terminal`, `SceneTransitionWrapper`
-  - **Full**: `ApiOverview` (spec to API surface visualization), `SocialClip` (marketing content, adaptive formats), `TerminalDemo` (CLI walkthrough)
-- **Generators** -- `VideoGenerator` (main orchestrator), `ScenePlanner` (breaks briefs into scenes), `ScriptGenerator` (narration with professional/casual/technical styles)
-- **Renderers** -- `LocalRenderer` wrapping `@remotion/renderer` with quality presets (draft/standard/high)
-- **Player** -- `DemoPlayer` component for embedding in React apps via `@remotion/player`
+## Installation
 
-Deterministic by default: every generator produces consistent output without an LLM. When an LLM is provided via the constructor, generators produce richer, more varied content. On LLM failure, the system falls back to deterministic output automatically.
+`npm install @contractspec/lib.video-gen`
 
-## Quickstart
+or
 
-```typescript
-import { VideoGenerator } from "@contractspec/lib.video-gen/generators";
-import type { VideoBrief } from "@contractspec/lib.video-gen/types";
+`bun add @contractspec/lib.video-gen`
 
-const generator = new VideoGenerator(); // no LLM needed
+## Usage
 
-const brief: VideoBrief = {
-  title: "Ship APIs 10x Faster",
-  summary: "See how ContractSpec generates production-ready APIs from specs.",
-  format: "landscape",
-};
+Import the root entrypoint from `@contractspec/lib.video-gen`, or choose a documented subpath when you only need one part of the package surface.
 
-const project = await generator.generate(brief);
-```
+## Architecture
 
-Compositions are pure React components -- same props always produce the same visual output, with frame-based timing and no side effects.
+- `src/compositions` is part of the package's public or composition surface.
+- `src/design` is part of the package's public or composition surface.
+- `src/docs/` contains docblocks and documentation-facing exports.
+- `src/generators` is part of the package's public or composition surface.
+- `src/i18n` is part of the package's public or composition surface.
+- `src/index.ts` is the root public barrel and package entrypoint.
+- `src/player` is part of the package's public or composition surface.
+- `src/types.ts` is shared public type definitions.
+
+## Public Entry Points
+
+- Export `.` resolves through `./src/index.ts`.
+- Export `./compositions` resolves through `./src/compositions/index.ts`.
+- Export `./compositions/api-overview` resolves through `./src/compositions/api-overview.tsx`.
+- Export `./compositions/primitives` resolves through `./src/compositions/primitives/index.ts`.
+- Export `./compositions/primitives/animated-text` resolves through `./src/compositions/primitives/animated-text.tsx`.
+- Export `./compositions/primitives/brand-frame` resolves through `./src/compositions/primitives/brand-frame.tsx`.
+- Export `./compositions/primitives/code-block` resolves through `./src/compositions/primitives/code-block.tsx`.
+- Export `./compositions/primitives/progress-bar` resolves through `./src/compositions/primitives/progress-bar.tsx`.
+- Export `./compositions/primitives/terminal` resolves through `./src/compositions/primitives/terminal.tsx`.
+- Export `./compositions/primitives/transition` resolves through `./src/compositions/primitives/transition.tsx`.
+- The package publishes 42 total export subpaths; keep docs aligned with `package.json`.
+
+## Local Commands
+
+- `bun run dev` — contractspec-bun-build dev
+- `bun run build` — bun run prebuild && bun run build:bundle && bun run build:types
+- `bun run test` — bun test --pass-with-no-tests
+- `bun run lint` — bun lint:fix
+- `bun run lint:check` — biome check .
+- `bun run lint:fix` — biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .
+- `bun run typecheck` — tsc --noEmit
+- `bun run publish:pkg` — bun publish --tolerate-republish --ignore-scripts --verbose
+- `bun run publish:pkg:canary` — bun publish:pkg --tag canary
+- `bun run clean` — rimraf dist .turbo
+- `bun run build:bundle` — contractspec-bun-build transpile
+- `bun run build:types` — contractspec-bun-build types
+- `bun run prebuild` — contractspec-bun-build prebuild
+
+## Recent Updates
+
+- Replace eslint+prettier by biomejs to optimize speed.
+- Resolve lint, build, and type errors across nine packages.
+- Add first-class transport, auth, versioning, and BYOK support across all integrations.
+- Add AI provider ranking system with ranking-driven model selection.
+- Resolve lint/test regressions after voice capability updates.
+- Add @contractspec/lib.voice package for TTS, STT, and conversational voice.
+
+## Notes
+
+- Remotion composition API is version-sensitive — pin and test upgrades carefully.
+- Renderer interface is the adapter boundary — do not leak Remotion internals.
+- Depends on voice, content-gen, image-gen, design-system — coordinate cross-lib changes.

package/dist/browser/compositions/api-overview.js

@@ -53,6 +53,109 @@ var defaultVideoTheme = {
   video: defaultVideoColors
 };
 
+// src/design/typography.ts
+var videoTypography = {
+  title: {
+    fontSize: 72,
+    lineHeight: 1.1,
+    fontWeight: 700,
+    letterSpacing: -1
+  },
+  heading: {
+    fontSize: 56,
+    lineHeight: 1.2,
+    fontWeight: 600,
+    letterSpacing: -0.5
+  },
+  subheading: {
+    fontSize: 40,
+    lineHeight: 1.25,
+    fontWeight: 500
+  },
+  body: {
+    fontSize: 32,
+    lineHeight: 1.5,
+    fontWeight: 400
+  },
+  code: {
+    fontSize: 28,
+    lineHeight: 1.6,
+    fontWeight: 400
+  },
+  caption: {
+    fontSize: 24,
+    lineHeight: 1.4,
+    fontWeight: 400
+  },
+  label: {
+    fontSize: 20,
+    lineHeight: 1.3,
+    fontWeight: 600,
+    letterSpacing: 1
+  }
+};
+function scaleTypography(style, targetWidth) {
+  const scale = targetWidth / 1920;
+  return {
+    ...style,
+    fontSize: Math.round(style.fontSize * scale),
+    letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
+  };
+}
+
+// src/compositions/primitives/animated-text.tsx
+import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var AnimatedText = ({
+  text,
+  variant = "body",
+  style: styleOverride,
+  enterAt = 0,
+  exitAt,
+  color = "#ffffff",
+  align = "left"
+}) => {
+  const frame = useCurrentFrame();
+  const { width } = useVideoConfig();
+  const baseStyle = videoTypography[variant];
+  const scaled = scaleTypography(baseStyle, width);
+  const finalStyle = { ...scaled, ...styleOverride };
+  const enterProgress = interpolate(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const enterOpacity = interpolate(enterProgress, [0, 1], [0, 1], {
+    easing: videoEasing.entrance
+  });
+  const enterTranslateY = interpolate(enterProgress, [0, 1], [30, 0], {
+    easing: videoEasing.entrance
+  });
+  let exitOpacity = 1;
+  let exitTranslateY = 0;
+  if (exitAt !== undefined) {
+    const exitProgress = interpolate(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    exitOpacity = interpolate(exitProgress, [0, 1], [1, 0], {
+      easing: videoEasing.exit
+    });
+    exitTranslateY = interpolate(exitProgress, [0, 1], [0, -20], {
+      easing: videoEasing.exit
+    });
+  }
+  const opacity = enterOpacity * exitOpacity;
+  const translateY = enterTranslateY + exitTranslateY;
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      fontSize: finalStyle.fontSize,
+      lineHeight: finalStyle.lineHeight,
+      fontWeight: finalStyle.fontWeight,
+      letterSpacing: finalStyle.letterSpacing,
+      color,
+      textAlign: align,
+      opacity,
+      transform: `translateY(${translateY}px)`,
+      willChange: "opacity, transform"
+    },
+    children: text
+  }, undefined, false, undefined, this);
+};
+
 // src/design/layouts.ts
 import { VIDEO_FORMATS } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
 var DEFAULT_FPS = 30;
@@ -89,8 +192,8 @@ function getAllFormatVariants() {
 }
 
 // src/compositions/primitives/brand-frame.tsx
-import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 var BrandFrame = ({
   styleOverrides,
   showBranding = true,
@@ -98,8 +201,8 @@ var BrandFrame = ({
   variant = "gradient",
   children
 }) => {
-  const frame = useCurrentFrame();
-  const { width, height } = useVideoConfig();
+  const frame = useCurrentFrame2();
+  const { width, height } = useVideoConfig2();
   const theme = defaultVideoTheme;
   const safeZone = scaleSafeZone({ type: "custom", width, height });
   const primaryColor = styleOverrides?.primaryColor ?? theme.colors.primary;
@@ -117,16 +220,16 @@ var BrandFrame = ({
       background = "#000000";
       break;
   }
-  const entranceOpacity = animateEntrance ? interpolate(frame, [0, 15], [0, 1], {
+  const entranceOpacity = animateEntrance ? interpolate2(frame, [0, 15], [0, 1], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
     easing: videoEasing.entrance
   }) : 1;
-  const brandOpacity = showBranding ? interpolate(frame, [videoDurations.brandReveal, videoDurations.brandReveal + 15], [0, 0.3], {
+  const brandOpacity = showBranding ? interpolate2(frame, [videoDurations.brandReveal, videoDurations.brandReveal + 15], [0, 0.3], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   }) : 0;
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsxDEV2("div", {
     style: {
       width,
       height,
@@ -136,7 +239,7 @@ var BrandFrame = ({
       opacity: entranceOpacity
     },
     children: [
-      variant === "gradient" && /* @__PURE__ */ jsxDEV("div", {
+      variant === "gradient" && /* @__PURE__ */ jsxDEV2("div", {
         style: {
           position: "absolute",
           top: "-20%",
@@ -148,7 +251,7 @@ var BrandFrame = ({
           pointerEvents: "none"
         }
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxDEV2("div", {
         style: {
           position: "absolute",
           left: safeZone.horizontal,
@@ -160,7 +263,7 @@ var BrandFrame = ({
         },
         children
       }, undefined, false, undefined, this),
-      showBranding && /* @__PURE__ */ jsxDEV("div", {
+      showBranding && /* @__PURE__ */ jsxDEV2("div", {
         style: {
           position: "absolute",
           bottom: safeZone.vertical / 2,
@@ -177,109 +280,6 @@ var BrandFrame = ({
   }, undefined, true, undefined, this);
 };
 
-// src/design/typography.ts
-var videoTypography = {
-  title: {
-    fontSize: 72,
-    lineHeight: 1.1,
-    fontWeight: 700,
-    letterSpacing: -1
-  },
-  heading: {
-    fontSize: 56,
-    lineHeight: 1.2,
-    fontWeight: 600,
-    letterSpacing: -0.5
-  },
-  subheading: {
-    fontSize: 40,
-    lineHeight: 1.25,
-    fontWeight: 500
-  },
-  body: {
-    fontSize: 32,
-    lineHeight: 1.5,
-    fontWeight: 400
-  },
-  code: {
-    fontSize: 28,
-    lineHeight: 1.6,
-    fontWeight: 400
-  },
-  caption: {
-    fontSize: 24,
-    lineHeight: 1.4,
-    fontWeight: 400
-  },
-  label: {
-    fontSize: 20,
-    lineHeight: 1.3,
-    fontWeight: 600,
-    letterSpacing: 1
-  }
-};
-function scaleTypography(style, targetWidth) {
-  const scale = targetWidth / 1920;
-  return {
-    ...style,
-    fontSize: Math.round(style.fontSize * scale),
-    letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
-  };
-}
-
-// src/compositions/primitives/animated-text.tsx
-import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-var AnimatedText = ({
-  text,
-  variant = "body",
-  style: styleOverride,
-  enterAt = 0,
-  exitAt,
-  color = "#ffffff",
-  align = "left"
-}) => {
-  const frame = useCurrentFrame2();
-  const { width } = useVideoConfig2();
-  const baseStyle = videoTypography[variant];
-  const scaled = scaleTypography(baseStyle, width);
-  const finalStyle = { ...scaled, ...styleOverride };
-  const enterProgress = interpolate2(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const enterOpacity = interpolate2(enterProgress, [0, 1], [0, 1], {
-    easing: videoEasing.entrance
-  });
-  const enterTranslateY = interpolate2(enterProgress, [0, 1], [30, 0], {
-    easing: videoEasing.entrance
-  });
-  let exitOpacity = 1;
-  let exitTranslateY = 0;
-  if (exitAt !== undefined) {
-    const exitProgress = interpolate2(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-    exitOpacity = interpolate2(exitProgress, [0, 1], [1, 0], {
-      easing: videoEasing.exit
-    });
-    exitTranslateY = interpolate2(exitProgress, [0, 1], [0, -20], {
-      easing: videoEasing.exit
-    });
-  }
-  const opacity = enterOpacity * exitOpacity;
-  const translateY = enterTranslateY + exitTranslateY;
-  return /* @__PURE__ */ jsxDEV2("div", {
-    style: {
-      fontSize: finalStyle.fontSize,
-      lineHeight: finalStyle.lineHeight,
-      fontWeight: finalStyle.fontWeight,
-      letterSpacing: finalStyle.letterSpacing,
-      color,
-      textAlign: align,
-      opacity,
-      transform: `translateY(${translateY}px)`,
-      willChange: "opacity, transform"
-    },
-    children: text
-  }, undefined, false, undefined, this);
-};
-
 // src/compositions/primitives/code-block.tsx
 import { interpolate as interpolate3, useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3 } from "remotion";
 import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
@@ -435,8 +435,8 @@ var ProgressBar = ({
 // src/compositions/api-overview.tsx
 import {
   AbsoluteFill,
-  Sequence,
   interpolate as interpolate4,
+  Sequence,
   useCurrentFrame as useCurrentFrame5,
   useVideoConfig as useVideoConfig5
 } from "remotion";