@contractspec/lib.video-gen 2.7.16 → 2.7.18

package/dist/node/design/index.js

@@ -1,150 +1 @@
-import { createRequire } from "node:module";
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// 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 }
-};
-
-// 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
-};
-
-// 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/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 {
-  videoTypography,
-  videoTransitions,
-  videoSafeZone,
-  videoPositions,
-  videoEasing,
-  videoDurations,
-  scaleTypography,
-  scaleSafeZone,
-  getAllFormatVariants,
-  defaultVideoTheme,
-  defaultVideoColors,
-  defaultTokens,
-  VIDEO_FORMATS,
-  DEFAULT_FPS
-};
+import{createRequire as J}from"node:module";var N=J(import.meta.url);import{Easing as x}from"remotion";var $={entrance:x.out(x.exp),exit:x.in(x.exp),emphasis:x.out(x.back(1.4)),linear:x.linear,gentle:x.bezier(0.25,0.1,0.25,1),spring:x.out(x.back(1.7))},P={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},w={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}};import{defaultTokens as z}from"@contractspec/lib.design-system";var K={canvasBackground:z.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:z.colors.accent,gradientStart:z.colors.primary,gradientEnd:z.colors.accent},X={...z,video:K};var m={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 p(j,B){let q=B/1920;return{...j,fontSize:Math.round(j.fontSize*q),letterSpacing:j.letterSpacing?Math.round(j.letterSpacing*q*10)/10:void 0}}import{VIDEO_FORMATS as H}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var F=30,G={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function I(j){let B=j.width/1920,q=j.height/1080;return{horizontal:Math.round(G.horizontal*B),vertical:Math.round(G.vertical*q),contentWidth:Math.round(G.contentWidth*B),contentHeight:Math.round(G.contentHeight*q)}}var M={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 R(){return[H.landscape,H.square,H.portrait]}export{m as videoTypography,w as videoTransitions,G as videoSafeZone,M as videoPositions,$ as videoEasing,P as videoDurations,p as scaleTypography,I as scaleSafeZone,R as getAllFormatVariants,X as defaultVideoTheme,K as defaultVideoColors,z as defaultTokens,H as VIDEO_FORMATS,F as DEFAULT_FPS};

package/dist/node/design/layouts.js

@@ -1,45 +1 @@
-import { createRequire } from "node:module";
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// 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
-};
+import{createRequire as w}from"node:module";var y=w(import.meta.url);import{VIDEO_FORMATS as j}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var C=30,h={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function G(k){let q=k.width/1920,u=k.height/1080;return{horizontal:Math.round(h.horizontal*q),vertical:Math.round(h.vertical*u),contentWidth:Math.round(h.contentWidth*q),contentHeight:Math.round(h.contentHeight*u)}}var H={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 J(){return[j.landscape,j.square,j.portrait]}export{h as videoSafeZone,H as videoPositions,G as scaleSafeZone,J as getAllFormatVariants,j as VIDEO_FORMATS,C as DEFAULT_FPS};

package/dist/node/design/motion.js

@@ -1,38 +1 @@
-import { createRequire } from "node:module";
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// 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
-};
+import{createRequire as h}from"node:module";var k=h(import.meta.url);import{Easing as d}from"remotion";var v={entrance:d.out(d.exp),exit:d.in(d.exp),emphasis:d.out(d.back(1.4)),linear:d.linear,gentle:d.bezier(0.25,0.1,0.25,1),spring:d.out(d.back(1.7))},w={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},x={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{x as videoTransitions,v as videoEasing,w as videoDurations};

package/dist/node/design/tokens.js

@@ -1,23 +1 @@
-import { createRequire } from "node:module";
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// 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
-};
+import{createRequire as q}from"node:module";var B=q(import.meta.url);import{defaultTokens as j}from"@contractspec/lib.design-system";var z={canvasBackground:j.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:j.colors.accent,gradientStart:j.colors.primary,gradientEnd:j.colors.accent},F={...j,video:z};export{F as defaultVideoTheme,z as defaultVideoColors,j as defaultTokens};

package/dist/node/design/typography.js

@@ -1,56 +1 @@
-import { createRequire } from "node:module";
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// 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
-};
+import{createRequire as m}from"node:module";var u=m(import.meta.url);var A={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 B(b,k){let j=k/1920;return{...b,fontSize:Math.round(b.fontSize*j),letterSpacing:b.letterSpacing?Math.round(b.letterSpacing*j*10)/10:void 0}}export{A as videoTypography,B as scaleTypography};

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

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

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

@@ -1,16 +1,4 @@
-// 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
+import{registerDocBlocks as f}from"@contractspec/lib.contracts-spec/docs";var h=[{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.
 
@@ -181,7 +169,4 @@ VIDEO_FORMATS.square;    // { type: "square",    width: 1080, height: 1080 }
 getAllFormatVariants();   // [landscape, square, portrait]
 DEFAULT_FPS;             // 30
 \`\`\`
-`
-  }
-];
-registerDocBlocks(designDocBlocks);
+`}];f(h);

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

@@ -1,23 +1,4 @@
-// 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
+import{registerDocBlocks as f}from"@contractspec/lib.contracts-spec/docs";var h=[{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.
 
@@ -181,7 +162,4 @@ interface PlannedScene {
 - 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);
+`}];f(h);

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

@@ -1,23 +1,4 @@
-// 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
+import{registerDocBlocks as f}from"@contractspec/lib.contracts-spec/docs";var h=[{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\`.
 
@@ -191,7 +172,4 @@ All compositions run at 30fps.
 - 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);
+`}];f(h);

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

@@ -1,16 +1,4 @@
-// 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
+import{registerDocBlocks as f}from"@contractspec/lib.contracts-spec/docs";var h=[{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\`.
 
@@ -135,7 +123,4 @@ This matches the content-gen pattern: \`constructor({ llm? })\` -> \`generate(br
 - Design tokens bridge from \`@contractspec/lib.design-system\` -- do not duplicate brand values.
 - \`LocalRenderer\` works with Node.js and Bun. On Bun, SSR scripts may not auto-quit (see [Remotion Bun docs](https://www.remotion.dev/docs/bun)).
 - The \`remotion\` entry point is a side-effect module (calls \`registerRoot\`) -- import it only from Remotion Studio or render scripts.
-`
-  }
-];
-registerDocBlocks(videoGenDocBlocks);
+`}];f(h);