{"version":3,"file":"CodeShowcase.DgiSwUlR.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/Kv4tK26ev0eSVXbnVbYj/Iq2chyqDFYI5GE8tO5cF/CodeShowcase.js"],"sourcesContent":["// Code showcase component with macOS-style window chrome and syntax highlighting\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useEffect,startTransition}from\"react\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function CodeShowcase(props){const{code=`{\n  \"bomFormat\": \"CycloneDX\",\n  \"specVersion\": \"1.5\",\n  \"serialNumber\": \"urn:uuid:...\",\n  \"version\": 1,\n  \"metadata\": {\n    \"timestamp\": \"2026-01-15T10:00:00Z\",\n    \"tools\": [{\n      \"vendor\": \"Interlynk\",\n      \"name\": \"SBOM Generator\"\n    }]\n  },\n  \"components\": [\n    {\n      \"type\": \"library\",\n      \"name\": \"example-lib\",\n      \"version\": \"2.1.0\",\n      \"purl\": \"pkg:npm/example-lib@2.1.0\"\n    }\n  ]\n}`,backgroundColor=\"#0a0e14\",borderColor=\"#1a1f29\",textColor=\"#c5c8c6\",keywordColor=\"#81a2be\",stringColor=\"#b5bd68\",numberColor=\"#de935f\",propertyColor=\"#8abeb7\",showWindowButtons=true,buttonRed=\"#ff5f56\",buttonYellow=\"#ffbd2e\",buttonGray=\"#a6a6a6\",borderRadius=12,padding=24,font,showLineNumbers=false,lineNumberColor=\"#4a5568\"}=props;const[highlightedCode,setHighlightedCode]=useState(\"\");useEffect(()=>{const highlighted=syntaxHighlight(code,{keyword:keywordColor,string:stringColor,number:numberColor,text:textColor,property:propertyColor});startTransition(()=>setHighlightedCode(highlighted));},[code,keywordColor,stringColor,numberColor,textColor,propertyColor]);const lines=code.split(\"\\n\");return /*#__PURE__*/_jsxs(\"div\",{style:{...props.style,position:\"relative\",width:\"100%\",height:\"100%\",backgroundColor,border:`1px solid ${borderColor}`,borderRadius,overflow:\"hidden\",display:\"flex\",flexDirection:\"column\"},children:[showWindowButtons&&/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",gap:8,padding:\"16px 20px\",borderBottom:`1px solid ${borderColor}`},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:12,height:12,borderRadius:\"50%\",backgroundColor:buttonRed}}),/*#__PURE__*/_jsx(\"div\",{style:{width:12,height:12,borderRadius:\"50%\",backgroundColor:buttonYellow}}),/*#__PURE__*/_jsx(\"div\",{style:{width:12,height:12,borderRadius:\"50%\",backgroundColor:buttonGray}})]}),/*#__PURE__*/_jsx(\"div\",{style:{flex:1,overflow:\"auto\",padding},children:/*#__PURE__*/_jsx(\"pre\",{style:{margin:0,...font,color:textColor,whiteSpace:\"pre\",wordWrap:\"normal\",display:\"flex\",flexDirection:\"column\"},children:lines.map((line,index)=>/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",minHeight:\"1.5em\"},children:[showLineNumbers&&/*#__PURE__*/_jsx(\"span\",{style:{color:lineNumberColor,marginRight:24,userSelect:\"none\",minWidth:30,textAlign:\"right\"},children:index+1}),/*#__PURE__*/_jsx(\"code\",{dangerouslySetInnerHTML:{__html:syntaxHighlight(line,{keyword:keywordColor,string:stringColor,number:numberColor,text:textColor,property:propertyColor})}})]},index))})})]});}function syntaxHighlight(code,colors){// Escape HTML\nlet result=code.replace(/&/g,\"&amp;\").replace(/</g,\"&lt;\").replace(/>/g,\"&gt;\");// Use a token-based approach to avoid overlapping replacements\nconst tokens=[];// Find all property names (keys in JSON) - \"key\":\nconst propertyRegex=/\"([^\"]+)\"\\s*:/g;let match;while((match=propertyRegex.exec(result))!==null){tokens.push({type:\"property\",value:match[0],start:match.index,end:match.index+match[0].length});}// Find all string values (not followed by colon)\nconst stringRegex=/\"([^\"]*)\"/g;while((match=stringRegex.exec(result))!==null){// Check if this string is part of a property (already tokenized)\nconst isProperty=tokens.some(t=>t.type===\"property\"&&match.index>=t.start&&match.index<t.end);if(!isProperty){tokens.push({type:\"string\",value:match[0],start:match.index,end:match.index+match[0].length});}}// Find all numbers\nconst numberRegex=/\\b(\\d+\\.?\\d*)\\b/g;while((match=numberRegex.exec(result))!==null){// Check if this number is inside a string or property\nconst isInsideToken=tokens.some(t=>match.index>=t.start&&match.index<t.end);if(!isInsideToken){tokens.push({type:\"number\",value:match[0],start:match.index,end:match.index+match[0].length});}}// Find all keywords\nconst keywordRegex=/\\b(true|false|null)\\b/g;while((match=keywordRegex.exec(result))!==null){// Check if this keyword is inside a string or property\nconst isInsideToken=tokens.some(t=>match.index>=t.start&&match.index<t.end);if(!isInsideToken){tokens.push({type:\"keyword\",value:match[0],start:match.index,end:match.index+match[0].length});}}// Sort tokens by start position (descending) so we can replace from end to start\ntokens.sort((a,b)=>b.start-a.start);// Apply highlighting from end to start to preserve indices\nfor(const token of tokens){let color=colors.text;let replacement=token.value;if(token.type===\"property\"){// For properties, only color the quoted part, keep the colon\nconst colonMatch=token.value.match(/^(\"([^\"]+)\")\\s*(:)$/);if(colonMatch){replacement=`<span style=\"color: ${colors.property}\">${colonMatch[1]}</span>${colonMatch[3]}`;}}else if(token.type===\"string\"){replacement=`<span style=\"color: ${colors.string}\">${token.value}</span>`;}else if(token.type===\"number\"){replacement=`<span style=\"color: ${colors.number}\">${token.value}</span>`;}else if(token.type===\"keyword\"){replacement=`<span style=\"color: ${colors.keyword}\">${token.value}</span>`;}result=result.substring(0,token.start)+replacement+result.substring(token.end);}return result;}addPropertyControls(CodeShowcase,{code:{type:ControlType.String,title:\"Code\",defaultValue:`{\n  \"bomFormat\": \"CycloneDX\",\n  \"specVersion\": \"1.5\",\n  \"serialNumber\": \"urn:uuid:...\",\n  \"version\": 1,\n  \"metadata\": {\n    \"timestamp\": \"2026-01-15T10:00:00Z\",\n    \"tools\": [{\n      \"vendor\": \"Interlynk\",\n      \"name\": \"SBOM Generator\"\n    }]\n  },\n  \"components\": [\n    {\n      \"type\": \"library\",\n      \"name\": \"example-lib\",\n      \"version\": \"2.1.0\",\n      \"purl\": \"pkg:npm/example-lib@2.1.0\"\n    }\n  ]\n}`,displayTextArea:true},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#0a0e14\"},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"#1a1f29\"},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#c5c8c6\"},keywordColor:{type:ControlType.Color,title:\"Keywords\",defaultValue:\"#81a2be\"},stringColor:{type:ControlType.Color,title:\"Strings\",defaultValue:\"#b5bd68\"},numberColor:{type:ControlType.Color,title:\"Numbers\",defaultValue:\"#de935f\"},propertyColor:{type:ControlType.Color,title:\"Properties\",defaultValue:\"#8abeb7\"},showWindowButtons:{type:ControlType.Boolean,title:\"Window Buttons\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},buttonRed:{type:ControlType.Color,title:\"Red Button\",defaultValue:\"#ff5f56\",hidden:({showWindowButtons})=>!showWindowButtons},buttonYellow:{type:ControlType.Color,title:\"Yellow Button\",defaultValue:\"#ffbd2e\",hidden:({showWindowButtons})=>!showWindowButtons},buttonGray:{type:ControlType.Color,title:\"Gray Button\",defaultValue:\"#a6a6a6\",hidden:({showWindowButtons})=>!showWindowButtons},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:12,min:0,max:32,step:1,unit:\"px\"},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:24,min:0,max:64,step:4,unit:\"px\"},font:{type:ControlType.Font,title:\"Font\",defaultValue:{fontSize:\"14px\",letterSpacing:\"0em\",lineHeight:\"1.5em\"},controls:\"extended\",defaultFontType:\"monospace\"},showLineNumbers:{type:ControlType.Boolean,title:\"Line Numbers\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},lineNumberColor:{type:ControlType.Color,title:\"Line Number Color\",defaultValue:\"#4a5568\",hidden:({showLineNumbers})=>!showLineNumbers}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CodeShowcase\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CodeShowcase.map"],"mappings":"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"}