@contractspec/lib.video-gen 2.7.16 → 2.7.18

package/dist/browser/remotion/Root.js

@@ -1,1078 +1,4 @@
-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 }
-};
-
-// 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/compositions/primitives/animated-text.tsx
-import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
-import { jsxDEV } from "react/jsx-dev-runtime";
-var AnimatedText = ({
-  text,
-  variant = "body",
-  style: styleOverride,
-  enterAt = 0,
-  exitAt,
-  color = "#ffffff",
-  align = "left"
-}) => {
-  const frame = useCurrentFrame();
-  const { width } = useVideoConfig();
-  const baseStyle = videoTypography[variant];
-  const scaled = scaleTypography(baseStyle, width);
-  const finalStyle = { ...scaled, ...styleOverride };
-  const enterProgress = interpolate(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const enterOpacity = interpolate(enterProgress, [0, 1], [0, 1], {
-    easing: videoEasing.entrance
-  });
-  const enterTranslateY = interpolate(enterProgress, [0, 1], [30, 0], {
-    easing: videoEasing.entrance
-  });
-  let exitOpacity = 1;
-  let exitTranslateY = 0;
-  if (exitAt !== undefined) {
-    const exitProgress = interpolate(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-    exitOpacity = interpolate(exitProgress, [0, 1], [1, 0], {
-      easing: videoEasing.exit
-    });
-    exitTranslateY = interpolate(exitProgress, [0, 1], [0, -20], {
-      easing: videoEasing.exit
-    });
-  }
-  const opacity = enterOpacity * exitOpacity;
-  const translateY = enterTranslateY + exitTranslateY;
-  return /* @__PURE__ */ jsxDEV("div", {
-    style: {
-      fontSize: finalStyle.fontSize,
-      lineHeight: finalStyle.lineHeight,
-      fontWeight: finalStyle.fontWeight,
-      letterSpacing: finalStyle.letterSpacing,
-      color,
-      textAlign: align,
-      opacity,
-      transform: `translateY(${translateY}px)`,
-      willChange: "opacity, transform"
-    },
-    children: text
-  }, undefined, false, undefined, this);
-};
-
-// src/design/layouts.ts
-import { VIDEO_FORMATS } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
-var DEFAULT_FPS = 30;
-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 as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-var BrandFrame = ({
-  styleOverrides,
-  showBranding = true,
-  animateEntrance = true,
-  variant = "gradient",
-  children
-}) => {
-  const frame = useCurrentFrame2();
-  const { width, height } = useVideoConfig2();
-  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 ? interpolate2(frame, [0, 15], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: videoEasing.entrance
-  }) : 1;
-  const brandOpacity = showBranding ? interpolate2(frame, [videoDurations.brandReveal, videoDurations.brandReveal + 15], [0, 0.3], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  }) : 0;
-  return /* @__PURE__ */ jsxDEV2("div", {
-    style: {
-      width,
-      height,
-      background,
-      position: "relative",
-      overflow: "hidden",
-      opacity: entranceOpacity
-    },
-    children: [
-      variant === "gradient" && /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV2("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__ */ jsxDEV2("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/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: " "
-            }, 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,
-  interpolate as interpolate4,
-  Sequence,
-  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: " "
-              }, undefined, false, undefined, this)
-            ]
-          }, `${i}-${line.text.slice(0, 20)}`, true, undefined, this);
-        })
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-};
-
-// src/compositions/social-clip.tsx
-import {
-  AbsoluteFill as AbsoluteFill2,
-  interpolate as interpolate6,
-  Sequence as Sequence2,
-  useCurrentFrame as useCurrentFrame7,
-  useVideoConfig as useVideoConfig7
-} from "remotion";
-import { jsxDEV as jsxDEV7 } 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__ */ jsxDEV7(AbsoluteFill2, {
-    children: [
-      /* @__PURE__ */ jsxDEV7(BrandFrame, {
-        variant: "gradient",
-        showBranding: true,
-        children: /* @__PURE__ */ jsxDEV7("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__ */ jsxDEV7(Sequence2, {
-              from: 0,
-              durationInFrames: HOOK_DURATION + 30,
-              children: /* @__PURE__ */ jsxDEV7("div", {
-                style: { width: "100%" },
-                children: /* @__PURE__ */ jsxDEV7(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__ */ jsxDEV7(Sequence2, {
-              from: MESSAGE_START,
-              children: /* @__PURE__ */ jsxDEV7("div", {
-                style: { width: "100%" },
-                children: /* @__PURE__ */ jsxDEV7(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__ */ jsxDEV7(Sequence2, {
-              from: POINTS_START,
-              children: /* @__PURE__ */ jsxDEV7("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__ */ jsxDEV7(PointItem, {
-                  text: point,
-                  index: i,
-                  startFrame: i * 15,
-                  accent
-                }, point, false, undefined, this))
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV7(Sequence2, {
-              from: CTA_START,
-              children: /* @__PURE__ */ jsxDEV7(CTABlock, {
-                cta,
-                url: ctaUrl,
-                accent
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV7(ProgressBar, {
-        color: accent
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-};
-var PointItem = ({ text, startFrame, accent }) => {
-  const frame = useCurrentFrame7();
-  const opacity = interpolate6(frame, [startFrame, startFrame + 12], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const translateX = interpolate6(frame, [startFrame, startFrame + 15], [-30, 0], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: videoEasing.entrance
-  });
-  return /* @__PURE__ */ jsxDEV7("div", {
-    style: {
-      opacity,
-      transform: `translateX(${translateX}px)`,
-      display: "flex",
-      alignItems: "center",
-      gap: 16,
-      fontSize: 28,
-      color: "#ffffff"
-    },
-    children: [
-      /* @__PURE__ */ jsxDEV7("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 = useCurrentFrame7();
-  const opacity = interpolate6(frame, [0, 15], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const scale = interpolate6(frame, [0, 18], [0.9, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: videoEasing.emphasis
-  });
-  return /* @__PURE__ */ jsxDEV7("div", {
-    style: {
-      opacity,
-      transform: `scale(${scale})`,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: 12,
-      marginTop: 24
-    },
-    children: [
-      /* @__PURE__ */ jsxDEV7("div", {
-        style: {
-          backgroundColor: accent,
-          color: "#ffffff",
-          padding: "16px 48px",
-          borderRadius: 12,
-          fontSize: 28,
-          fontWeight: 600
-        },
-        children: cta
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV7("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 jsxDEV8 } 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__ */ jsxDEV8(AbsoluteFill3, {
-    children: [
-      /* @__PURE__ */ jsxDEV8(BrandFrame, {
-        variant: "dark",
-        showBranding: true,
-        children: /* @__PURE__ */ jsxDEV8("div", {
-          style: {
-            flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            gap: 24
-          },
-          children: [
-            /* @__PURE__ */ jsxDEV8("div", {
-              children: [
-                /* @__PURE__ */ jsxDEV8(AnimatedText, {
-                  text: title,
-                  variant: "heading",
-                  enterAt: 5,
-                  color: "#ffffff"
-                }, undefined, false, undefined, this),
-                subtitle && /* @__PURE__ */ jsxDEV8("div", {
-                  style: { marginTop: 8 },
-                  children: /* @__PURE__ */ jsxDEV8(AnimatedText, {
-                    text: subtitle,
-                    variant: "body",
-                    enterAt: 15,
-                    color: theme.colors.mutedForeground
-                  }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV8(Sequence3, {
-              from: TERMINAL_START,
-              children: /* @__PURE__ */ jsxDEV8("div", {
-                style: { flex: 1 },
-                children: /* @__PURE__ */ jsxDEV8(Terminal, {
-                  lines,
-                  startAt: 0,
-                  prompt,
-                  title: terminalTitle
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this),
-            summary && /* @__PURE__ */ jsxDEV8(Sequence3, {
-              from: SUMMARY_START,
-              children: /* @__PURE__ */ jsxDEV8("div", {
-                style: {
-                  marginTop: "auto",
-                  paddingTop: 24
-                },
-                children: /* @__PURE__ */ jsxDEV8(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__ */ jsxDEV8(ProgressBar, {}, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-};
-
-// src/remotion/Root.tsx
-import { Composition } from "remotion";
-import { jsxDEV as jsxDEV9, Fragment } from "react/jsx-dev-runtime";
-var defaultApiOverviewProps = {
-  specName: "CreateUser",
-  method: "POST",
-  endpoint: "/api/users",
-  specCode: `export const createUser = defineCommand({
+var xH=((J)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(J,{get:(H,K)=>(typeof require<"u"?require:H)[K]}):J)(function(J){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+J+'" is not supported')});import{Easing as w}from"remotion";var M={entrance:w.out(w.exp),exit:w.in(w.exp),emphasis:w.out(w.back(1.4)),linear:w.linear,gentle:w.bezier(0.25,0.1,0.25,1),spring:w.out(w.back(1.7))},V={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},dH={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 C}from"@contractspec/lib.design-system";var h={canvasBackground:C.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:C.colors.accent,gradientStart:C.colors.primary,gradientEnd:C.colors.accent},P={...C,video:h};var b={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 F(J,H){let K=H/1920;return{...J,fontSize:Math.round(J.fontSize*K),letterSpacing:J.letterSpacing?Math.round(J.letterSpacing*K*10)/10:void 0}}import{interpolate as S,useCurrentFrame as RH,useVideoConfig as YH}from"remotion";import{jsx as ZH}from"react/jsx-runtime";var B=({text:J,variant:H="body",style:K,enterAt:Q=0,exitAt:z,color:$="#ffffff",align:W="left"})=>{let X=RH(),{width:q}=YH(),L=b[H],Y={...F(L,q),...K},U=S(X,[Q,Q+V.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),N=S(U,[0,1],[0,1],{easing:M.entrance}),G=S(U,[0,1],[30,0],{easing:M.entrance}),Z=1,k=0;if(z!==void 0){let n=S(X,[z,z+V.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Z=S(n,[0,1],[1,0],{easing:M.exit}),k=S(n,[0,1],[0,-20],{easing:M.exit})}let E=N*Z,o=G+k;return ZH("div",{style:{fontSize:Y.fontSize,lineHeight:Y.lineHeight,fontWeight:Y.fontWeight,letterSpacing:Y.letterSpacing,color:$,textAlign:W,opacity:E,transform:`translateY(${o}px)`,willChange:"opacity, transform"},children:J})};import{VIDEO_FORMATS as s}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var HJ=30,u={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function HH(J){let H=J.width/1920,K=J.height/1080;return{horizontal:Math.round(u.horizontal*H),vertical:Math.round(u.vertical*K),contentWidth:Math.round(u.contentWidth*H),contentHeight:Math.round(u.contentHeight*K)}}var JJ={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 KJ(){return[s.landscape,s.square,s.portrait]}import{interpolate as JH,useCurrentFrame as _H,useVideoConfig as IH}from"remotion";import{jsx as r,jsxs as BH}from"react/jsx-runtime";var T=({styleOverrides:J,showBranding:H=!0,animateEntrance:K=!0,variant:Q="gradient",children:z})=>{let $=_H(),{width:W,height:X}=IH(),q=P,L=HH({type:"custom",width:W,height:X}),R=J?.primaryColor??q.colors.primary,Y=J?.accentColor??q.colors.accent,U=J?.darkMode??!0,N;switch(Q){case"solid":N=U?"#0a0a0a":q.colors.background;break;case"gradient":N=U?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${q.colors.background} 0%, ${q.colors.muted} 100%)`;break;case"dark":N="#000000";break}let G=K?JH($,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}):1,Z=H?JH($,[V.brandReveal,V.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return BH("div",{style:{width:W,height:X,background:N,position:"relative",overflow:"hidden",opacity:G},children:[Q==="gradient"&&r("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${R}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),r("div",{style:{position:"absolute",left:L.horizontal,top:L.vertical,width:L.contentWidth,height:L.contentHeight,display:"flex",flexDirection:"column"},children:z}),H&&r("div",{style:{position:"absolute",bottom:L.vertical/2,right:L.horizontal,opacity:Z,color:U?"#ffffff":"#000000",fontSize:Math.round(16*(W/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{interpolate as KH,useCurrentFrame as DH,useVideoConfig as wH}from"remotion";import{jsx as A,jsxs as x}from"react/jsx-runtime";var QH=({code:J,language:H="typescript",startAt:K=0,typeAnimation:Q=!0,backgroundColor:z=h.codeBackground,textColor:$="#abb2bf",filename:W})=>{let X=DH(),{width:q}=wH(),L=F(b.code,q),R=J.length,Y=R*V.codeTypingPerChar,U=Q?Math.floor(KH(X,[K,K+Y],[0,R],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):R,N=J.slice(0,U),G=KH(X,[K,K+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}),Z=Q&&U<R&&X%16<10;return x("div",{style:{backgroundColor:z,borderRadius:16,padding:0,opacity:G,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[x("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[x("div",{style:{display:"flex",gap:8},children:[A("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),A("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),A("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),A("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:L.fontSize*0.7,fontFamily:"monospace"},children:W??H})]}),A("div",{style:{padding:"24px 32px"},children:x("pre",{style:{margin:0,fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:L.fontSize,lineHeight:L.lineHeight,color:$,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:[N,Z&&A("span",{style:{backgroundColor:$,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]})})]})};import{useCurrentFrame as VH,useVideoConfig as PH}from"remotion";import{jsx as $H}from"react/jsx-runtime";var v=({height:J=4,color:H=P.colors.primary,backgroundColor:K="rgba(255,255,255,0.1)",position:Q="bottom"})=>{let z=VH(),{durationInFrames:$,width:W}=PH(),X=z/$;return $H("div",{style:{position:"absolute",[Q]:0,left:0,width:W,height:J,backgroundColor:K,zIndex:100},children:$H("div",{style:{width:`${X*100}%`,height:"100%",backgroundColor:H,transition:"none"}})})};import{AbsoluteFill as OH,interpolate as f,Sequence as a,useCurrentFrame as zH,useVideoConfig as kH}from"remotion";import{jsx as _,jsxs as y}from"react/jsx-runtime";var GH=({specName:J,method:H="POST",endpoint:K="/api/users",specCode:Q,generatedOutputs:z=["REST Endpoint","GraphQL Mutation","Prisma Model","TypeScript SDK","MCP Tool","OpenAPI Spec"],tagline:$="One spec. Every surface."})=>{let{durationInFrames:W}=kH(),X=P,q=60,L=45,R=210,Y=180,U=W-90;return y(OH,{children:[y(T,{variant:"gradient",showBranding:!0,children:[_(a,{from:0,durationInFrames:210,children:y("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:16},children:[y("div",{style:{display:"flex",alignItems:"center",gap:16},children:[_(EH,{method:H,enterAt:10}),_(B,{text:K,variant:"subheading",enterAt:15,color:X.colors.mutedForeground})]}),_(B,{text:J,variant:"title",enterAt:5,color:"#ffffff"}),_("div",{style:{flex:1,marginTop:24},children:_(QH,{code:Q,language:"typescript",filename:`${J.toLowerCase()}.contract.ts`,startAt:45,typeAnimation:!0})})]})}),_(a,{from:180,durationInFrames:W-180,children:y("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:24},children:[_(B,{text:"Generates:",variant:"heading",enterAt:0,color:"#ffffff",align:"center"}),_("div",{style:{display:"flex",flexWrap:"wrap",gap:16,justifyContent:"center",maxWidth:"80%",marginTop:32},children:z.map((N,G)=>_(bH,{label:N,index:G,startFrame:20+G*8},N))}),_(a,{from:U-180,children:_("div",{style:{marginTop:48},children:_(B,{text:$,variant:"heading",enterAt:0,color:X.colors.accent,align:"center"})})})]})})]}),_(v,{})]})},EH=({method:J,enterAt:H})=>{let K=zH(),Q=f(K,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance}),z=f(K,[H,H+12],[0.8,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis}),$={GET:"#61afef",POST:"#98c379",PUT:"#e5c07b",PATCH:"#d19a66",DELETE:"#e06c75"};return _("div",{style:{opacity:Q,transform:`scale(${z})`,backgroundColor:$[J]??"#61afef",color:"#000",padding:"8px 20px",borderRadius:8,fontSize:24,fontWeight:700,fontFamily:"monospace",letterSpacing:1},children:J})},bH=({label:J,startFrame:H})=>{let K=zH(),Q=f(K,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),z=f(K,[H,H+15],[20,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis}),$=f(K,[H,H+15],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis});return _("div",{style:{opacity:Q,transform:`translateY(${z}px) 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:J})};import{interpolate as i,useCurrentFrame as FH,useVideoConfig as SH}from"remotion";import{jsx as O,jsxs as p}from"react/jsx-runtime";var WH={command:"#c9d1d9",output:"#8b949e",error:"#f85149",success:"#3fb950",comment:"#6e7681"},UH=({lines:J,startAt:H=0,prompt:K="$ ",title:Q="Terminal",backgroundColor:z=h.terminalBackground,typingSpeed:$=V.codeTypingPerChar})=>{let W=FH(),{width:X}=SH(),q=F(b.code,X),L=[],R=H;for(let U of J){let N=U.delay??10,G=R+N;if(U.type==="command"){let Z=U.text.length*$;L.push({startFrame:G,endFrame:G+Z}),R=G+Z}else L.push({startFrame:G,endFrame:G+5}),R=G+5}let Y=i(W,[H,H+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance});return p("div",{style:{backgroundColor:z,borderRadius:16,overflow:"hidden",opacity:Y,boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[p("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(255,255,255,0.05)",gap:8},children:[p("div",{style:{display:"flex",gap:8},children:[O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),O("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),O("div",{style:{flex:1,textAlign:"center",color:"#484f58",fontSize:q.fontSize*0.7,fontFamily:"monospace"},children:Q})]}),O("div",{style:{padding:"24px 32px",minHeight:200},children:J.map((U,N)=>{let G=L[N];if(!G||W<G.startFrame)return null;let Z=U.type==="command",k=WH[U.type],E=U.text;if(Z){let qH=i(W,[G.startFrame,G.endFrame],[0,U.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});E=U.text.slice(0,Math.floor(qH))}let o=Z?1:i(W,[G.startFrame,G.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),NH=Z&&W>=G.startFrame&&W<=G.endFrame&&W%16<10;return p("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:q.fontSize,lineHeight:1.8,color:k,opacity:o,whiteSpace:"pre-wrap"},children:[Z&&O("span",{style:{color:"#3fb950"},children:K}),U.type==="comment"&&O("span",{style:{color:WH.comment},children:"# "}),E,NH&&O("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]},`${N}-${U.text.slice(0,20)}`)})})]})};import{AbsoluteFill as TH,interpolate as d,Sequence as c,useCurrentFrame as XH,useVideoConfig as AH}from"remotion";import{jsx as I,jsxs as m}from"react/jsx-runtime";var l=({hook:J,message:H,points:K=[],cta:Q="Learn more",ctaUrl:z="contractspec.dev",accentColor:$})=>{let{durationInFrames:W,width:X,height:q}=AH(),R=$??P.colors.accent,Y=q>X,U=75,N=60,G=120,Z=W-90;return m(TH,{children:[I(T,{variant:"gradient",showBranding:!0,children:m("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:Y?48:32,textAlign:"center",padding:Y?"0 20px":0},children:[I(c,{from:0,durationInFrames:105,children:I("div",{style:{width:"100%"},children:I(B,{text:J,variant:"title",enterAt:5,exitAt:75,color:"#ffffff",align:"center"})})}),I(c,{from:60,children:I("div",{style:{width:"100%"},children:I(B,{text:H,variant:Y?"subheading":"heading",enterAt:0,color:"#ffffff",align:"center"})})}),K.length>0&&I(c,{from:120,children:I("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:Y?"flex-start":"center",width:"100%",maxWidth:Y?"100%":"80%",marginTop:16},children:K.map((k,E)=>I(vH,{text:k,index:E,startFrame:E*15,accent:R},k))})}),I(c,{from:Z,children:I(CH,{cta:Q,url:z,accent:R})})]})}),I(v,{color:R})]})},vH=({text:J,startFrame:H,accent:K})=>{let Q=XH(),z=d(Q,[H,H+12],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=d(Q,[H,H+15],[-30,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.entrance});return m("div",{style:{opacity:z,transform:`translateX(${$}px)`,display:"flex",alignItems:"center",gap:16,fontSize:28,color:"#ffffff"},children:[I("div",{style:{width:8,height:8,borderRadius:"50%",backgroundColor:K,flexShrink:0}}),J]})},CH=({cta:J,url:H,accent:K})=>{let Q=XH(),z=d(Q,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),$=d(Q,[0,18],[0.9,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:M.emphasis});return m("div",{style:{opacity:z,transform:`scale(${$})`,display:"flex",flexDirection:"column",alignItems:"center",gap:12,marginTop:24},children:[I("div",{style:{backgroundColor:K,color:"#ffffff",padding:"16px 48px",borderRadius:12,fontSize:28,fontWeight:600},children:J}),I("div",{style:{color:"rgba(255,255,255,0.5)",fontSize:20},children:H})]})};import{AbsoluteFill as hH,Sequence as LH,useVideoConfig as yH}from"remotion";import{jsx as D,jsxs as t}from"react/jsx-runtime";var MH=({title:J,subtitle:H,lines:K,terminalTitle:Q="Terminal",prompt:z="$ ",summary:$})=>{let{durationInFrames:W}=yH(),X=P,q=40,L=W-90;return t(hH,{children:[D(T,{variant:"dark",showBranding:!0,children:t("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:24},children:[t("div",{children:[D(B,{text:J,variant:"heading",enterAt:5,color:"#ffffff"}),H&&D("div",{style:{marginTop:8},children:D(B,{text:H,variant:"body",enterAt:15,color:X.colors.mutedForeground})})]}),D(LH,{from:40,children:D("div",{style:{flex:1},children:D(UH,{lines:K,startAt:0,prompt:z,title:Q})})}),$&&D(LH,{from:L,children:D("div",{style:{marginTop:"auto",paddingTop:24},children:D(B,{text:$,variant:"subheading",enterAt:0,color:X.colors.accent,align:"center"})})})]})}),D(v,{})]})};import{Composition as j}from"remotion";import{jsx as g,jsxs as uH,Fragment as gH}from"react/jsx-runtime";var fH={specName:"CreateUser",method:"POST",endpoint:"/api/users",specCode:`export const createUser = defineCommand({
   meta: {
     name: 'CreateUser',
     version: '1.0.0',
@@ -1090,100 +16,4 @@ var defaultApiOverviewProps = {
       createdAt: z.date(),
     }),
   },
-});`,
-  generatedOutputs: [
-    "REST Endpoint",
-    "GraphQL Mutation",
-    "Prisma Model",
-    "TypeScript SDK",
-    "MCP Tool",
-    "OpenAPI Spec"
-  ],
-  tagline: "One spec. Every surface."
-};
-var defaultSocialClipProps = {
-  hook: "Stop rewriting the same API logic.",
-  message: "ContractSpec generates REST, GraphQL, DB, SDK, and MCP from a single spec.",
-  points: [
-    "Deterministic output",
-    "Fully ejectable",
-    "Standard tech, no lock-in"
-  ],
-  cta: "Try ContractSpec",
-  ctaUrl: "contractspec.dev"
-};
-var defaultTerminalDemoProps = {
-  title: "Getting Started with ContractSpec",
-  subtitle: "Define once, generate everything.",
-  lines: [
-    { type: "comment", text: "Initialize a new ContractSpec project" },
-    { type: "command", text: "npx contractspec init my-api" },
-    { type: "output", text: "Created my-api/ with 3 sample contracts" },
-    { type: "command", text: "cd my-api && npx contractspec build" },
-    { type: "success", text: "Built 3 contracts -> 18 generated files" },
-    { type: "output", text: "  REST endpoints:  3" },
-    { type: "output", text: "  GraphQL types:   3" },
-    { type: "output", text: "  Prisma models:   3" },
-    { type: "output", text: "  TypeScript SDK:  3" },
-    { type: "output", text: "  MCP tools:       3" },
-    { type: "output", text: "  OpenAPI specs:   3" },
-    { type: "command", text: "npx contractspec validate" },
-    { type: "success", text: "All contracts valid. 0 warnings." }
-  ],
-  terminalTitle: "contractspec",
-  summary: "Ship faster. Stay coherent."
-};
-var RemotionRoot = () => {
-  return /* @__PURE__ */ jsxDEV9(Fragment, {
-    children: [
-      /* @__PURE__ */ jsxDEV9(Composition, {
-        id: "ApiOverview",
-        component: ApiOverview,
-        durationInFrames: 450,
-        fps: 30,
-        width: 1920,
-        height: 1080,
-        defaultProps: defaultApiOverviewProps
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV9(Composition, {
-        id: "SocialClip",
-        component: SocialClip,
-        durationInFrames: 300,
-        fps: 30,
-        width: 1920,
-        height: 1080,
-        defaultProps: defaultSocialClipProps
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV9(Composition, {
-        id: "SocialClipSquare",
-        component: SocialClip,
-        durationInFrames: 300,
-        fps: 30,
-        width: 1080,
-        height: 1080,
-        defaultProps: defaultSocialClipProps
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV9(Composition, {
-        id: "SocialClipPortrait",
-        component: SocialClip,
-        durationInFrames: 300,
-        fps: 30,
-        width: 1080,
-        height: 1920,
-        defaultProps: defaultSocialClipProps
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV9(Composition, {
-        id: "TerminalDemo",
-        component: TerminalDemo,
-        durationInFrames: 600,
-        fps: 30,
-        width: 1920,
-        height: 1080,
-        defaultProps: defaultTerminalDemoProps
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-};
-export {
-  RemotionRoot
-};
+});`,generatedOutputs:["REST Endpoint","GraphQL Mutation","Prisma Model","TypeScript SDK","MCP Tool","OpenAPI Spec"],tagline:"One spec. Every surface."},e={hook:"Stop rewriting the same API logic.",message:"ContractSpec generates REST, GraphQL, DB, SDK, and MCP from a single spec.",points:["Deterministic output","Fully ejectable","Standard tech, no lock-in"],cta:"Try ContractSpec",ctaUrl:"contractspec.dev"},jH={title:"Getting Started with ContractSpec",subtitle:"Define once, generate everything.",lines:[{type:"comment",text:"Initialize a new ContractSpec project"},{type:"command",text:"npx contractspec init my-api"},{type:"output",text:"Created my-api/ with 3 sample contracts"},{type:"command",text:"cd my-api && npx contractspec build"},{type:"success",text:"Built 3 contracts -> 18 generated files"},{type:"output",text:"  REST endpoints:  3"},{type:"output",text:"  GraphQL types:   3"},{type:"output",text:"  Prisma models:   3"},{type:"output",text:"  TypeScript SDK:  3"},{type:"output",text:"  MCP tools:       3"},{type:"output",text:"  OpenAPI specs:   3"},{type:"command",text:"npx contractspec validate"},{type:"success",text:"All contracts valid. 0 warnings."}],terminalTitle:"contractspec",summary:"Ship faster. Stay coherent."},JK=()=>{return uH(gH,{children:[g(j,{id:"ApiOverview",component:GH,durationInFrames:450,fps:30,width:1920,height:1080,defaultProps:fH}),g(j,{id:"SocialClip",component:l,durationInFrames:300,fps:30,width:1920,height:1080,defaultProps:e}),g(j,{id:"SocialClipSquare",component:l,durationInFrames:300,fps:30,width:1080,height:1080,defaultProps:e}),g(j,{id:"SocialClipPortrait",component:l,durationInFrames:300,fps:30,width:1080,height:1920,defaultProps:e}),g(j,{id:"TerminalDemo",component:MH,durationInFrames:600,fps:30,width:1920,height:1080,defaultProps:jH})]})};export{JK as RemotionRoot};