@contractspec/lib.video-gen 2.7.17 → 2.7.18

package/dist/browser/compositions/primitives/progress-bar.js

@@ -1,59 +1 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// src/design/tokens.ts
-import { defaultTokens } from "@contractspec/lib.design-system";
-var defaultVideoColors = {
-  canvasBackground: defaultTokens.colors.background,
-  codeBackground: "#1e1e2e",
-  terminalBackground: "#0d1117",
-  terminalForeground: "#c9d1d9",
-  highlight: defaultTokens.colors.accent,
-  gradientStart: defaultTokens.colors.primary,
-  gradientEnd: defaultTokens.colors.accent
-};
-var defaultVideoTheme = {
-  ...defaultTokens,
-  video: defaultVideoColors
-};
-
-// src/compositions/primitives/progress-bar.tsx
-import { useCurrentFrame, useVideoConfig } from "remotion";
-import { jsxDEV } from "react/jsx-dev-runtime";
-var ProgressBar = ({
-  height = 4,
-  color = defaultVideoTheme.colors.primary,
-  backgroundColor = "rgba(255,255,255,0.1)",
-  position = "bottom"
-}) => {
-  const frame = useCurrentFrame();
-  const { durationInFrames, width } = useVideoConfig();
-  const progress = frame / durationInFrames;
-  return /* @__PURE__ */ jsxDEV("div", {
-    style: {
-      position: "absolute",
-      [position]: 0,
-      left: 0,
-      width,
-      height,
-      backgroundColor,
-      zIndex: 100
-    },
-    children: /* @__PURE__ */ jsxDEV("div", {
-      style: {
-        width: `${progress * 100}%`,
-        height: "100%",
-        backgroundColor: color,
-        transition: "none"
-      }
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-};
-export {
-  ProgressBar
-};
+var R=((q)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(q,{get:(A,D)=>(typeof require<"u"?require:A)[D]}):q)(function(q){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+q+'" is not supported')});import{defaultTokens as z}from"@contractspec/lib.design-system";var N={canvasBackground:z.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:z.colors.accent,gradientStart:z.colors.primary,gradientEnd:z.colors.accent},E={...z,video:N};import{useCurrentFrame as O,useVideoConfig as Q}from"remotion";import{jsx as G}from"react/jsx-runtime";var Z=({height:q=4,color:A=E.colors.primary,backgroundColor:D="rgba(255,255,255,0.1)",position:H="bottom"})=>{let J=O(),{durationInFrames:K,width:L}=Q(),M=J/K;return G("div",{style:{position:"absolute",[H]:0,left:0,width:L,height:q,backgroundColor:D,zIndex:100},children:G("div",{style:{width:`${M*100}%`,height:"100%",backgroundColor:A,transition:"none"}})})};export{Z as ProgressBar};

package/dist/browser/compositions/primitives/terminal.js

@@ -1,265 +1 @@
-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/terminal.tsx
-import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
-import { jsxDEV } 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 = useCurrentFrame();
-  const { width } = useVideoConfig();
-  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 = interpolate(frame, [startAt, startAt + 10], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: videoEasing.entrance
-  });
-  return /* @__PURE__ */ jsxDEV("div", {
-    style: {
-      backgroundColor,
-      borderRadius: 16,
-      overflow: "hidden",
-      opacity,
-      boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
-    },
-    children: [
-      /* @__PURE__ */ jsxDEV("div", {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          padding: "12px 20px",
-          backgroundColor: "rgba(255,255,255,0.05)",
-          gap: 8
-        },
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            style: { display: "flex", gap: 8 },
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                style: {
-                  width: 12,
-                  height: 12,
-                  borderRadius: "50%",
-                  backgroundColor: "#ff5f57"
-                }
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                style: {
-                  width: 12,
-                  height: 12,
-                  borderRadius: "50%",
-                  backgroundColor: "#febc2e"
-                }
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                style: {
-                  width: 12,
-                  height: 12,
-                  borderRadius: "50%",
-                  backgroundColor: "#28c840"
-                }
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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 = interpolate(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 : interpolate(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__ */ jsxDEV("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__ */ jsxDEV("span", {
-                style: { color: "#3fb950" },
-                children: prompt
-              }, undefined, false, undefined, this),
-              line.type === "comment" && /* @__PURE__ */ jsxDEV("span", {
-                style: { color: LINE_TYPE_COLORS.comment },
-                children: "# "
-              }, undefined, false, undefined, this),
-              visibleText,
-              showCursor && /* @__PURE__ */ jsxDEV("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);
-};
-export {
-  Terminal
-};
+var C=((z)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(z,{get:(J,Q)=>(typeof require<"u"?require:J)[Q]}):z)(function(z){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+z+'" is not supported')});import{Easing as G}from"remotion";var D={entrance:G.out(G.exp),exit:G.in(G.exp),emphasis:G.out(G.back(1.4)),linear:G.linear,gentle:G.bezier(0.25,0.1,0.25,1),spring:G.out(G.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},u={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 U}from"@contractspec/lib.design-system";var N={canvasBackground:U.colors.background,codeBackground:"#1e1e2e",terminalBackground:"#0d1117",terminalForeground:"#c9d1d9",highlight:U.colors.accent,gradientStart:U.colors.primary,gradientEnd:U.colors.accent},c={...U,video:N};var w={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 L(z,J){let Q=J/1920;return{...z,fontSize:Math.round(z.fontSize*Q),letterSpacing:z.letterSpacing?Math.round(z.letterSpacing*Q*10)/10:void 0}}import{interpolate as R,useCurrentFrame as S,useVideoConfig as E}from"remotion";import{jsx as H,jsxs as Z}from"react/jsx-runtime";var P={command:"#c9d1d9",output:"#8b949e",error:"#f85149",success:"#3fb950",comment:"#6e7681"},a=({lines:z,startAt:J=0,prompt:Q="$ ",title:_="Terminal",backgroundColor:O=N.terminalBackground,typingSpeed:A=V.codeTypingPerChar})=>{let K=S(),{width:F}=E(),W=L(w.code,F),$=[],I=J;for(let B of z){let X=B.delay??10,q=I+X;if(B.type==="command"){let M=B.text.length*A;$.push({startFrame:q,endFrame:q+M}),I=q+M}else $.push({startFrame:q,endFrame:q+5}),I=q+5}let b=R(K,[J,J+10],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:D.entrance});return Z("div",{style:{backgroundColor:O,borderRadius:16,overflow:"hidden",opacity:b,boxShadow:"0 8px 32px rgba(0,0,0,0.3)"},children:[Z("div",{style:{display:"flex",alignItems:"center",padding:"12px 20px",backgroundColor:"rgba(255,255,255,0.05)",gap:8},children:[Z("div",{style:{display:"flex",gap:8},children:[H("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#ff5f57"}}),H("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#febc2e"}}),H("div",{style:{width:12,height:12,borderRadius:"50%",backgroundColor:"#28c840"}})]}),H("div",{style:{flex:1,textAlign:"center",color:"#484f58",fontSize:W.fontSize*0.7,fontFamily:"monospace"},children:_})]}),H("div",{style:{padding:"24px 32px",minHeight:200},children:z.map((B,X)=>{let q=$[X];if(!q||K<q.startFrame)return null;let M=B.type==="command",v=P[B.type],Y=B.text;if(M){let j=R(K,[q.startFrame,q.endFrame],[0,B.text.length],{extrapolateLeft:"clamp",extrapolateRight:"clamp"});Y=B.text.slice(0,Math.floor(j))}let k=M?1:R(K,[q.startFrame,q.startFrame+5],[0,1],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),h=M&&K>=q.startFrame&&K<=q.endFrame&&K%16<10;return Z("div",{style:{fontFamily:"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",fontSize:W.fontSize,lineHeight:1.8,color:v,opacity:k,whiteSpace:"pre-wrap"},children:[M&&H("span",{style:{color:"#3fb950"},children:Q}),B.type==="comment"&&H("span",{style:{color:P.comment},children:"# "}),Y,h&&H("span",{style:{backgroundColor:"#c9d1d9",width:"2px",display:"inline-block",height:"1.2em",verticalAlign:"text-bottom"},children:" "})]},`${X}-${B.text.slice(0,20)}`)})})]})};export{a as Terminal};

package/dist/browser/compositions/primitives/transition.js

@@ -1,98 +1 @@
-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/compositions/primitives/transition.tsx
-import { interpolate, useCurrentFrame } from "remotion";
-import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
-var SceneTransitionWrapper = ({
-  type,
-  durationInFrames,
-  direction,
-  startAt = 0,
-  children
-}) => {
-  const frame = useCurrentFrame();
-  if (type === "none" || durationInFrames === 0) {
-    return /* @__PURE__ */ jsxDEV(Fragment, {
-      children
-    }, undefined, false, undefined, this);
-  }
-  const progress = interpolate(frame, [startAt, startAt + durationInFrames], direction === "in" ? [0, 1] : [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const styles = getTransitionStyles(type, progress);
-  return /* @__PURE__ */ jsxDEV("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 {
-  SceneTransitionWrapper
-};
+var V=((B)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(B,{get:(D,k)=>(typeof require<"u"?require:D)[k]}):B)(function(B){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+B+'" is not supported')});import{Easing as z}from"remotion";var J={entrance:z.out(z.exp),exit:z.in(z.exp),emphasis:z.out(z.back(1.4)),linear:z.linear,gentle:z.bezier(0.25,0.1,0.25,1),spring:z.out(z.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},Z={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{interpolate as O,useCurrentFrame as Q}from"remotion";import{jsx as K,Fragment as U}from"react/jsx-runtime";var q=({type:B,durationInFrames:D,direction:k,startAt:G=0,children:H})=>{let L=Q();if(B==="none"||D===0)return K(U,{children:H});let M=O(L,[G,G+D],k==="in"?[0,1]:[1,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp"}),N=R(B,M);return K("div",{style:N,children:H})};function R(B,D){let k=J.entrance(D);switch(B){case"fade":return{opacity:k,width:"100%",height:"100%"};case"slide-left":return{opacity:k,transform:`translateX(${(1-k)*100}%)`,width:"100%",height:"100%"};case"slide-right":return{opacity:k,transform:`translateX(${(1-k)*-100}%)`,width:"100%",height:"100%"};case"wipe":return{clipPath:`inset(0 ${(1-k)*100}% 0 0)`,width:"100%",height:"100%"};default:return{width:"100%",height:"100%"}}}export{q as SceneTransitionWrapper};