@contractspec/lib.video-gen 1.42.0

package/dist/index.js

@@ -0,0 +1,1545 @@
+// @bun
+var __require = import.meta.require;
+
+// 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/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
+  ];
+}
+
+// src/compositions/primitives/brand-frame.tsx
+import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var BrandFrame = ({
+  styleOverrides,
+  showBranding = true,
+  animateEntrance = true,
+  variant = "gradient",
+  children
+}) => {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const theme = defaultVideoTheme;
+  const safeZone = scaleSafeZone({ type: "custom", width, height });
+  const primaryColor = styleOverrides?.primaryColor ?? theme.colors.primary;
+  const _accentColor = styleOverrides?.accentColor ?? theme.colors.accent;
+  const isDark = styleOverrides?.darkMode ?? true;
+  let background;
+  switch (variant) {
+    case "solid":
+      background = isDark ? "#0a0a0a" : theme.colors.background;
+      break;
+    case "gradient":
+      background = isDark ? `linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)` : `linear-gradient(135deg, ${theme.colors.background} 0%, ${theme.colors.muted} 100%)`;
+      break;
+    case "dark":
+      background = "#000000";
+      break;
+  }
+  const entranceOpacity = animateEntrance ? interpolate(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], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : 0;
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      width,
+      height,
+      background,
+      position: "relative",
+      overflow: "hidden",
+      opacity: entranceOpacity
+    },
+    children: [
+      variant === "gradient" && /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          position: "absolute",
+          top: "-20%",
+          right: "-10%",
+          width: "50%",
+          height: "50%",
+          background: `radial-gradient(circle, ${primaryColor}15 0%, transparent 70%)`,
+          borderRadius: "50%",
+          pointerEvents: "none"
+        }
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          position: "absolute",
+          left: safeZone.horizontal,
+          top: safeZone.vertical,
+          width: safeZone.contentWidth,
+          height: safeZone.contentHeight,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children
+      }, undefined, false, undefined, this),
+      showBranding && /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          position: "absolute",
+          bottom: safeZone.vertical / 2,
+          right: safeZone.horizontal,
+          opacity: brandOpacity,
+          color: isDark ? "#ffffff" : "#000000",
+          fontSize: Math.round(16 * (width / 1920)),
+          fontWeight: 500,
+          letterSpacing: 1
+        },
+        children: "ContractSpec"
+      }, undefined, false, undefined, this)
+    ]
+  }, 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";
+var CodeBlock = ({
+  code,
+  language = "typescript",
+  startAt = 0,
+  typeAnimation = true,
+  backgroundColor = defaultVideoColors.codeBackground,
+  textColor = "#abb2bf",
+  filename
+}) => {
+  const frame = useCurrentFrame3();
+  const { width } = useVideoConfig3();
+  const codeStyle = scaleTypography(videoTypography.code, width);
+  const totalChars = code.length;
+  const typingDuration = totalChars * videoDurations.codeTypingPerChar;
+  const charsVisible = typeAnimation ? Math.floor(interpolate3(frame, [startAt, startAt + typingDuration], [0, totalChars], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  })) : totalChars;
+  const visibleCode = code.slice(0, charsVisible);
+  const opacity = interpolate3(frame, [startAt, startAt + 10], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.entrance
+  });
+  const showCursor = typeAnimation && charsVisible < totalChars && frame % 16 < 10;
+  return /* @__PURE__ */ jsxDEV3("div", {
+    style: {
+      backgroundColor,
+      borderRadius: 16,
+      padding: 0,
+      opacity,
+      overflow: "hidden",
+      boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "12px 20px",
+          backgroundColor: "rgba(0,0,0,0.2)",
+          gap: 8
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV3("div", {
+            style: { display: "flex", gap: 8 },
+            children: [
+              /* @__PURE__ */ jsxDEV3("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#ff5f57"
+                }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#febc2e"
+                }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#28c840"
+                }
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            style: {
+              flex: 1,
+              textAlign: "center",
+              color: "#666",
+              fontSize: codeStyle.fontSize * 0.7,
+              fontFamily: "monospace"
+            },
+            children: filename ?? language
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        style: { padding: "24px 32px" },
+        children: /* @__PURE__ */ jsxDEV3("pre", {
+          style: {
+            margin: 0,
+            fontFamily: "'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",
+            fontSize: codeStyle.fontSize,
+            lineHeight: codeStyle.lineHeight,
+            color: textColor,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word"
+          },
+          children: [
+            visibleCode,
+            showCursor && /* @__PURE__ */ jsxDEV3("span", {
+              style: {
+                backgroundColor: textColor,
+                width: "2px",
+                display: "inline-block",
+                height: "1.2em",
+                verticalAlign: "text-bottom"
+              },
+              children: "\xA0"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
+// src/compositions/primitives/progress-bar.tsx
+import { useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig4 } from "remotion";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+var ProgressBar = ({
+  height = 4,
+  color = defaultVideoTheme.colors.primary,
+  backgroundColor = "rgba(255,255,255,0.1)",
+  position = "bottom"
+}) => {
+  const frame = useCurrentFrame4();
+  const { durationInFrames, width } = useVideoConfig4();
+  const progress = frame / durationInFrames;
+  return /* @__PURE__ */ jsxDEV4("div", {
+    style: {
+      position: "absolute",
+      [position]: 0,
+      left: 0,
+      width,
+      height,
+      backgroundColor,
+      zIndex: 100
+    },
+    children: /* @__PURE__ */ jsxDEV4("div", {
+      style: {
+        width: `${progress * 100}%`,
+        height: "100%",
+        backgroundColor: color,
+        transition: "none"
+      }
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+};
+
+// src/compositions/api-overview.tsx
+import {
+  AbsoluteFill,
+  Sequence,
+  interpolate as interpolate4,
+  useCurrentFrame as useCurrentFrame5,
+  useVideoConfig as useVideoConfig5
+} from "remotion";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+var ApiOverview = ({
+  specName,
+  method = "POST",
+  endpoint = "/api/users",
+  specCode,
+  generatedOutputs = [
+    "REST Endpoint",
+    "GraphQL Mutation",
+    "Prisma Model",
+    "TypeScript SDK",
+    "MCP Tool",
+    "OpenAPI Spec"
+  ],
+  tagline = "One spec. Every surface."
+}) => {
+  const { durationInFrames } = useVideoConfig5();
+  const theme = defaultVideoTheme;
+  const INTRO_END = 60;
+  const CODE_START = 45;
+  const CODE_END = INTRO_END + 150;
+  const OUTPUTS_START = CODE_END - 30;
+  const TAGLINE_START = durationInFrames - 90;
+  return /* @__PURE__ */ jsxDEV5(AbsoluteFill, {
+    children: [
+      /* @__PURE__ */ jsxDEV5(BrandFrame, {
+        variant: "gradient",
+        showBranding: true,
+        children: [
+          /* @__PURE__ */ jsxDEV5(Sequence, {
+            from: 0,
+            durationInFrames: CODE_END,
+            children: /* @__PURE__ */ jsxDEV5("div", {
+              style: {
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                gap: 16
+              },
+              children: [
+                /* @__PURE__ */ jsxDEV5("div", {
+                  style: { display: "flex", alignItems: "center", gap: 16 },
+                  children: [
+                    /* @__PURE__ */ jsxDEV5(MethodBadge, {
+                      method,
+                      enterAt: 10
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV5(AnimatedText, {
+                      text: endpoint,
+                      variant: "subheading",
+                      enterAt: 15,
+                      color: theme.colors.mutedForeground
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV5(AnimatedText, {
+                  text: specName,
+                  variant: "title",
+                  enterAt: 5,
+                  color: "#ffffff"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("div", {
+                  style: { flex: 1, marginTop: 24 },
+                  children: /* @__PURE__ */ jsxDEV5(CodeBlock, {
+                    code: specCode,
+                    language: "typescript",
+                    filename: `${specName.toLowerCase()}.contract.ts`,
+                    startAt: CODE_START,
+                    typeAnimation: true
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Sequence, {
+            from: OUTPUTS_START,
+            durationInFrames: durationInFrames - OUTPUTS_START,
+            children: /* @__PURE__ */ jsxDEV5("div", {
+              style: {
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: 24
+              },
+              children: [
+                /* @__PURE__ */ jsxDEV5(AnimatedText, {
+                  text: "Generates:",
+                  variant: "heading",
+                  enterAt: 0,
+                  color: "#ffffff",
+                  align: "center"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("div", {
+                  style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 16,
+                    justifyContent: "center",
+                    maxWidth: "80%",
+                    marginTop: 32
+                  },
+                  children: generatedOutputs.map((output, i) => /* @__PURE__ */ jsxDEV5(OutputChip, {
+                    label: output,
+                    index: i,
+                    startFrame: 20 + i * 8
+                  }, output, false, undefined, this))
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5(Sequence, {
+                  from: TAGLINE_START - OUTPUTS_START,
+                  children: /* @__PURE__ */ jsxDEV5("div", {
+                    style: { marginTop: 48 },
+                    children: /* @__PURE__ */ jsxDEV5(AnimatedText, {
+                      text: tagline,
+                      variant: "heading",
+                      enterAt: 0,
+                      color: theme.colors.accent,
+                      align: "center"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5(ProgressBar, {}, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var MethodBadge = ({
+  method,
+  enterAt
+}) => {
+  const frame = useCurrentFrame5();
+  const opacity = interpolate4(frame, [enterAt, enterAt + 10], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.entrance
+  });
+  const scale = interpolate4(frame, [enterAt, enterAt + 12], [0.8, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.emphasis
+  });
+  const methodColors = {
+    GET: "#61afef",
+    POST: "#98c379",
+    PUT: "#e5c07b",
+    PATCH: "#d19a66",
+    DELETE: "#e06c75"
+  };
+  return /* @__PURE__ */ jsxDEV5("div", {
+    style: {
+      opacity,
+      transform: `scale(${scale})`,
+      backgroundColor: methodColors[method] ?? "#61afef",
+      color: "#000",
+      padding: "8px 20px",
+      borderRadius: 8,
+      fontSize: 24,
+      fontWeight: 700,
+      fontFamily: "monospace",
+      letterSpacing: 1
+    },
+    children: method
+  }, undefined, false, undefined, this);
+};
+var OutputChip = ({ label, startFrame }) => {
+  const frame = useCurrentFrame5();
+  const opacity = interpolate4(frame, [startFrame, startFrame + 12], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const translateY = interpolate4(frame, [startFrame, startFrame + 15], [20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.emphasis
+  });
+  const scale = interpolate4(frame, [startFrame, startFrame + 15], [0.9, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.emphasis
+  });
+  return /* @__PURE__ */ jsxDEV5("div", {
+    style: {
+      opacity,
+      transform: `translateY(${translateY}px) scale(${scale})`,
+      backgroundColor: "rgba(255,255,255,0.08)",
+      border: "1px solid rgba(255,255,255,0.15)",
+      color: "#ffffff",
+      padding: "16px 32px",
+      borderRadius: 12,
+      fontSize: 28,
+      fontWeight: 500
+    },
+    children: label
+  }, undefined, false, undefined, this);
+};
+
+// src/compositions/primitives/terminal.tsx
+import { interpolate as interpolate5, useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig6 } from "remotion";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+var LINE_TYPE_COLORS = {
+  command: "#c9d1d9",
+  output: "#8b949e",
+  error: "#f85149",
+  success: "#3fb950",
+  comment: "#6e7681"
+};
+var Terminal = ({
+  lines,
+  startAt = 0,
+  prompt = "$ ",
+  title = "Terminal",
+  backgroundColor = defaultVideoColors.terminalBackground,
+  typingSpeed = videoDurations.codeTypingPerChar
+}) => {
+  const frame = useCurrentFrame6();
+  const { width } = useVideoConfig6();
+  const codeStyle = scaleTypography(videoTypography.code, width);
+  const lineTimings = [];
+  let currentFrame = startAt;
+  for (const line of lines) {
+    const delay = line.delay ?? 10;
+    const lineStart = currentFrame + delay;
+    if (line.type === "command") {
+      const typeDuration = line.text.length * typingSpeed;
+      lineTimings.push({
+        startFrame: lineStart,
+        endFrame: lineStart + typeDuration
+      });
+      currentFrame = lineStart + typeDuration;
+    } else {
+      lineTimings.push({ startFrame: lineStart, endFrame: lineStart + 5 });
+      currentFrame = lineStart + 5;
+    }
+  }
+  const opacity = interpolate5(frame, [startAt, startAt + 10], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.entrance
+  });
+  return /* @__PURE__ */ jsxDEV6("div", {
+    style: {
+      backgroundColor,
+      borderRadius: 16,
+      overflow: "hidden",
+      opacity,
+      boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "12px 20px",
+          backgroundColor: "rgba(255,255,255,0.05)",
+          gap: 8
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV6("div", {
+            style: { display: "flex", gap: 8 },
+            children: [
+              /* @__PURE__ */ jsxDEV6("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#ff5f57"
+                }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#febc2e"
+                }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#28c840"
+                }
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("div", {
+            style: {
+              flex: 1,
+              textAlign: "center",
+              color: "#484f58",
+              fontSize: codeStyle.fontSize * 0.7,
+              fontFamily: "monospace"
+            },
+            children: title
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        style: { padding: "24px 32px", minHeight: 200 },
+        children: lines.map((line, i) => {
+          const timing = lineTimings[i];
+          if (!timing || frame < timing.startFrame)
+            return null;
+          const isCommand = line.type === "command";
+          const lineColor = LINE_TYPE_COLORS[line.type];
+          let visibleText = line.text;
+          if (isCommand) {
+            const typingProgress = interpolate5(frame, [timing.startFrame, timing.endFrame], [0, line.text.length], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+            visibleText = line.text.slice(0, Math.floor(typingProgress));
+          }
+          const lineOpacity = isCommand ? 1 : interpolate5(frame, [timing.startFrame, timing.startFrame + 5], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp"
+          });
+          const isTyping = isCommand && frame >= timing.startFrame && frame <= timing.endFrame;
+          const showCursor = isTyping && frame % 16 < 10;
+          return /* @__PURE__ */ jsxDEV6("div", {
+            style: {
+              fontFamily: "'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",
+              fontSize: codeStyle.fontSize,
+              lineHeight: 1.8,
+              color: lineColor,
+              opacity: lineOpacity,
+              whiteSpace: "pre-wrap"
+            },
+            children: [
+              isCommand && /* @__PURE__ */ jsxDEV6("span", {
+                style: { color: "#3fb950" },
+                children: prompt
+              }, undefined, false, undefined, this),
+              line.type === "comment" && /* @__PURE__ */ jsxDEV6("span", {
+                style: { color: LINE_TYPE_COLORS.comment },
+                children: "# "
+              }, undefined, false, undefined, this),
+              visibleText,
+              showCursor && /* @__PURE__ */ jsxDEV6("span", {
+                style: {
+                  backgroundColor: "#c9d1d9",
+                  width: "2px",
+                  display: "inline-block",
+                  height: "1.2em",
+                  verticalAlign: "text-bottom"
+                },
+                children: "\xA0"
+              }, undefined, false, undefined, this)
+            ]
+          }, `${i}-${line.text.slice(0, 20)}`, true, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
+// src/compositions/primitives/transition.tsx
+import { interpolate as interpolate6, useCurrentFrame as useCurrentFrame7 } from "remotion";
+import { jsxDEV as jsxDEV7, Fragment } from "react/jsx-dev-runtime";
+var SceneTransitionWrapper = ({
+  type,
+  durationInFrames,
+  direction,
+  startAt = 0,
+  children
+}) => {
+  const frame = useCurrentFrame7();
+  if (type === "none" || durationInFrames === 0) {
+    return /* @__PURE__ */ jsxDEV7(Fragment, {
+      children
+    }, undefined, false, undefined, this);
+  }
+  const progress = interpolate6(frame, [startAt, startAt + durationInFrames], direction === "in" ? [0, 1] : [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const styles = getTransitionStyles(type, progress);
+  return /* @__PURE__ */ jsxDEV7("div", {
+    style: styles,
+    children
+  }, undefined, false, undefined, this);
+};
+function getTransitionStyles(type, progress) {
+  const eased = videoEasing.entrance(progress);
+  switch (type) {
+    case "fade":
+      return {
+        opacity: eased,
+        width: "100%",
+        height: "100%"
+      };
+    case "slide-left":
+      return {
+        opacity: eased,
+        transform: `translateX(${(1 - eased) * 100}%)`,
+        width: "100%",
+        height: "100%"
+      };
+    case "slide-right":
+      return {
+        opacity: eased,
+        transform: `translateX(${(1 - eased) * -100}%)`,
+        width: "100%",
+        height: "100%"
+      };
+    case "wipe":
+      return {
+        clipPath: `inset(0 ${(1 - eased) * 100}% 0 0)`,
+        width: "100%",
+        height: "100%"
+      };
+    default:
+      return { width: "100%", height: "100%" };
+  }
+}
+// src/compositions/social-clip.tsx
+import {
+  AbsoluteFill as AbsoluteFill2,
+  Sequence as Sequence2,
+  interpolate as interpolate7,
+  useCurrentFrame as useCurrentFrame8,
+  useVideoConfig as useVideoConfig7
+} from "remotion";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+var SocialClip = ({
+  hook,
+  message,
+  points = [],
+  cta = "Learn more",
+  ctaUrl = "contractspec.dev",
+  accentColor
+}) => {
+  const { durationInFrames, width, height } = useVideoConfig7();
+  const theme = defaultVideoTheme;
+  const accent = accentColor ?? theme.colors.accent;
+  const isPortrait = height > width;
+  const HOOK_DURATION = 75;
+  const MESSAGE_START = 60;
+  const POINTS_START = MESSAGE_START + 60;
+  const CTA_START = durationInFrames - 90;
+  return /* @__PURE__ */ jsxDEV8(AbsoluteFill2, {
+    children: [
+      /* @__PURE__ */ jsxDEV8(BrandFrame, {
+        variant: "gradient",
+        showBranding: true,
+        children: /* @__PURE__ */ jsxDEV8("div", {
+          style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: isPortrait ? 48 : 32,
+            textAlign: "center",
+            padding: isPortrait ? "0 20px" : 0
+          },
+          children: [
+            /* @__PURE__ */ jsxDEV8(Sequence2, {
+              from: 0,
+              durationInFrames: HOOK_DURATION + 30,
+              children: /* @__PURE__ */ jsxDEV8("div", {
+                style: { width: "100%" },
+                children: /* @__PURE__ */ jsxDEV8(AnimatedText, {
+                  text: hook,
+                  variant: "title",
+                  enterAt: 5,
+                  exitAt: HOOK_DURATION,
+                  color: "#ffffff",
+                  align: "center"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV8(Sequence2, {
+              from: MESSAGE_START,
+              children: /* @__PURE__ */ jsxDEV8("div", {
+                style: { width: "100%" },
+                children: /* @__PURE__ */ jsxDEV8(AnimatedText, {
+                  text: message,
+                  variant: isPortrait ? "subheading" : "heading",
+                  enterAt: 0,
+                  color: "#ffffff",
+                  align: "center"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            points.length > 0 && /* @__PURE__ */ jsxDEV8(Sequence2, {
+              from: POINTS_START,
+              children: /* @__PURE__ */ jsxDEV8("div", {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 16,
+                  alignItems: isPortrait ? "flex-start" : "center",
+                  width: "100%",
+                  maxWidth: isPortrait ? "100%" : "80%",
+                  marginTop: 16
+                },
+                children: points.map((point, i) => /* @__PURE__ */ jsxDEV8(PointItem, {
+                  text: point,
+                  index: i,
+                  startFrame: i * 15,
+                  accent
+                }, point, false, undefined, this))
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV8(Sequence2, {
+              from: CTA_START,
+              children: /* @__PURE__ */ jsxDEV8(CTABlock, {
+                cta,
+                url: ctaUrl,
+                accent
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV8(ProgressBar, {
+        color: accent
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var PointItem = ({ text, startFrame, accent }) => {
+  const frame = useCurrentFrame8();
+  const opacity = interpolate7(frame, [startFrame, startFrame + 12], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const translateX = interpolate7(frame, [startFrame, startFrame + 15], [-30, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.entrance
+  });
+  return /* @__PURE__ */ jsxDEV8("div", {
+    style: {
+      opacity,
+      transform: `translateX(${translateX}px)`,
+      display: "flex",
+      alignItems: "center",
+      gap: 16,
+      fontSize: 28,
+      color: "#ffffff"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV8("div", {
+        style: {
+          width: 8,
+          height: 8,
+          borderRadius: "50%",
+          backgroundColor: accent,
+          flexShrink: 0
+        }
+      }, undefined, false, undefined, this),
+      text
+    ]
+  }, undefined, true, undefined, this);
+};
+var CTABlock = ({ cta, url, accent }) => {
+  const frame = useCurrentFrame8();
+  const opacity = interpolate7(frame, [0, 15], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const scale = interpolate7(frame, [0, 18], [0.9, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.emphasis
+  });
+  return /* @__PURE__ */ jsxDEV8("div", {
+    style: {
+      opacity,
+      transform: `scale(${scale})`,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: 12,
+      marginTop: 24
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV8("div", {
+        style: {
+          backgroundColor: accent,
+          color: "#ffffff",
+          padding: "16px 48px",
+          borderRadius: 12,
+          fontSize: 28,
+          fontWeight: 600
+        },
+        children: cta
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV8("div", {
+        style: { color: "rgba(255,255,255,0.5)", fontSize: 20 },
+        children: url
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
+// src/compositions/terminal-demo.tsx
+import { AbsoluteFill as AbsoluteFill3, Sequence as Sequence3, useVideoConfig as useVideoConfig8 } from "remotion";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+var TerminalDemo = ({
+  title,
+  subtitle,
+  lines,
+  terminalTitle = "Terminal",
+  prompt = "$ ",
+  summary
+}) => {
+  const { durationInFrames } = useVideoConfig8();
+  const theme = defaultVideoTheme;
+  const TERMINAL_START = 40;
+  const SUMMARY_START = durationInFrames - 90;
+  return /* @__PURE__ */ jsxDEV9(AbsoluteFill3, {
+    children: [
+      /* @__PURE__ */ jsxDEV9(BrandFrame, {
+        variant: "dark",
+        showBranding: true,
+        children: /* @__PURE__ */ jsxDEV9("div", {
+          style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            gap: 24
+          },
+          children: [
+            /* @__PURE__ */ jsxDEV9("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV9(AnimatedText, {
+                  text: title,
+                  variant: "heading",
+                  enterAt: 5,
+                  color: "#ffffff"
+                }, undefined, false, undefined, this),
+                subtitle && /* @__PURE__ */ jsxDEV9("div", {
+                  style: { marginTop: 8 },
+                  children: /* @__PURE__ */ jsxDEV9(AnimatedText, {
+                    text: subtitle,
+                    variant: "body",
+                    enterAt: 15,
+                    color: theme.colors.mutedForeground
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV9(Sequence3, {
+              from: TERMINAL_START,
+              children: /* @__PURE__ */ jsxDEV9("div", {
+                style: { flex: 1 },
+                children: /* @__PURE__ */ jsxDEV9(Terminal, {
+                  lines,
+                  startAt: 0,
+                  prompt,
+                  title: terminalTitle
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            summary && /* @__PURE__ */ jsxDEV9(Sequence3, {
+              from: SUMMARY_START,
+              children: /* @__PURE__ */ jsxDEV9("div", {
+                style: {
+                  marginTop: "auto",
+                  paddingTop: 24
+                },
+                children: /* @__PURE__ */ jsxDEV9(AnimatedText, {
+                  text: summary,
+                  variant: "subheading",
+                  enterAt: 0,
+                  color: theme.colors.accent,
+                  align: "center"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV9(ProgressBar, {}, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+// src/generators/scene-planner.ts
+class ScenePlanner {
+  llm;
+  model;
+  temperature;
+  fps;
+  constructor(options) {
+    this.llm = options?.llm;
+    this.model = options?.model;
+    this.temperature = options?.temperature ?? 0.3;
+    this.fps = options?.fps ?? DEFAULT_FPS;
+  }
+  async plan(brief) {
+    if (this.llm) {
+      return this.planWithLlm(brief);
+    }
+    return this.planDeterministic(brief);
+  }
+  planDeterministic(brief) {
+    const { content } = brief;
+    const scenes = [];
+    const fps = this.fps;
+    scenes.push({
+      compositionId: "SocialClip",
+      props: {
+        hook: content.title,
+        message: content.summary,
+        points: content.solutions.slice(0, 3),
+        cta: content.callToAction ?? "Learn more"
+      },
+      durationInFrames: 3 * fps,
+      narrationText: `${content.title}. ${content.summary}`
+    });
+    if (content.problems.length > 0) {
+      scenes.push({
+        compositionId: "SocialClip",
+        props: {
+          hook: "The Problem",
+          message: content.problems[0] ?? "",
+          points: content.problems.slice(1, 4)
+        },
+        durationInFrames: 4 * fps,
+        narrationText: `The problem: ${content.problems.join(". ")}`
+      });
+    }
+    if (content.solutions.length > 0) {
+      scenes.push({
+        compositionId: "SocialClip",
+        props: {
+          hook: "The Solution",
+          message: content.solutions[0] ?? "",
+          points: content.solutions.slice(1, 4)
+        },
+        durationInFrames: 5 * fps,
+        narrationText: `The solution: ${content.solutions.join(". ")}`
+      });
+    }
+    if (content.metrics && content.metrics.length > 0) {
+      scenes.push({
+        compositionId: "SocialClip",
+        props: {
+          hook: "Results",
+          message: content.metrics[0] ?? "",
+          points: content.metrics.slice(1, 3)
+        },
+        durationInFrames: 3 * fps,
+        narrationText: content.metrics.join(". ")
+      });
+    }
+    if (content.callToAction) {
+      scenes.push({
+        compositionId: "SocialClip",
+        props: {
+          hook: content.callToAction,
+          message: "",
+          cta: content.callToAction
+        },
+        durationInFrames: 2 * fps,
+        narrationText: content.callToAction
+      });
+    }
+    if (brief.targetDurationSeconds) {
+      const targetFrames = brief.targetDurationSeconds * fps;
+      const currentFrames = scenes.reduce((sum, s) => sum + s.durationInFrames, 0);
+      const ratio = targetFrames / currentFrames;
+      for (const scene of scenes) {
+        scene.durationInFrames = Math.round(scene.durationInFrames * ratio);
+      }
+    }
+    const totalDuration = scenes.reduce((sum, s) => sum + s.durationInFrames, 0);
+    const narrationScript = scenes.filter((s) => s.narrationText).map((s) => s.narrationText).join(" ");
+    return {
+      scenes,
+      estimatedDurationSeconds: totalDuration / fps,
+      narrationScript
+    };
+  }
+  async planWithLlm(brief) {
+    const messages = [
+      {
+        role: "system",
+        content: [
+          {
+            type: "text",
+            text: `You are a video scene planner for ContractSpec marketing/documentation videos.
+Given a content brief, break it into video scenes.
+
+Each scene must have:
+- compositionId: one of "ApiOverview", "SocialClip", "TerminalDemo"
+- props: the input props for that composition (see type definitions)
+- durationInFrames: duration at ${this.fps}fps
+- narrationText: what the narrator says during this scene
+
+Return a JSON object with shape:
+{
+  "scenes": [{ "compositionId": string, "props": object, "durationInFrames": number, "narrationText": string }],
+  "narrationScript": string
+}
+
+Keep the total duration around ${brief.targetDurationSeconds ?? 30} seconds.
+Prioritize clarity and pacing. Each scene should communicate one idea.`
+          }
+        ]
+      },
+      {
+        role: "user",
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(brief.content)
+          }
+        ]
+      }
+    ];
+    if (!this.llm) {
+      return this.planDeterministic(brief);
+    }
+    try {
+      const response = await this.llm.chat(messages, {
+        model: this.model,
+        temperature: this.temperature,
+        responseFormat: "json"
+      });
+      const text = response.message.content.find((p) => p.type === "text");
+      if (!text || text.type !== "text") {
+        return this.planDeterministic(brief);
+      }
+      const parsed = JSON.parse(text.text);
+      const totalDuration = parsed.scenes.reduce((sum, s) => sum + s.durationInFrames, 0);
+      return {
+        scenes: parsed.scenes,
+        estimatedDurationSeconds: totalDuration / this.fps,
+        narrationScript: parsed.narrationScript
+      };
+    } catch {
+      return this.planDeterministic(brief);
+    }
+  }
+}
+
+// src/generators/script-generator.ts
+class ScriptGenerator {
+  llm;
+  model;
+  temperature;
+  constructor(options) {
+    this.llm = options?.llm;
+    this.model = options?.model;
+    this.temperature = options?.temperature ?? 0.5;
+  }
+  async generate(brief, config) {
+    const style = config?.style ?? "professional";
+    if (this.llm) {
+      return this.generateWithLlm(brief, style);
+    }
+    return this.generateDeterministic(brief, style);
+  }
+  generateDeterministic(brief, style) {
+    const segments = [];
+    const intro = this.formatForStyle(`${brief.title}. ${brief.summary}`, style);
+    segments.push({
+      sceneId: "intro",
+      text: intro,
+      estimatedDurationSeconds: this.estimateDuration(intro)
+    });
+    if (brief.problems.length > 0) {
+      const problemText = this.formatForStyle(`The challenge: ${brief.problems.join(". ")}`, style);
+      segments.push({
+        sceneId: "problems",
+        text: problemText,
+        estimatedDurationSeconds: this.estimateDuration(problemText)
+      });
+    }
+    if (brief.solutions.length > 0) {
+      const solutionText = this.formatForStyle(`The solution: ${brief.solutions.join(". ")}`, style);
+      segments.push({
+        sceneId: "solutions",
+        text: solutionText,
+        estimatedDurationSeconds: this.estimateDuration(solutionText)
+      });
+    }
+    if (brief.metrics && brief.metrics.length > 0) {
+      const metricsText = this.formatForStyle(`The results: ${brief.metrics.join(". ")}`, style);
+      segments.push({
+        sceneId: "metrics",
+        text: metricsText,
+        estimatedDurationSeconds: this.estimateDuration(metricsText)
+      });
+    }
+    if (brief.callToAction) {
+      const ctaText = this.formatForStyle(brief.callToAction, style);
+      segments.push({
+        sceneId: "cta",
+        text: ctaText,
+        estimatedDurationSeconds: this.estimateDuration(ctaText)
+      });
+    }
+    const fullText = segments.map((s) => s.text).join(" ");
+    const totalDuration = segments.reduce((sum, s) => sum + s.estimatedDurationSeconds, 0);
+    return {
+      fullText,
+      segments,
+      estimatedDurationSeconds: totalDuration,
+      style
+    };
+  }
+  async generateWithLlm(brief, style) {
+    const styleGuide = {
+      professional: "Use a clear, authoritative, professional tone. Be concise and direct.",
+      casual: "Use a friendly, conversational tone. Be approachable and relatable.",
+      technical: "Use precise technical language. Be detailed and accurate."
+    };
+    const styleKey = style ?? "professional";
+    const messages = [
+      {
+        role: "system",
+        content: [
+          {
+            type: "text",
+            text: `You are a video narration script writer.
+Write a narration script for a short video (30-60 seconds).
+${styleGuide[styleKey]}
+
+Return JSON with shape:
+{
+  "segments": [{ "sceneId": string, "text": string }],
+  "fullText": string
+}
+
+Scene IDs should be: "intro", "problems", "solutions", "metrics", "cta".
+Only include segments that are relevant to the brief content.`
+          }
+        ]
+      },
+      {
+        role: "user",
+        content: [{ type: "text", text: JSON.stringify(brief) }]
+      }
+    ];
+    if (!this.llm) {
+      return this.generateDeterministic(brief, style);
+    }
+    try {
+      const response = await this.llm.chat(messages, {
+        model: this.model,
+        temperature: this.temperature,
+        responseFormat: "json"
+      });
+      const text = response.message.content.find((p) => p.type === "text");
+      if (!text || text.type !== "text") {
+        return this.generateDeterministic(brief, style);
+      }
+      const parsed = JSON.parse(text.text);
+      const segments = parsed.segments.map((s) => ({
+        sceneId: s.sceneId,
+        text: s.text,
+        estimatedDurationSeconds: this.estimateDuration(s.text)
+      }));
+      return {
+        fullText: parsed.fullText,
+        segments,
+        estimatedDurationSeconds: segments.reduce((sum, s) => sum + s.estimatedDurationSeconds, 0),
+        style
+      };
+    } catch {
+      return this.generateDeterministic(brief, style);
+    }
+  }
+  formatForStyle(text, _style) {
+    return text;
+  }
+  estimateDuration(text) {
+    const wordCount = text.split(/\s+/).length;
+    return Math.ceil(wordCount / 150 * 60);
+  }
+}
+
+// src/generators/video-generator.ts
+import { VIDEO_FORMATS as VIDEO_FORMATS2 } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
+class VideoGenerator {
+  scenePlanner;
+  scriptGenerator;
+  voice;
+  defaultVoiceId;
+  fps;
+  constructor(options) {
+    this.fps = options?.fps ?? DEFAULT_FPS;
+    this.voice = options?.voice;
+    this.defaultVoiceId = options?.defaultVoiceId;
+    this.scenePlanner = new ScenePlanner({
+      llm: options?.llm,
+      model: options?.model,
+      temperature: options?.temperature,
+      fps: this.fps
+    });
+    this.scriptGenerator = new ScriptGenerator({
+      llm: options?.llm,
+      model: options?.model,
+      temperature: options?.temperature
+    });
+  }
+  async generate(brief) {
+    const scenePlan = await this.scenePlanner.plan(brief);
+    let narrationAudio;
+    if (brief.narration?.enabled && this.voice) {
+      const script = await this.scriptGenerator.generate(brief.content, brief.narration);
+      const voiceId = brief.narration.voiceId ?? this.defaultVoiceId;
+      if (voiceId && script.fullText) {
+        try {
+          const result = await this.voice.synthesize({
+            text: script.fullText,
+            voiceId,
+            format: "mp3"
+          });
+          narrationAudio = {
+            data: result.audio,
+            format: "mp3",
+            durationSeconds: result.durationSeconds ?? script.estimatedDurationSeconds,
+            volume: 1
+          };
+        } catch {}
+      }
+    }
+    const format = brief.format ?? VIDEO_FORMATS2.landscape;
+    const scenes = scenePlan.scenes.map((planned, i) => ({
+      id: `scene-${i}`,
+      compositionId: planned.compositionId,
+      props: planned.props,
+      durationInFrames: planned.durationInFrames,
+      narrationText: planned.narrationText
+    }));
+    const totalDurationInFrames = scenes.reduce((sum, s) => sum + s.durationInFrames, 0);
+    const project = {
+      id: generateProjectId(),
+      scenes,
+      totalDurationInFrames,
+      fps: this.fps,
+      format,
+      audio: narrationAudio ? { narration: narrationAudio } : undefined
+    };
+    return project;
+  }
+}
+function generateProjectId() {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).slice(2, 8);
+  return `vp_${timestamp}_${random}`;
+}
+// src/types.ts
+import { VIDEO_FORMATS as VIDEO_FORMATS3 } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
+
+// src/renderers/config.ts
+var defaultRenderConfig = {
+  codec: "h264",
+  outputFormat: "mp4",
+  crf: 18,
+  pixelFormat: "yuv420p"
+};
+var codecFormatMap = {
+  h264: "mp4",
+  h265: "mp4",
+  vp8: "webm",
+  vp9: "webm"
+};
+var qualityPresets = {
+  draft: { crf: 28, concurrency: 1 },
+  standard: { crf: 18, concurrency: undefined },
+  high: { crf: 12, concurrency: undefined }
+};
+function resolveRenderConfig(userConfig, preset) {
+  const presetValues = preset ? qualityPresets[preset] : {};
+  return {
+    ...defaultRenderConfig,
+    ...presetValues,
+    ...userConfig
+  };
+}
+export {
+  videoTypography,
+  videoTransitions,
+  videoSafeZone,
+  videoPositions,
+  videoEasing,
+  videoDurations,
+  scaleTypography,
+  scaleSafeZone,
+  resolveRenderConfig,
+  qualityPresets,
+  getAllFormatVariants,
+  defaultVideoTheme,
+  defaultVideoColors,
+  defaultTokens,
+  defaultRenderConfig,
+  codecFormatMap,
+  VideoGenerator,
+  TerminalDemo,
+  Terminal,
+  SocialClip,
+  ScriptGenerator,
+  SceneTransitionWrapper,
+  ScenePlanner,
+  ProgressBar,
+  DEFAULT_FPS,
+  CodeBlock,
+  BrandFrame,
+  ApiOverview,
+  AnimatedText
+};