@contractspec/lib.video-gen 2.7.16 → 2.7.18

package/dist/node/compositions/primitives/index.js

@@ -1,651 +1 @@
-import { createRequire } from "node:module";
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// src/design/motion.ts
-import { Easing } from "remotion";
-var videoEasing = {
-  entrance: Easing.out(Easing.exp),
-  exit: Easing.in(Easing.exp),
-  emphasis: Easing.out(Easing.back(1.4)),
-  linear: Easing.linear,
-  gentle: Easing.bezier(0.25, 0.1, 0.25, 1),
-  spring: Easing.out(Easing.back(1.7))
-};
-var videoDurations = {
-  sceneTransition: 20,
-  textEntrance: 15,
-  textExit: 12,
-  codeTypingPerChar: 2,
-  sectionPause: 30,
-  emphasisPause: 15,
-  brandReveal: 25,
-  minScene: 60,
-  shortScene: 60,
-  mediumScene: 120,
-  longScene: 240
-};
-var videoTransitions = {
-  fade: { type: "fade", durationInFrames: 20 },
-  slideLeft: { type: "slide-left", durationInFrames: 20 },
-  slideRight: { type: "slide-right", durationInFrames: 20 },
-  wipe: { type: "wipe", durationInFrames: 15 },
-  none: { type: "none", durationInFrames: 0 }
-};
-
-// src/design/tokens.ts
-import { defaultTokens } from "@contractspec/lib.design-system";
-var defaultVideoColors = {
-  canvasBackground: defaultTokens.colors.background,
-  codeBackground: "#1e1e2e",
-  terminalBackground: "#0d1117",
-  terminalForeground: "#c9d1d9",
-  highlight: defaultTokens.colors.accent,
-  gradientStart: defaultTokens.colors.primary,
-  gradientEnd: defaultTokens.colors.accent
-};
-var defaultVideoTheme = {
-  ...defaultTokens,
-  video: defaultVideoColors
-};
-
-// src/design/typography.ts
-var videoTypography = {
-  title: {
-    fontSize: 72,
-    lineHeight: 1.1,
-    fontWeight: 700,
-    letterSpacing: -1
-  },
-  heading: {
-    fontSize: 56,
-    lineHeight: 1.2,
-    fontWeight: 600,
-    letterSpacing: -0.5
-  },
-  subheading: {
-    fontSize: 40,
-    lineHeight: 1.25,
-    fontWeight: 500
-  },
-  body: {
-    fontSize: 32,
-    lineHeight: 1.5,
-    fontWeight: 400
-  },
-  code: {
-    fontSize: 28,
-    lineHeight: 1.6,
-    fontWeight: 400
-  },
-  caption: {
-    fontSize: 24,
-    lineHeight: 1.4,
-    fontWeight: 400
-  },
-  label: {
-    fontSize: 20,
-    lineHeight: 1.3,
-    fontWeight: 600,
-    letterSpacing: 1
-  }
-};
-function scaleTypography(style, targetWidth) {
-  const scale = targetWidth / 1920;
-  return {
-    ...style,
-    fontSize: Math.round(style.fontSize * scale),
-    letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
-  };
-}
-
-// src/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/primitives/terminal.tsx
-import { interpolate as interpolate4, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig5 } from "remotion";
-import { jsxDEV as jsxDEV5 } 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 = useCurrentFrame5();
-  const { width } = useVideoConfig5();
-  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 = interpolate4(frame, [startAt, startAt + 10], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: videoEasing.entrance
-  });
-  return /* @__PURE__ */ jsxDEV5("div", {
-    style: {
-      backgroundColor,
-      borderRadius: 16,
-      overflow: "hidden",
-      opacity,
-      boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
-    },
-    children: [
-      /* @__PURE__ */ jsxDEV5("div", {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          padding: "12px 20px",
-          backgroundColor: "rgba(255,255,255,0.05)",
-          gap: 8
-        },
-        children: [
-          /* @__PURE__ */ jsxDEV5("div", {
-            style: { display: "flex", gap: 8 },
-            children: [
-              /* @__PURE__ */ jsxDEV5("div", {
-                style: {
-                  width: 12,
-                  height: 12,
-                  borderRadius: "50%",
-                  backgroundColor: "#ff5f57"
-                }
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("div", {
-                style: {
-                  width: 12,
-                  height: 12,
-                  borderRadius: "50%",
-                  backgroundColor: "#febc2e"
-                }
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV5("div", {
-                style: {
-                  width: 12,
-                  height: 12,
-                  borderRadius: "50%",
-                  backgroundColor: "#28c840"
-                }
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV5("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__ */ jsxDEV5("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 = interpolate4(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 : interpolate4(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__ */ jsxDEV5("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__ */ jsxDEV5("span", {
-                style: { color: "#3fb950" },
-                children: prompt
-              }, undefined, false, undefined, this),
-              line.type === "comment" && /* @__PURE__ */ jsxDEV5("span", {
-                style: { color: LINE_TYPE_COLORS.comment },
-                children: "# "
-              }, undefined, false, undefined, this),
-              visibleText,
-              showCursor && /* @__PURE__ */ jsxDEV5("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/primitives/transition.tsx
-import { interpolate as interpolate5, useCurrentFrame as useCurrentFrame6 } from "remotion";
-import { jsxDEV as jsxDEV6, Fragment } from "react/jsx-dev-runtime";
-var SceneTransitionWrapper = ({
-  type,
-  durationInFrames,
-  direction,
-  startAt = 0,
-  children
-}) => {
-  const frame = useCurrentFrame6();
-  if (type === "none" || durationInFrames === 0) {
-    return /* @__PURE__ */ jsxDEV6(Fragment, {
-      children
-    }, undefined, false, undefined, this);
-  }
-  const progress = interpolate5(frame, [startAt, startAt + durationInFrames], direction === "in" ? [0, 1] : [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const styles = getTransitionStyles(type, progress);
-  return /* @__PURE__ */ jsxDEV6("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%" };
-  }
-}
-export {
-  Terminal,
-  SceneTransitionWrapper,
-  ProgressBar,
-  CodeBlock,
-  BrandFrame,
-  AnimatedText
-};
+import{createRequire as l}from"node:module";var MG=l(import.meta.url);import{Easing as R}from"remotion";var X={entrance:R.out(R.exp),exit:R.in(R.exp),emphasis:R.out(R.back(1.4)),linear:R.linear,gentle:R.bezier(0.25,0.1,0.25,1),spring:R.out(R.back(1.7))},Y={sceneTransition:20,textEntrance:15,textExit:12,codeTypingPerChar:2,sectionPause:30,emphasisPause:15,brandReveal:25,minScene:60,shortScene:60,mediumScene:120,longScene:240},_G={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 F}from"@contractspec/lib.design-system";var b={canvasBackground:F.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:F.colors.accent,gradientStart:F.colors.primary,gradientEnd:F.colors.accent},O={...F,video:b};var Z={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 D(H,J){let G=J/1920;return{...H,fontSize:Math.round(H.fontSize*G),letterSpacing:H.letterSpacing?Math.round(H.letterSpacing*G*10)/10:void 0}}import{interpolate as V,useCurrentFrame as o,useVideoConfig as r}from"remotion";import{jsx as n}from"react/jsx-runtime";var s=({text:H,variant:J="body",style:G,enterAt:q=0,exitAt:P,color:B="#ffffff",align:U="left"})=>{let z=o(),{width:L}=r(),$=Z[J],_={...D($,L),...G},K=V(z,[q,q+Y.textEntrance],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),N=V(K,[0,1],[0,1],{easing:X.entrance}),Q=V(K,[0,1],[30,0],{easing:X.entrance}),W=1,k=0;if(P!==void 0){let C=V(z,[P,P+Y.textExit],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});W=V(C,[0,1],[1,0],{easing:X.exit}),k=V(C,[0,1],[0,-20],{easing:X.exit})}let T=N*W,j=Q+k;return n("div",{style:{fontSize:_.fontSize,lineHeight:_.lineHeight,fontWeight:_.fontWeight,letterSpacing:_.letterSpacing,color:B,textAlign:U,opacity:T,transform:`translateY(${j}px)`,willChange:"opacity, transform"},children:H})};import{VIDEO_FORMATS as x}from"@contractspec/lib.contracts-integrations/integrations/providers/video";var SG=30,S={horizontal:120,vertical:80,contentWidth:1680,contentHeight:920};function p(H){let J=H.width/1920,G=H.height/1080;return{horizontal:Math.round(S.horizontal*J),vertical:Math.round(S.vertical*G),contentWidth:Math.round(S.contentWidth*J),contentHeight:Math.round(S.contentHeight*G)}}var EG={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 AG(){return[x.landscape,x.square,x.portrait]}import{interpolate as h,useCurrentFrame as a,useVideoConfig as i}from"remotion";import{jsx as v,jsxs as e}from"react/jsx-runtime";var t=({styleOverrides:H,showBranding:J=!0,animateEntrance:G=!0,variant:q="gradient",children:P})=>{let B=a(),{width:U,height:z}=i(),L=O,$=p({type:"custom",width:U,height:z}),M=H?.primaryColor??L.colors.primary,_=H?.accentColor??L.colors.accent,K=H?.darkMode??!0,N;switch(q){case"solid":N=K?"#0a0a0a":L.colors.background;break;case"gradient":N=K?"linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)":`linear-gradient(135deg, ${L.colors.background} 0%, ${L.colors.muted} 100%)`;break;case"dark":N="#000000";break}let Q=G?h(B,[0,15],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:X.entrance}):1,W=J?h(B,[Y.brandReveal,Y.brandReveal+15],[0,0.3],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}):0;return e("div",{style:{width:U,height:z,background:N,position:"relative",overflow:"hidden",opacity:Q},children:[q==="gradient"&&v("div",{style:{position:"absolute",top:"-20%",right:"-10%",width:"50%",height:"50%",background:`radial-gradient(circle, ${M}15 0%, transparent 70%)`,borderRadius:"50%",pointerEvents:"none"}}),v("div",{style:{position:"absolute",left:$.horizontal,top:$.vertical,width:$.contentWidth,height:$.contentHeight,display:"flex",flexDirection:"column"},children:P}),J&&v("div",{style:{position:"absolute",bottom:$.vertical/2,right:$.horizontal,opacity:W,color:K?"#ffffff":"#000000",fontSize:Math.round(16*(U/1920)),fontWeight:500,letterSpacing:1},children:"ContractSpec"})]})};import{interpolate as y,useCurrentFrame as GG,useVideoConfig as HG}from"remotion";import{jsx as w,jsxs as E}from"react/jsx-runtime";var JG=({code:H,language:J="typescript",startAt:G=0,typeAnimation:q=!0,backgroundColor:P=b.codeBackground,textColor:B="#abb2bf",filename:U})=>{let z=GG(),{width:L}=HG(),$=D(Z.code,L),M=H.length,_=M*Y.codeTypingPerChar,K=q?Math.floor(y(z,[G,G+_],[0,M],{extrapolateLeft:"clamp",extrapolateRight:"clamp"})):M,N=H.slice(0,K),Q=y(z,[G,G+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:X.entrance}),W=q&&K<M&&z%16<10;return E("div",{style:{backgroundColor:P,borderRadius:16,padding:0,opacity:Q,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[E("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(0,0,0,0.2)",gap:8},children:[E("div",{style:{display:"flex",gap:8},children:[w("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),w("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),w("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),w("div",{style:{flex:1,textAlign:"center",color:"#666",fontSize:$.fontSize*0.7,fontFamily:"monospace"},children:U??J})]}),w("div",{style:{padding:"24px 32px"},children:E("pre",{style:{margin:0,fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:$.fontSize,lineHeight:$.lineHeight,color:B,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:[N,W&&w("span",{style:{backgroundColor:B,width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]})})]})};import{useCurrentFrame as KG,useVideoConfig as QG}from"remotion";import{jsx as u}from"react/jsx-runtime";var UG=({height:H=4,color:J=O.colors.primary,backgroundColor:G="rgba(255,255,255,0.1)",position:q="bottom"})=>{let P=KG(),{durationInFrames:B,width:U}=QG(),z=P/B;return u("div",{style:{position:"absolute",[q]:0,left:0,width:U,height:H,backgroundColor:G,zIndex:100},children:u("div",{style:{width:`${z*100}%`,height:"100%",backgroundColor:J,transition:"none"}})})};import{interpolate as f,useCurrentFrame as $G,useVideoConfig as qG}from"remotion";import{jsx as I,jsxs as A}from"react/jsx-runtime";var m={command:"#c9d1d9",output:"#8b949e",error:"#f85149",success:"#3fb950",comment:"#6e7681"},zG=({lines:H,startAt:J=0,prompt:G="$ ",title:q="Terminal",backgroundColor:P=b.terminalBackground,typingSpeed:B=Y.codeTypingPerChar})=>{let U=$G(),{width:z}=qG(),L=D(Z.code,z),$=[],M=J;for(let K of H){let N=K.delay??10,Q=M+N;if(K.type==="command"){let W=K.text.length*B;$.push({startFrame:Q,endFrame:Q+W}),M=Q+W}else $.push({startFrame:Q,endFrame:Q+5}),M=Q+5}let _=f(U,[J,J+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:X.entrance});return A("div",{style:{backgroundColor:P,borderRadius:16,overflow:"hidden",opacity:_,boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[A("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(255,255,255,0.05)",gap:8},children:[A("div",{style:{display:"flex",gap:8},children:[I("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),I("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),I("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),I("div",{style:{flex:1,textAlign:"center",color:"#484f58",fontSize:L.fontSize*0.7,fontFamily:"monospace"},children:q})]}),I("div",{style:{padding:"24px 32px",minHeight:200},children:H.map((K,N)=>{let Q=$[N];if(!Q||U<Q.startFrame)return null;let W=K.type==="command",k=m[K.type],T=K.text;if(W){let d=f(U,[Q.startFrame,Q.endFrame],[0,K.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});T=K.text.slice(0,Math.floor(d))}let j=W?1:f(U,[Q.startFrame,Q.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),g=W&&U>=Q.startFrame&&U<=Q.endFrame&&U%16<10;return A("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:L.fontSize,lineHeight:1.8,color:k,opacity:j,whiteSpace:"pre-wrap"},children:[W&&I("span",{style:{color:"#3fb950"},children:G}),K.type==="comment"&&I("span",{style:{color:m.comment},children:"# "}),T,g&&I("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]},`${N}-${K.text.slice(0,20)}`)})})]})};import{interpolate as PG,useCurrentFrame as WG}from"remotion";import{jsx as c,Fragment as XG}from"react/jsx-runtime";var BG=({type:H,durationInFrames:J,direction:G,startAt:q=0,children:P})=>{let B=WG();if(H==="none"||J===0)return c(XG,{children:P});let U=PG(B,[q,q+J],G==="in"?[0,1]:[1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),z=NG(H,U);return c("div",{style:z,children:P})};function NG(H,J){let G=X.entrance(J);switch(H){case"fade":return{opacity:G,width:"100%",height:"100%"};case"slide-left":return{opacity:G,transform:`translateX(${(1-G)*100}%)`,width:"100%",height:"100%"};case"slide-right":return{opacity:G,transform:`translateX(${(1-G)*-100}%)`,width:"100%",height:"100%"};case"wipe":return{clipPath:`inset(0 ${(1-G)*100}% 0 0)`,width:"100%",height:"100%"};default:return{width:"100%",height:"100%"}}}export{zG as Terminal,BG as SceneTransitionWrapper,UG as ProgressBar,JG as CodeBlock,t as BrandFrame,s as AnimatedText};