@contractspec/lib.video-gen 1.42.0

package/dist/browser/design/layouts.js

@@ -0,0 +1,50 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/design/layouts.ts
+import { VIDEO_FORMATS } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
+var DEFAULT_FPS = 30;
+var videoSafeZone = {
+  horizontal: 120,
+  vertical: 80,
+  contentWidth: 1680,
+  contentHeight: 920
+};
+function scaleSafeZone(format) {
+  const scaleX = format.width / 1920;
+  const scaleY = format.height / 1080;
+  return {
+    horizontal: Math.round(videoSafeZone.horizontal * scaleX),
+    vertical: Math.round(videoSafeZone.vertical * scaleY),
+    contentWidth: Math.round(videoSafeZone.contentWidth * scaleX),
+    contentHeight: Math.round(videoSafeZone.contentHeight * scaleY)
+  };
+}
+var videoPositions = {
+  center: { x: 960, y: 540 },
+  topLeft: { x: 120, y: 80 },
+  topRight: { x: 1800, y: 80 },
+  bottomLeft: { x: 120, y: 1000 },
+  bottomRight: { x: 1800, y: 1000 },
+  bottomCenter: { x: 960, y: 960 }
+};
+function getAllFormatVariants() {
+  return [
+    VIDEO_FORMATS.landscape,
+    VIDEO_FORMATS.square,
+    VIDEO_FORMATS.portrait
+  ];
+}
+export {
+  videoSafeZone,
+  videoPositions,
+  scaleSafeZone,
+  getAllFormatVariants,
+  VIDEO_FORMATS,
+  DEFAULT_FPS
+};

package/dist/browser/design/motion.js

@@ -0,0 +1,43 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/design/motion.ts
+import { Easing } from "remotion";
+var videoEasing = {
+  entrance: Easing.out(Easing.exp),
+  exit: Easing.in(Easing.exp),
+  emphasis: Easing.out(Easing.back(1.4)),
+  linear: Easing.linear,
+  gentle: Easing.bezier(0.25, 0.1, 0.25, 1),
+  spring: Easing.out(Easing.back(1.7))
+};
+var videoDurations = {
+  sceneTransition: 20,
+  textEntrance: 15,
+  textExit: 12,
+  codeTypingPerChar: 2,
+  sectionPause: 30,
+  emphasisPause: 15,
+  brandReveal: 25,
+  minScene: 60,
+  shortScene: 60,
+  mediumScene: 120,
+  longScene: 240
+};
+var videoTransitions = {
+  fade: { type: "fade", durationInFrames: 20 },
+  slideLeft: { type: "slide-left", durationInFrames: 20 },
+  slideRight: { type: "slide-right", durationInFrames: 20 },
+  wipe: { type: "wipe", durationInFrames: 15 },
+  none: { type: "none", durationInFrames: 0 }
+};
+export {
+  videoTransitions,
+  videoEasing,
+  videoDurations
+};

package/dist/browser/design/tokens.js

@@ -0,0 +1,28 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/design/tokens.ts
+import { defaultTokens } from "@contractspec/lib.design-system";
+var defaultVideoColors = {
+  canvasBackground: defaultTokens.colors.background,
+  codeBackground: "#1e1e2e",
+  terminalBackground: "#0d1117",
+  terminalForeground: "#c9d1d9",
+  highlight: defaultTokens.colors.accent,
+  gradientStart: defaultTokens.colors.primary,
+  gradientEnd: defaultTokens.colors.accent
+};
+var defaultVideoTheme = {
+  ...defaultTokens,
+  video: defaultVideoColors
+};
+export {
+  defaultVideoTheme,
+  defaultVideoColors,
+  defaultTokens
+};

package/dist/browser/design/typography.js

@@ -0,0 +1,61 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// 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
+  };
+}
+export {
+  videoTypography,
+  scaleTypography
+};

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

@@ -0,0 +1,182 @@
+// src/docs/compositions.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts-spec/docs";
+var compositionsDocBlocks = [
+  {
+    id: "docs.video-gen.compositions",
+    title: "Video Compositions & Primitives",
+    summary: "Remotion composition components and reusable primitives for building programmatic videos.",
+    kind: "reference",
+    visibility: "public",
+    route: "/docs/video-gen/compositions",
+    tags: ["video", "remotion", "compositions", "primitives", "react"],
+    owners: ["@contractspec/lib.video-gen"],
+    body: `# Video Compositions & Primitives
+
+Compositions are React components rendered by Remotion. They use \`useCurrentFrame()\`, \`useVideoConfig()\`, and \`interpolate()\` to produce frame-accurate animations. All compositions must be **deterministic**: same props = same visual output.
+
+## Primitive Components
+
+Primitives are reusable building blocks for constructing full compositions.
+
+\`\`\`ts
+import {
+  AnimatedText,
+  CodeBlock,
+  Terminal,
+  BrandFrame,
+  ProgressBar,
+  SceneTransitionWrapper,
+} from "@contractspec/lib.video-gen/compositions/primitives";
+\`\`\`
+
+### AnimatedText
+
+Text with entrance/exit slide + fade animations.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`text\` | \`string\` | -- | Text content |
+| \`variant\` | \`keyof videoTypography\` | \`"body"\` | Typography preset (title, heading, subheading, body, code, caption, label) |
+| \`enterAt\` | \`number\` | \`0\` | Frame at which text enters |
+| \`exitAt\` | \`number\` | -- | Frame at which text exits (omit to keep visible) |
+| \`color\` | \`string\` | \`"#ffffff"\` | Text color |
+| \`align\` | \`"left" \\| "center" \\| "right"\` | \`"left"\` | Text alignment |
+
+### CodeBlock
+
+Syntax-aware code display with typing animation and macOS-style title bar.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`code\` | \`string\` | -- | Code string to display |
+| \`language\` | \`string\` | \`"typescript"\` | Language label in the title bar |
+| \`startAt\` | \`number\` | \`0\` | Frame at which typing starts |
+| \`typeAnimation\` | \`boolean\` | \`true\` | Animate character-by-character typing |
+| \`filename\` | \`string\` | -- | Filename in the title bar (overrides language) |
+
+### Terminal
+
+CLI simulator with command typing, output lines, and cursor animation.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`lines\` | \`TerminalLine[]\` | -- | Lines to display in sequence |
+| \`startAt\` | \`number\` | \`0\` | Frame at which terminal appears |
+| \`prompt\` | \`string\` | \`"$ "\` | Prompt string before commands |
+| \`title\` | \`string\` | \`"Terminal"\` | Title bar text |
+| \`typingSpeed\` | \`number\` | \`2\` | Frames per character for commands |
+
+\`TerminalLine\` types: \`command\` (typed), \`output\` (faded in), \`error\` (red), \`success\` (green), \`comment\` (dimmed with \`#\` prefix).
+
+### BrandFrame
+
+Branded container with safe-zone padding, gradient/solid/dark backgrounds, and optional watermark.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`variant\` | \`"solid" \\| "gradient" \\| "dark"\` | \`"gradient"\` | Background style |
+| \`showBranding\` | \`boolean\` | \`true\` | Show "ContractSpec" watermark |
+| \`animateEntrance\` | \`boolean\` | \`true\` | Fade-in on first frames |
+| \`styleOverrides\` | \`VideoStyleOverrides\` | -- | Override colors, fonts, dark mode |
+
+### ProgressBar
+
+Thin progress indicator at the top or bottom of the frame.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`height\` | \`number\` | \`4\` | Bar height in pixels |
+| \`color\` | \`string\` | primary color | Bar fill color |
+| \`position\` | \`"top" \\| "bottom"\` | \`"bottom"\` | Placement |
+
+### SceneTransitionWrapper
+
+Wraps children with entrance/exit transitions (fade, slide-left, slide-right, wipe).
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`type\` | \`SceneTransitionType\` | -- | Transition type |
+| \`durationInFrames\` | \`number\` | -- | Transition duration |
+| \`direction\` | \`"in" \\| "out"\` | -- | Entering or exiting |
+
+## Full Compositions
+
+Full compositions combine primitives into complete video templates. They are registered in Remotion Studio via \`RemotionRoot\`.
+
+### ApiOverview
+
+Visualizes a ContractSpec definition generating a full API surface. Used for homepage demos and documentation.
+
+\`\`\`tsx
+import { ApiOverview } from "@contractspec/lib.video-gen/compositions/api-overview";
+
+<ApiOverview
+  specName="CreateUser"
+  method="POST"
+  endpoint="/api/users"
+  specCode={\`export const createUser = defineCommand({...})\`}
+  generatedOutputs={["REST Endpoint", "GraphQL Mutation", "Prisma Model"]}
+  tagline="One spec. Every surface."
+/>
+\`\`\`
+
+**Scenes**: Title + method badge -> Code typing animation -> Generated outputs fan-out -> Tagline.
+
+### SocialClip
+
+Short-form marketing content for LinkedIn, X, YouTube Shorts. Adapts layout for landscape (16:9), square (1:1), and portrait (9:16).
+
+\`\`\`tsx
+import { SocialClip } from "@contractspec/lib.video-gen/compositions/social-clip";
+
+<SocialClip
+  hook="Stop rewriting the same API logic."
+  message="Generate REST, GraphQL, DB, SDK from a single spec."
+  points={["Deterministic output", "Fully ejectable", "No lock-in"]}
+  cta="Try ContractSpec"
+  ctaUrl="contractspec.dev"
+/>
+\`\`\`
+
+**Scenes**: Hook (attention grabber) -> Main message -> Supporting points -> CTA button.
+
+### TerminalDemo
+
+CLI command walkthrough with animated terminal. Used in documentation and tutorial videos.
+
+\`\`\`tsx
+import { TerminalDemo } from "@contractspec/lib.video-gen/compositions/terminal-demo";
+
+<TerminalDemo
+  title="Getting Started with ContractSpec"
+  subtitle="Define once, generate everything."
+  lines={[
+    { type: "command", text: "npx contractspec init my-api" },
+    { type: "output", text: "Created my-api/ with 3 sample contracts" },
+    { type: "command", text: "npx contractspec build" },
+    { type: "success", text: "Built 3 contracts -> 18 generated files" },
+  ]}
+  summary="Ship faster. Stay coherent."
+/>
+\`\`\`
+
+**Scenes**: Title + subtitle -> Terminal typing animation -> Summary.
+
+## Creating New Compositions
+
+1. Create a new \`.tsx\` file in \`src/compositions/\`.
+2. Use primitives from \`./primitives/\` and design tokens from \`../design/\`.
+3. Use \`useCurrentFrame()\` and \`interpolate()\` for frame-based animations.
+4. Register in \`src/remotion/Root.tsx\` with a \`<Composition>\` entry.
+5. Export from \`src/compositions/index.ts\`.
+6. Add the export path to \`package.json\` (both workspace and publishConfig).
+
+### Guardrails
+
+- Keep compositions **pure**: no side effects, no network calls, no randomness.
+- Use \`scaleSafeZone()\` and \`scaleTypography()\` to support multiple formats.
+- All timing should be frame-based (not time-based) for deterministic output.
+`
+  }
+];
+registerDocBlocks(compositionsDocBlocks);

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

@@ -0,0 +1,187 @@
+// src/docs/design.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts-spec/docs";
+var designDocBlocks = [
+  {
+    id: "docs.video-gen.design",
+    title: "Video Design System",
+    summary: "Design tokens, motion primitives, typography scale, and layout system optimized for programmatic video.",
+    kind: "reference",
+    visibility: "public",
+    route: "/docs/video-gen/design",
+    tags: ["video", "design-tokens", "motion", "typography", "layout"],
+    owners: ["@contractspec/lib.video-gen"],
+    body: `# Video Design System
+
+The design layer bridges \`@contractspec/lib.design-system\` brand tokens with video-specific extensions for motion, typography, and spatial layout. All values are optimized for 1920x1080 (landscape) and scale proportionally for other formats.
+
+\`\`\`ts
+import {
+  defaultVideoTheme,
+  videoEasing,
+  videoDurations,
+  videoTypography,
+  videoSafeZone,
+  scaleSafeZone,
+} from "@contractspec/lib.video-gen/design";
+\`\`\`
+
+## Tokens
+
+### Brand Bridge
+
+\`VideoThemeTokens\` extends the design-system \`ThemeTokens\` with a \`video\` namespace for video-specific colors:
+
+\`\`\`ts
+import { defaultVideoTheme } from "@contractspec/lib.video-gen/design/tokens";
+
+// Brand tokens (from @contractspec/lib.design-system)
+defaultVideoTheme.colors.primary;    // brand primary
+defaultVideoTheme.colors.accent;     // brand accent
+
+// Video-specific extensions
+defaultVideoTheme.video.canvasBackground;    // frame background
+defaultVideoTheme.video.codeBackground;      // "#1e1e2e"
+defaultVideoTheme.video.terminalBackground;  // "#0d1117"
+defaultVideoTheme.video.terminalForeground;  // "#c9d1d9"
+defaultVideoTheme.video.highlight;           // accent color
+defaultVideoTheme.video.gradientStart;       // primary
+defaultVideoTheme.video.gradientEnd;         // accent
+\`\`\`
+
+> Do not duplicate brand color values. Import and extend from \`@contractspec/lib.design-system\`.
+
+## Motion
+
+### Easing Functions
+
+Pre-configured easing curves for use with Remotion's \`interpolate()\`:
+
+| Key | Easing | Use Case |
+|-----|--------|----------|
+| \`entrance\` | \`Easing.out(Easing.exp)\` | Objects appearing |
+| \`exit\` | \`Easing.in(Easing.exp)\` | Objects disappearing |
+| \`emphasis\` | \`Easing.out(Easing.back(1.4))\` | Drawing attention, bounce |
+| \`linear\` | \`Easing.linear\` | Progress bars, typing |
+| \`gentle\` | \`Easing.bezier(0.25, 0.1, 0.25, 1)\` | Subtle movements |
+| \`spring\` | \`Easing.out(Easing.back(1.7))\` | Playful movements |
+
+\`\`\`ts
+import { interpolate } from "remotion";
+import { videoEasing } from "@contractspec/lib.video-gen/design/motion";
+
+const opacity = interpolate(frame, [0, 15], [0, 1], {
+  easing: videoEasing.entrance,
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+});
+\`\`\`
+
+### Durations (frames at 30fps)
+
+| Key | Frames | Seconds | Use Case |
+|-----|--------|---------|----------|
+| \`sceneTransition\` | 20 | 0.67s | Between scenes |
+| \`textEntrance\` | 15 | 0.5s | Text slide-in |
+| \`textExit\` | 12 | 0.4s | Text slide-out |
+| \`codeTypingPerChar\` | 2 | 0.07s | Code typing speed |
+| \`sectionPause\` | 30 | 1.0s | Pause after concept |
+| \`emphasisPause\` | 15 | 0.5s | Brief emphasis |
+| \`brandReveal\` | 25 | 0.83s | Logo/watermark |
+| \`minScene\` | 60 | 2.0s | Minimum scene length |
+| \`shortScene\` | 60 | 2.0s | Short scene |
+| \`mediumScene\` | 120 | 4.0s | Medium scene |
+| \`longScene\` | 240 | 8.0s | Long scene |
+
+### Transition Presets
+
+\`\`\`ts
+import { videoTransitions } from "@contractspec/lib.video-gen/design/motion";
+
+// { type: "fade", durationInFrames: 20 }
+videoTransitions.fade;
+
+// { type: "slide-left", durationInFrames: 20 }
+videoTransitions.slideLeft;
+\`\`\`
+
+## Typography
+
+### Type Scale (1920x1080 baseline)
+
+| Key | Size | Weight | Use Case |
+|-----|------|--------|----------|
+| \`title\` | 72px | 700 | Main title |
+| \`heading\` | 56px | 600 | Section heading |
+| \`subheading\` | 40px | 500 | Subheading |
+| \`body\` | 32px | 400 | Body text |
+| \`code\` | 28px | 400 | Monospace code |
+| \`caption\` | 24px | 400 | Small caption |
+| \`label\` | 20px | 600 | Badge / label |
+
+### Scaling for Other Formats
+
+Use \`scaleTypography()\` to proportionally scale for non-landscape formats:
+
+\`\`\`ts
+import {
+  videoTypography,
+  scaleTypography,
+} from "@contractspec/lib.video-gen/design/typography";
+
+// Scale heading for 1080x1080 (square)
+const squareHeading = scaleTypography(videoTypography.heading, 1080);
+// -> fontSize: 32, lineHeight: 1.2, fontWeight: 600
+\`\`\`
+
+## Layouts
+
+### Safe Zones
+
+Content-safe padding for text within video frames (1920x1080 baseline):
+
+\`\`\`ts
+import {
+  videoSafeZone,
+  scaleSafeZone,
+} from "@contractspec/lib.video-gen/design/layouts";
+
+videoSafeZone.horizontal;   // 120px
+videoSafeZone.vertical;     // 80px
+videoSafeZone.contentWidth;  // 1680px
+videoSafeZone.contentHeight; // 920px
+
+// Scale for portrait (1080x1920)
+const portrait = scaleSafeZone({ type: "portrait", width: 1080, height: 1920 });
+\`\`\`
+
+### Standard Positions
+
+\`\`\`ts
+import { videoPositions } from "@contractspec/lib.video-gen/design/layouts";
+
+videoPositions.center;       // { x: 960, y: 540 }
+videoPositions.topLeft;      // { x: 120, y: 80 }
+videoPositions.bottomRight;  // { x: 1800, y: 1000 } -- logos, watermarks
+videoPositions.bottomCenter; // { x: 960, y: 960 } -- captions
+\`\`\`
+
+### Format Variants
+
+\`\`\`ts
+import {
+  VIDEO_FORMATS,
+  getAllFormatVariants,
+  DEFAULT_FPS,
+} from "@contractspec/lib.video-gen/design/layouts";
+
+VIDEO_FORMATS.landscape; // { type: "landscape", width: 1920, height: 1080 }
+VIDEO_FORMATS.portrait;  // { type: "portrait",  width: 1080, height: 1920 }
+VIDEO_FORMATS.square;    // { type: "square",    width: 1080, height: 1080 }
+
+getAllFormatVariants();   // [landscape, square, portrait]
+DEFAULT_FPS;             // 30
+\`\`\`
+`
+  }
+];
+registerDocBlocks(designDocBlocks);