{"version":3,"file":"CodeEditor.CMh-wlNP.mjs","names":["useState","useRef","useMemo"],"sources":["https:/framerusercontent.com/modules/S10zlHAEV6dKcbv8oi0c/BNNnvOuKdlEueWJxhIW6/CodeEditor.js"],"sourcesContent":["// Animated code editor to visualize code in a simple window with 3:4 aspect ratio\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,startTransition,useMemo}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView}from\"framer-motion\";import{useRef}from\"react\";/**\n * Animated Code Editor\n *\n * @framerIntrinsicWidth 600\n * @framerIntrinsicHeight 800\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function CodeEditor(props){const{code=`function greet(name) {\n  console.log(\\`Hello, \\${name}!\\`);\n  return true;\n}\n\ngreet(\"World\");`,language=\"javascript\",theme=\"dark\",animationSpeed=50,showLineNumbers=true,windowTitle=\"code.js\",backgroundColor,textColor,accentColor,font}=props;const[displayedCode,setDisplayedCode]=useState(\"\");const[currentIndex,setCurrentIndex]=useState(0);const isStatic=useIsStaticRenderer();const containerRef=useRef(null);const isInView=useInView(containerRef,{once:false});const themeColors=useMemo(()=>{if(theme===\"dark\"){return{window:backgroundColor||\"#1e1e1e\",titleBar:\"#2d2d2d\",text:textColor||\"#d4d4d4\",lineNumber:\"#858585\",keyword:accentColor||\"#569cd6\",string:\"#ce9178\",comment:\"#6a9955\",function:\"#dcdcaa\"};}return{window:backgroundColor||\"#ffffff\",titleBar:\"#f3f3f3\",text:textColor||\"#000000\",lineNumber:\"#999999\",keyword:accentColor||\"#0000ff\",string:\"#a31515\",comment:\"#008000\",function:\"#795e26\"};},[theme,backgroundColor,textColor,accentColor]);useEffect(()=>{if(isStatic||!isInView){setDisplayedCode(code);return;}setCurrentIndex(0);setDisplayedCode(\"\");const interval=setInterval(()=>{setCurrentIndex(prev=>{if(prev>=code.length){clearInterval(interval);return prev;}const next=prev+1;startTransition(()=>{setDisplayedCode(code.slice(0,next));});return next;});},animationSpeed);return()=>clearInterval(interval);},[code,animationSpeed,isStatic,isInView]);const highlightCode=text=>{const keywords=/\\b(function|const|let|var|return|if|else|for|while|class|import|export|from|async|await|try|catch)\\b/g;const strings=/([\"'`])(?:(?=(\\\\?))\\2.)*?\\1/g;const comments=/(\\/\\/.*$|\\/\\*[\\s\\S]*?\\*\\/)/gm;const functions=/\\b([a-zA-Z_$][a-zA-Z0-9_$]*)\\s*\\(/g;let highlighted=text;highlighted=highlighted.replace(comments,match=>`<span style=\"color: ${themeColors.comment}\">${match}</span>`);highlighted=highlighted.replace(strings,match=>`<span style=\"color: ${themeColors.string}\">${match}</span>`);highlighted=highlighted.replace(keywords,match=>`<span style=\"color: ${themeColors.keyword}\">${match}</span>`);highlighted=highlighted.replace(functions,(match,funcName)=>`<span style=\"color: ${themeColors.function}\">${funcName}</span>(`);return highlighted;};const lines=displayedCode.split(\"\\n\");return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:\"column\",backgroundColor:themeColors.window,borderRadius:8,overflow:\"hidden\",boxShadow:\"0 4px 20px rgba(0, 0, 0, 0.15)\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",padding:\"8px 12px\",backgroundColor:themeColors.titleBar,borderBottom:`1px solid ${theme===\"dark\"?\"#3e3e3e\":\"#e0e0e0\"}`},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",gap:6,marginRight:12},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:10,height:10,borderRadius:\"50%\",backgroundColor:\"#ff5f56\"}}),/*#__PURE__*/_jsx(\"div\",{style:{width:10,height:10,borderRadius:\"50%\",backgroundColor:\"#ffbd2e\"}}),/*#__PURE__*/_jsx(\"div\",{style:{width:10,height:10,borderRadius:\"50%\",backgroundColor:\"#27c93f\"}})]}),/*#__PURE__*/_jsx(\"span\",{style:{...font,fontSize:11,color:themeColors.text,opacity:.8},children:windowTitle})]}),/*#__PURE__*/_jsx(\"div\",{style:{flex:1,padding:12,overflow:\"auto\",...font,fontSize:11,lineHeight:\"1.6\",fontFamily:\"monospace\"},children:lines.map((line,index)=>/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",minHeight:\"1.6em\"},children:[showLineNumbers&&/*#__PURE__*/_jsx(\"span\",{style:{color:themeColors.lineNumber,marginRight:12,userSelect:\"none\",minWidth:24,textAlign:\"right\"},children:index+1}),/*#__PURE__*/_jsx(\"span\",{style:{color:themeColors.text,whiteSpace:\"pre\"},dangerouslySetInnerHTML:{__html:highlightCode(line)}}),index===lines.length-1&&currentIndex<code.length&&/*#__PURE__*/_jsx(motion.span,{animate:{opacity:[1,0]},transition:{duration:.5,repeat:Infinity},style:{display:\"inline-block\",width:2,height:\"1.2em\",backgroundColor:themeColors.text,marginLeft:2}})]},index))})]});}addPropertyControls(CodeEditor,{code:{type:ControlType.String,title:\"Code\",displayTextArea:true,defaultValue:`function greet(name) {\n  console.log(\\`Hello, \\${name}!\\`);\n  return true;\n}\n\ngreet(\"World\");`},language:{type:ControlType.String,title:\"Language\",defaultValue:\"javascript\"},theme:{type:ControlType.Enum,title:\"Theme\",options:[\"dark\",\"light\"],optionTitles:[\"Dark\",\"Light\"],defaultValue:\"dark\",displaySegmentedControl:true},animationSpeed:{type:ControlType.Number,title:\"Speed\",defaultValue:50,min:10,max:200,step:10,unit:\"ms\"},showLineNumbers:{type:ControlType.Boolean,title:\"Line Numbers\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},windowTitle:{type:ControlType.String,title:\"Window Title\",defaultValue:\"code.js\"},backgroundColor:{type:ControlType.Color,title:\"Background\",optional:true},textColor:{type:ControlType.Color,title:\"Text Color\",optional:true},accentColor:{type:ControlType.Color,title:\"Accent Color\",optional:true},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"monospace\",defaultValue:{fontSize:\"11px\",letterSpacing:\"0em\",lineHeight:\"1.6em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CodeEditor\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"600\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicHeight\":\"800\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CodeEditor.map"],"mappings":"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"}