Logo v0

2a:o1,~2a:o3e5,2:"$Sreact.fragment" 3:"/chat-static/_next/static/immutable/chunks/3diivpwqdnw-6.js" 4:I[866829,["$3"],"default"] 5:I[636186,["$3"],"default"] 25:"ViewportBoundary" 26:I[83102,["$3"],"$25"] 28:"MetadataBoundary" 29:I[83102,["$3"],"$28"] 2a:"$Sreact.suspense" :HL["/chat-static/_next/static/immutable/chunks/3psnxn1b_-ata.css","style"] :HL["/chat-static/_next/static/immutable/chunks/36nqb39a_8nk6.css","style"] :HL["/chat-static/_next/static/immutable/chunks/1rl13lxdpm328.css","style"] 1:X 6:X 17:X 1a:X 1f:X 24:X 22:[["children",{"s":"__PAGE__","h":130,"d":{"r":"$L23","p":false,"v":"$24"}}]] 20:[["children",{"s":{"n":"id","t":"d","k":"qvsOxt2ByeH","s":null},"h":38,"d":{"r":"$L21","p":false,"v":"$6"},"c":"$Q22"}]] 1d:[["children",{"s":"(discover)","h":106,"d":{"r":"$L1e","p":false,"v":"$1f"},"c":"$Q20"}]] 1b:[["children",{"s":"templates","h":106,"d":{"r":"$L1c","p":false,"v":"$6"},"c":"$Q1d"}]] 18:[["children",{"s":"(no-sidebar)","h":74,"d":{"r":"$L19","p":false,"v":"$1a"},"c":"$Q1b"}]] 2a:oc0f,8:[["children",{"s":"(dynamic-root)","h":58,"d":{"r":["$","$2","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/3psnxn1b_-ata.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/36nqb39a_8nk6.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/1rl13lxdpm328.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/32jhgulpgepn7.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/0v2v4jxh9wclj.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/1wemd7-d5mpnm.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/3iesnexr6yixw.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/05b0gs5q30xyx.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/3dz4d5nl8u9xx.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/3o-sffdgc7x78.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/3qs55kf9krda_.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/06_01jsn_lkbe.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/2jvhokt4sttyv.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/3ot1tv88422b0.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/2d37gjv21yf--.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/09epofklssu8v.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/0hgu60xgihmu2.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/0ttv6yvx3-yfg.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/2io48433i3dkr.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/1jfgko5yxt1x2.js","async":true,"nonce":"$undefined"}],["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/4016a7ecb-_-1.js","async":true,"nonce":"$undefined"}],"$L9","$La","$Lb","$Lc","$Ld","$Le","$Lf","$L10","$L11","$L12","$L13","$L14","$L15"],"$L16"]}],"p":false,"v":"$17"},"c":"$Q18"}]] 2a:o1db,7:[["children",{"s":{"n":"variants","t":"d","k":"v0pprvariant-0-0-en-cgas","s":null},"h":122,"d":{"r":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$6"},"c":"$Q8"}]] 2c:X 2d:X 2a:o712,0:{"q":"","i":false,"S":true,"r":"$1","t":{"t":{"s":"","h":90,"d":{"r":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$6"},"c":"$Q7"},"h":{"r":["$","$2","h",{"children":[null,["$","$L26","lCowT7F2bUfS3QsR7Q4Pjv",{"children":"$L27"}],["$","$L29","lCowT7F2bUfS3QsR7Q4Pjm",{"children":[["$","div",null,{"hidden":true,"children":["$","$2a",null,{"name":"Next.Metadata","children":"$L2b"}]}],null]}]]}],"p":false,"v":"$2c"}},"s":"$2d","a":"$@2e"} 2a:o1000,2f:"/chat-static/_next/static/immutable/chunks/32jhgulpgepn7.js" 30:"/chat-static/_next/static/immutable/chunks/0v2v4jxh9wclj.js" 31:"/chat-static/_next/static/immutable/chunks/1wemd7-d5mpnm.js" 32:"/chat-static/_next/static/immutable/chunks/3iesnexr6yixw.js" 33:"/chat-static/_next/static/immutable/chunks/05b0gs5q30xyx.js" 34:"/chat-static/_next/static/immutable/chunks/3dz4d5nl8u9xx.js" 35:"/chat-static/_next/static/immutable/chunks/3o-sffdgc7x78.js" 36:"/chat-static/_next/static/immutable/chunks/3qs55kf9krda_.js" 37:"/chat-static/_next/static/immutable/chunks/06_01jsn_lkbe.js" 38:"/chat-static/_next/static/immutable/chunks/2jvhokt4sttyv.js" 39:"/chat-static/_next/static/immutable/chunks/3ot1tv88422b0.js" 3a:"/chat-static/_next/static/immutable/chunks/2d37gjv21yf--.js" 3b:"/chat-static/_next/static/immutable/chunks/09epofklssu8v.js" 3c:"/chat-static/_next/static/immutable/chunks/0hgu60xgihmu2.js" 3d:"/chat-static/_next/static/immutable/chunks/0ttv6yvx3-yfg.js" 3e:"/chat-static/_next/static/immutable/chunks/2io48433i3dkr.js" 3f:"/chat-static/_next/static/immutable/chunks/1jfgko5yxt1x2.js" 40:"/chat-static/_next/static/immutable/chunks/4016a7ecb-_-1.js" 41:"/chat-static/_next/static/immutable/chunks/26ndb8-z7-6uc.js" 42:"/chat-static/_next/static/immutable/chunks/1c97lf-ml-c68.js" 43:"/chat-static/_next/static/immutable/chunks/0i9ytaqccqzhg.js" 44:"/chat-static/_next/static/immutable/chunks/1xjtjh27zz2dk.js" 45:"/chat-static/_next/static/immutable/chunks/1u70r7p_u46ru.js" 46:"/chat-static/_next/static/immutable/chunks/3biij8x50dsno.js" 47:"/chat-static/_next/static/immutable/chunks/0cigfh2_9w3hn.js" 48:"/chat-static/_next/static/immutable/chunks/15za3cxi6bbtb.js" 49:"/chat-static/_next/static/immutable/chunks/3f8az-8x6y3m6.js" 4a:"/chat-static/_next/static/immutable/chunks/3usybk5sih560.js" 4b:"/chat-static/_next/static/immutable/chunks/3nfligpazcspn.js" 4c:"/chat-static/_next/static/immutable/chunks/3ld79rc9uacwh.js" 4d:"/chat-static/_next/static/immutable/chunks/2pp-zgwlqouje.js" 4e:"/chat-static/_next/static/immutable/chunks/3-mmaftoji7ba.js" 4f:"/chat-static/_next/static/immutable/chunks/3j2fcaqb1upxa.js" 50:"/chat-static/_next/static/immutable/chunks/0xtt-01d_ehhq.js" 51:"/chat-static/_next/static/immutable/chunks/2stb1nb-wmbl_.js" 52:"/chat-static/_next/static/immutable/chunks/36_ik_5xuwtoz.js" 53:"/chat-static/_next/static/immutable/chunks/2j0xjca0lhj-_.js" 54:"ScopedPromiseContextProvider" 55:I[850359,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53"],"$54"] 5c:"SidebarUIProvider" 5d:I[475961,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53"],"$5c"] 5e:I[990009,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53"],"Header"] 5f:I[980088,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53"],"DynamicCMDK"] 61:"LoadingBoundaryProvider" 62:I[866829,["$3"],"$61"] 63:"/chat-static/_next/static/immutable/chunks/1wqyz95aaf1w_.js" 64:"/chat-static/_next/static/immutable/chunks/17y5818oi51si.js" 65:"/chat-static/_next/static/immutable/chunks/2jayz3pd43wzh.js" 66:"/chat-static/_next/static/immutable/chunks/18ngrminqbz2d.js" 67:"/chat-static/_next/static/immutable/chunks/03sfdwnp8i0ai.js" 68:"/chat-static/_next/static/immutable/chunks/0yw1dg__j8skq.js" 69:"/chat-static/_next/static/immutable/chunks/15r_hhk-bikcp.js" 6a:"/chat-static/_next/static/immutable/chunks/42kpd262h9bwg.js" 6b:"/chat-static/_next/static/immutable/chunks/1eap2lpe7dzk1.js" 6c:"/chat-s2a:ode4,tatic/_next/static/immutable/chunks/2jsyecf21udrk.js" 6d:"/chat-static/_next/static/immutable/chunks/0zzqlhkdfgt00.js" 6e:"/chat-static/_next/static/immutable/chunks/27mm9xvabybvk.js" 6f:"/chat-static/_next/static/immutable/chunks/3a7bsl-ell5x4.js" 70:"/chat-static/_next/static/immutable/chunks/3kvi_dc1ov0ur.js" 71:"/chat-static/_next/static/immutable/chunks/3ma7bjzek3h3b.js" 72:"/chat-static/_next/static/immutable/chunks/42cjni28s0sbe.js" 73:"/chat-static/_next/static/immutable/chunks/1auqs6atnrmxq.js" 74:"TemplatePreviewContainer" 75:I[959794,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$74"] 76:"TemplateInfoSection" 77:I[164762,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$76"] 78:"TemplateInfoSectionGroup" 79:I[164762,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$78"] 7c:I[83102,["$3"],"OutletBoundary"] :HL["/chat-static/_next/static/immutable/chunks/2r4ti-hs27evh.css","style"] :HL["/chat-static/_next/static/immutable/chunks/307qnv4t1ew5c.css","style"] 6:C 9:["$","script","script-18",{"src":"/chat-static/_next/static/immutable/chunks/26ndb8-z7-6uc.js","async":true,"nonce":"$undefined"}] a:["$","script","script-19",{"src":"/chat-static/_next/static/immutable/chunks/1c97lf-ml-c68.js","async":true,"nonce":"$undefined"}] b:["$","script","script-20",{"src":"/chat-static/_next/static/immutable/chunks/0i9ytaqccqzhg.js","async":true,"nonce":"$undefined"}] c:["$","script","script-21",{"src":"/chat-static/_next/static/immutable/chunks/1xjtjh27zz2dk.js","async":true,"nonce":"$undefined"}] d:["$","script","script-22",{"src":"/chat-static/_next/static/immutable/chunks/1u70r7p_u46ru.js","async":true,"nonce":"$undefined"}] e:["$","script","script-23",{"src":"/chat-static/_next/static/immutable/chunks/3biij8x50dsno.js","async":true,"nonce":"$undefined"}] f:["$","script","script-24",{"src":"/chat-static/_next/static/immutable/chunks/0cigfh2_9w3hn.js","async":true,"nonce":"$undefined"}] 10:["$","script","script-25",{"src":"/chat-static/_next/static/immutable/chunks/15za3cxi6bbtb.js","async":true,"nonce":"$undefined"}] 11:["$","script","script-26",{"src":"/chat-static/_next/static/immutable/chunks/3f8az-8x6y3m6.js","async":true,"nonce":"$undefined"}] 12:["$","script","script-27",{"src":"/chat-static/_next/static/immutable/chunks/3usybk5sih560.js","async":true,"nonce":"$undefined"}] 13:["$","script","script-28",{"src":"/chat-static/_next/static/immutable/chunks/3nfligpazcspn.js","async":true,"nonce":"$undefined"}] 14:["$","script","script-29",{"src":"/chat-static/_next/static/immutable/chunks/3ld79rc9uacwh.js","async":true,"nonce":"$undefined"}] 15:["$","script","script-30",{"src":"/chat-static/_next/static/immutable/chunks/2pp-zgwlqouje.js","async":true,"nonce":"$undefined"}] 2a:o5a8,19:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/3-mmaftoji7ba.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/3j2fcaqb1upxa.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/0xtt-01d_ehhq.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/2stb1nb-wmbl_.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/36_ik_5xuwtoz.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/2j0xjca0lhj-_.js","async":true,"nonce":"$undefined"}]],["$","$L55",null,{"params":null,"promises":{"scopeUserDetails":"$@56","team":"$@57","vercelProjectsFavorites":"$@58","chats":"$@59","sidebarProjectGroups":"$@5a","sidebarDrafts":"$@5b"},"children":["$","$L5d",null,{"children":[["$","$L5e",null,{}],["$","div",null,{"className":"flex min-h-0 flex-1","children":["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","$L5f",null,{}]]}]}]]}] 2a:o1f9,1c:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1e:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/1wqyz95aaf1w_.js","async":true,"nonce":"$undefined"}]],"$L60"]}] 2a:o1156,21:["$","$L62",null,{"loading":[["$","div","l",{"data-testid":"template-detail-skeleton","className":"flex flex-1 w-full gap-y-6 flex-col items-center","children":[["$","div",null,{"className":"flex w-full flex-col items-start gap-6 max-w-[1600px]","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-5 w-20"}],["$","div",null,{"className":"flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:items-center sm:gap-2","children":[["$","div",null,{"className":"flex flex-col gap-2 text-left","children":[["$","div",null,{"className":"mb-0.5 flex items-center sm:mb-0","children":["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-10 w-64 max-w-[60vw]"}]}],["$","div",null,{"className":"flex items-center gap-1.5","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-5 rounded-full sm:size-6"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-20"}]]}]]}],["$","div",null,{"className":"flex flex-row-reverse items-center gap-2 sm:flex-row","children":["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-20 rounded-lg sm:h-8 sm:w-24"}]}]]}]]}],["$","div",null,{"className":"flex w-full flex-1 flex-col py-4 pt-0 items-center text-sm gap-9 max-w-[1600px]","children":["$","div",null,{"className":"flex h-fit w-full flex-1 flex-col gap-9","children":[["$","$L75",null,{"children":["$","div",null,{"aria-hidden":true,"className":"flex size-full flex-col bg-v0-background-200","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-2 border-b border-v0-gray-300 px-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-2 rounded-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 mx-auto h-7 w-[min(40%,20rem)]"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 size-7"}]]}],["$","div",null,{"className":"flex flex-1 items-center justify-center p-8","children":["$","div",null,{"className":"flex w-full max-w-sm flex-col items-center gap-3","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-5 w-2/3"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3 w-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3 w-4/5"}]]}]}]]}]}],["$","div",null,{"className":"flex flex-col lg:flex-row gap-9","children":[["$","$L77",null,{"className":"flex-1","title":"About","children":["$","div",null,{"className":"flex w-full max-w-xl flex-col gap-2","children":[["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-full"}],["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-3/4"}]]}]}],["$","$L79",null,{"className":"w-full lg:w-80","children":[["$","$L77",null,{"title":"Tags","children":["$","div",null,{"className":"flex flex-wrap gap-6","children":["$","div",null,{"className":"flex flex-wrap gap-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-16 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 h-7 w-20 rounded-full"}]]}]}]}],["$","$L77",null,{"title":"Share","children":["$","div",null,{"className":"flex flex-wrap gap-3","children":[["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}],["$","div",null,{"className":"animate-none bg-v0-alpha-100 size-7 rounded-full"}]]}]}],["$","$L77",null,{"children":["$","div",null,{"className":"animate-none rounded-[5px] bg-v0-alpha-100 h-3.5 w-full max-w-44"}]}]]}]]}]]}]}]]}],[],[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/2q_48xxelkcse.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/0gxtapk62sj8q.js","async":true,"nonce":"$undefined"}]]],"children":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$L7a","forbidden":"$undefined","unauthorized":"$undefined"}]]}]}] 2a:oa11,23:["$","$2","c",{"children":["$L7b",[["$","link","0",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2r4ti-hs27evh.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/307qnv4t1ew5c.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/17y5818oi51si.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/2jayz3pd43wzh.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/18ngrminqbz2d.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/03sfdwnp8i0ai.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/0yw1dg__j8skq.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/15r_hhk-bikcp.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/42kpd262h9bwg.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/1eap2lpe7dzk1.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/2jsyecf21udrk.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/0zzqlhkdfgt00.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/27mm9xvabybvk.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/3a7bsl-ell5x4.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/3kvi_dc1ov0ur.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/3ma7bjzek3h3b.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/42cjni28s0sbe.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/1auqs6atnrmxq.js","async":true,"nonce":"$undefined"}]],["$","$L7c",null,{"children":["$","$2a",null,{"name":"Next.MetadataOutlet","children":"$@7d"}]}]]}] 2a:o16,2d:300 7a:["$L7e",[]] 2a:o659,85:I[339811,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63"],"PageLayout"] 86:"ScrollFadeContainer" 87:I[388503,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63"],"$86"] 88:"CommunityTabsClient" 89:I[490134,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63"],"$88"] 8a:"CommunityLiveSearch" 8b:I[803568,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63"],"$8a"] 8c:I[32970,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63"],"ZoneProvider"] 8d:I[532822,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63"],"default"] 17:T8,variants1f:T8,variants7f:T18d5,2a:o18d5,(({protect:a})=>{function b(a){return new Promise((b,c)=>{if(document.querySelector(`script[src="${a}"]`))return void b();let d=document.createElement("script");d.src=a,d.async=!0,d.onload=()=>b(),d.onerror=a=>{console.error("Error loading script",a),c(a)},document.head.appendChild(d)})}var c=class a{#a;#b;#c=0;constructor(){let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,this.#e(),window.addEventListener("online",this.#f),window.addEventListener("visibilitychange",this.#f)}getChallenge=async()=>(await this.#g(),await this.#a.then(a=>"function"==typeof a?a():a));#f=()=>{if(document.hidden)return;let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,window.V_C=[],window.V_C.push=c;let d=document.querySelector('script[src*="c.js"]');d&&d.remove(),this.#c+=1};#e=()=>{if(window.V_C){let a=window.V_C.pop();a&&this.#b(a)}else window.V_C=[],window.V_C.push=this.#b};#g=()=>{let a=new URL("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/a-4-a/c.js",window.location.origin);return a.searchParams.set("i",String(this.#c)),a.searchParams.set("v",String(3)),a.searchParams.set("h",window.location.host),b(a.pathname+a.search)};#h=()=>{window.V_C=void 0};static #d(){let a,b;return{promise:new Promise((c,d)=>{a=c,b=d}),resolve:a,reject:b}}},d=class a{#a=!1;#b;constructor(a){this.#b=a}get loaded(){return this.#a}load=async()=>{this.#a||await this.#f()};#c=()=>{if(typeof globalThis.window>"u")throw Error("KPSDK is not available in the server");if(!window.KPSDK)throw Error("KPSDK is not loaded");let b=this.#b.map(b=>{let c=a.#e(b.path);return{domain:c.host,path:c.pathname,method:b.method}});try{window.KPSDK.configure(b)}catch(a){console.error("Error configuring KPSDK...",a)}};#f=async()=>{let a=this;return new Promise((c,d)=>{let e=()=>{document.removeEventListener("kpsdk-load",e),this.#c()},f=()=>{document.removeEventListener("kpsdk-ready",f),a.#a=!0,c()};document.addEventListener("kpsdk-load",e,{once:!0}),document.addEventListener("kpsdk-ready",f,{once:!0}),b("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/p.js").catch(a=>{document.removeEventListener("kpsdk-load",e),document.removeEventListener("kpsdk-ready",f),d(a)})})};static #e(a){let b;try{b=new URL(a)}catch{b=new URL(a,location.origin)}return b}},e=a=>{let b=a.replace(/[.?+^$[\]\\(){}|-]/g,"\\$&").split("*").join(".*");return RegExp(`^${b}$`)},f=({path:a,pattern:b})=>-1!==a.search(b);!function({protect:a=[]}){let b;for(let b of a)if(b.advancedOptions?.checkLevel!==void 0&&"deepAnalysis"!==b.advancedOptions.checkLevel&&"basic"!==b.advancedOptions.checkLevel)throw Error(`Invalid checkLevel "${b.advancedOptions.checkLevel}" for route "${b.path}". Must be one of: deepAnalysis, basic`);let g=new c,h=new d(a);(async function(a,b,c){let d=XMLHttpRequest.prototype.open,g=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(a,b,c,e,f){return this._requestUrl=b.toString(),this._requestMethod=a,d.call(this,a,b,c??!0,e,f)},XMLHttpRequest.prototype.send=async function(d){let h=this._requestUrl;if(!h||this._isReexecution)return g.call(this,d);let i=new URL(h,location.href),j=c.find(a=>f({path:i.pathname,pattern:e(a.path)}));if(null==j||j.method!==(this._requestMethod??"GET")&&"*"!==j.method)return g.call(this,d);let k=await a.getChallenge();if(this.setRequestHeader("x-is-human",JSON.stringify(k)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",this._requestMethod||"GET"),0!==k.b||b.loaded||((1===k.d||j?.advancedOptions?.checkLevel==="deepAnalysis")&&await b.load(),!b.loaded))return g.call(this,d);this.setRequestHeader("x-is-human",JSON.stringify(k)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",this._requestMethod||"GET");let l=new XMLHttpRequest;return l._isReexecution=!0,l.open(this._requestMethod||"GET",h,!0),l.setRequestHeader("x-is-human",JSON.stringify(k)),l.setRequestHeader("x-path",i.pathname),l.setRequestHeader("x-method",this._requestMethod||"GET"),this.timeout&&(l.timeout=this.timeout),this.responseType&&(l.responseType=this.responseType),this.withCredentials&&(l.withCredentials=this.withCredentials),l.onreadystatechange=()=>{Object.defineProperty(this,"readyState",{value:l.readyState,writable:!0,configurable:!0}),l.readyState===XMLHttpRequest.DONE&&(Object.defineProperty(this,"status",{value:l.status,writable:!0,configurable:!0}),Object.defineProperty(this,"statusText",{value:l.statusText,writable:!0,configurable:!0}),Object.defineProperty(this,"response",{value:l.response,writable:!0,configurable:!0}),Object.defineProperty(this,"responseText",{value:l.responseText,writable:!0,configurable:!0}),Object.defineProperty(this,"responseXML",{value:l.responseXML,writable:!0,configurable:!0}),this.getAllResponseHeaders=()=>l.getAllResponseHeaders(),this.getResponseHeader=a=>l.getResponseHeader(a)),this.onreadystatechange&&this.onreadystatechange.call(this,new Event("readystatechange"))},l.onload=a=>{this.onload&&this.onload.call(this,a)},l.onerror=a=>{this.onerror&&this.onerror.call(this,a)},l.onabort=a=>{this.onabort&&this.onabort.call(this,a)},l.ontimeout=a=>{this.ontimeout&&this.ontimeout.call(this,a)},l.onloadstart=a=>{this.onloadstart&&this.onloadstart.call(this,a)},l.onloadend=a=>{this.onloadend&&this.onloadend.call(this,a)},l.onprogress=a=>{this.onprogress&&this.onprogress.call(this,a)},l.send(d)}})(g,h,a).catch(a=>{console.error("Error patching XMLHttpRequest:",a)}),b=window.fetch,window.fetch=async(c,d)=>{let i=new URL(c instanceof Request?c.url:c,location.href),j=i.origin===location.origin,k=a.find(a=>f({path:i.pathname,pattern:e(a.path)})),l=d?.method??(c instanceof Request?c.method:"GET"),m=null!=k&&(k.method===l||"*"===k.method);if(null==k||!m||!j)return b(c,d);let n=await g.getChallenge(),o=new Headers(d?.headers||(c instanceof Request?c.headers:void 0));o.set("x-is-human",JSON.stringify(n)),o.set("x-path",i.pathname),o.set("x-method",l);let p={...d,headers:o};return h.loaded||0!==n.b?b(c,p):1===n.d||k?.advancedOptions?.checkLevel==="deepAnalysis"?(await h.load(),window.fetch(c,p)):b(c,p)}}({protect:a})})({ protect: [{"path":"/chat/api/vm/actions/run-pipeline","method":"POST","advancedOptions":{"checkLevel":"deepAnalysis"}},{"path":"/chat/api/chat","method":"POST"},{"path":"/chat/api/vm/actions/*","method":"POST"},{"path":"*/chat/api/vm/actions/*","method":"POST"}] });2a:o534,16:["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","meta",null,{"name":"ahrefs-site-verification","content":"e2ef51ac3cec223624a89ee7790eda482d23374870bff86fe0e0c599b8de4b51"}],["$","script",null,{"dangerouslySetInnerHTML":{"__html":"$7f"}}],"$L80","$L81","$L82","$L83"]}],"$L84"]}] 60:["$","$L85",null,{"actions":["$","div",null,{"className":"flex lg:pr-1 items-center w-full justify-between flex-row gap-2 relative","children":[["$","$L87",null,{"leftFadeClassName":"left-0 z-20","rightFadeClassName":"right-0 z-20","showButtons":false,"className":"flex-1 min-w-0","scrollableClassName":"px-0","children":["$","$L89",null,{}]}],["$","$2a",null,{"children":["$","$L8b",null,{}]}]]}],"titleRowClassName":"hidden","className":"flex py-6 px-4 sm:p-9","contentWrapperClassName":"flex-1 min-h-max","headerClassName":"!border-t-0","title":"Community","children":[["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","div",null,{"className":"py-4","children":["$","$L8c",null,{"zone":"chat","children":["$","$L8d",null,{}]}]}]]}] 2a:o1000,8e:"GeistThemeScript" 8f:I[723541,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$8e"] 90:I[600033,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"AppStoreMetaTag"] 91:I[723541,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"GeistProvider"] 92:I[818362,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"LocaleProvider"] 93:I[841245,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"MotionConfig"] 94:"AtomicContextSWRProvider" 95:I[850359,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53"],"$94"] 96:"GlobalPromiseContextProvider" 97:I[850359,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53"],"$96"] 9a:I[827887,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"JotaiProvider"] 9b:"ServerQuerySWRRuntimeProvider" 9c:I[74757,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$9b"] 9e:I[815349,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"CleanupStorage"] 9f:I[96914,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"Analytics"] a0:I[620559,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"SpeedInsights"] a2:"VercelianAppFlowMigrator" a3:I[23825,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a2"] a4:I[108762,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"TrackInfo"] a5:I[578386,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"PageViewTracker"] a6:I[356301,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"AutoCapture"] 80:["$","$L8f",null,{"storageKey":"theme"}] 81:["$","$2a",null,{"children":["$","$L90",null,{}]}] 82:["$","meta",null,{"name":"slack-app-id","content":"A09PS08K5R8"}] 83:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"Vercel\",\"url\":\"https://vercel.com\",\"logo\":\"https://assets.vercel.com/image/upload/front/favicon/vercel/favicon.ico\",\"2a:o23b,sameAs\":[\"https://x.com/vercel\",\"https://x.com/v0\",\"https://github.com/vercel\",\"https://www.linkedin.com/company/vercel\",\"https://www.linkedin.com/company/v0dev\"]},{\"@context\":\"https://schema.org\",\"@type\":\"WebApplication\",\"name\":\"v0\",\"url\":\"https://v0.app\",\"description\":\"Your collaborative AI assistant to design, iterate, and scale full-stack applications for the web.\",\"applicationCategory\":[\"DeveloperApplication\",\"DesignApplication\"],\"operatingSystem\":\"All\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Vercel\"}}]"}}] 2a:o93b,84:["$","body",null,{"className":"font-sans bg-v0-background-200 text-v0-gray-1000 antialiased Nts1ea_variable uEoYyW_variable hGs1mq_variable","children":[["$","$L91",null,{"storageKey":"theme","withScript":false,"children":["$","$L92",null,{"locale":"en","children":["$","$L93",null,{"reducedMotion":"user","children":["$","$L95",null,{"routes":{"scoped":{"scopeUserDetails":{"path":"/api/chat/scoped/user","method":"GET"},"team":{"path":"/api/chat/scoped/team","method":"GET"},"vercelProjectsFavorites":{"path":"/api/chat/scoped/vercel-projects/favorites","method":"GET"},"chats":{"path":"/api/chat/scoped/chats","method":"GET"},"paginatedChats":{"path":"/api/chat/scoped/get-paginated-chats","method":"GET"},"designSystems":{"path":"/api/chat/scoped/design-systems-with-registry/list","method":"GET"},"sidebarProjectGroups":{"path":"/api/chat/scoped/sidebar-project-groups","method":"GET"},"sidebarDrafts":{"path":"/api/v2/internal/chats/sidebar-drafts","method":"GET"}},"chat":{"attributes":{"path":"/api/chat/chat/attributes","method":"GET"},"externalMeta":{"path":"/api/chat/chat/latest-external-meta","method":"GET"},"latest":{"path":"/api/chat/chat/latest","method":"GET"},"template":{"path":"/api/chat/chat/template","method":"GET"},"messages":{"path":"/api/chat/chat/messages","method":"GET"},"messagesRange":{"path":"/api/chat/chat/messages/range","method":"GET"},"gitStatus":{"path":"/api/git/status","method":"GET"}},"library":{"chatsList":{"path":"/api/chat/library/chats/list","method":"GET"},"archivedChatsList":{"path":"/api/chat/library/chats/archived","method":"GET"},"projectsList":{"path":"/api/chat/library/projects/list","method":"GET"},"filters":{"path":"/api/chat/library/filters","method":"GET"}},"project":{},"global":{"dailyModelUsage":{"path":"/api/chat/global/daily-model-usage","method":"GET"},"freeFixWithV0Usage":{"path":"/api/chat/global/free-fix-with-v0-usage","method":"GET"}}},"children":["$","$L97",null,{"params":null,"promises":{"dailyModelUsage":"$@98","freeFixWithV0Usage":"$@99"},"children":[["$","$L9a",null,{"children":["$","$L9c",null,{"children":"$L9d"}]}],["$","$L9e",null,{}]]}]}]}]}]}],["$","$L9f",null,{}],["$","$La0",null,{"endpoint":"https://v0sdk.com/_vercel/speed-insights/vitals"}],["$","$2a",null,{"children":"$La1"}],["$","$La3",null,{}],["$","$La4",null,{}],["$","$La5",null,{}],["$","$La6",null,{}]]}] 2a:o90,27:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1"}]] 2a:oe,2c:T8,variants2a:o1000,a7:"HydrateDurableAtoms" a8:I[783749,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a7"] a9:I[359783,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"DataProvider"] aa:I[32170,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"UserProvider"] ac:"AnimatedIconProvider" ad:I[908887,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$ac"] ae:I[30570,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"PortalProvider"] af:"SnowflakePublishProvider" b0:I[966820,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$af"] b1:"UserInputProvider" b2:I[472914,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$b1"] b3:I[69221,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"CmdkProvider"] b4:"VirtualMachineUIStateProvider" b5:I[319228,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$b4"] b6:"DeployedPreviewIframeRefProvider" b7:I[166890,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$b6"] b8:"PreviewSourceUIStateProvider" b9:I[197843,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$b8"] ba:I[367078,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"LoaderProvider"] bb:"PromptFormUIProvider" bc:I[595358,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$bb"] bd:I[242759,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"FlagsProvider"] bf:I[223495,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"NuqsAdapter"] c0:"ChatTabsProvider" c1:I[568561,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$c0"] c2:"PersonalScopeMigrationAnnouncementProvider" c3:I[206559,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$c2"] c5:"AnnouncementVisibilityProvider" c6:I[878519,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","2a:o683,$49","$4a","$4b","$4c","$4d"],"$c5"] c9:I[561588,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"Toaster"] ca:I[407562,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"Toaster"] cb:"SuspendingDialogs" cc:I[840793,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$cb"] cd:I[323194,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"SignInDialog"] ce:I[279070,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"ConsentBanner"] cf:"/chat-static/_next/static/immutable/chunks/0vd4_6u1ymqyh.js" d0:I[192842,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$cf"],"ChatWarning"] d1:I[15279,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"SessionManager"] 2a:o8ef,9d:["$","$La8",null,{"serverData":{"chat":null,"scoped":null,"root":{"root":{"sidebarCollapsed":false,"sidebarPreferenceSet":false,"sidebarWidth":250,"sidebarGroupOrder":[],"lastUpdated":0,"modelConfiguration":{"fast":false,"modelId":"v0-max","thinking":false,"thinkingEffort":null,"imageGenerations":false},"modelDisplayPreference":null,"lastModelPreference":null,"manualModelSelectionAnchorKey":null,"toolConfiguration":{"webSearch":true,"generateImages":true,"vercelProjectId":null,"vercelProjectName":null,"vercelProjectBranch":null,"vercelProjectGitOrg":null,"vercelProjectGitRepo":null,"customInstructionIds":[],"mcpServerIds":[],"marketplaceMcpIds":[],"autoAllowMcpTools":false},"shouldShowUpgrade":false,"chatMobilePanel":"input","chatPanelLayout":[{"id":"input","ratio":0.205,"visible":true},{"id":"output","ratio":0.795,"visible":true}],"dismissedFeatureDialogs":{},"dismissedConnectRepoCard":false,"permissionsModeV2":null}}},"children":["$","$La9",null,{"children":["$","$Laa",null,{"expectUser":false,"userPromise":"$@ab","children":["$","$Lad",null,{"children":["$","$Lae",null,{"children":["$","$Lb0",null,{"children":["$","$Lb2",null,{"children":["$","$Lb3",null,{"children":["$","$Lb5",null,{"children":["$","$Lb7",null,{"children":["$","$Lb9",null,{"children":["$","$Lba",null,{"children":["$","$Lbc",null,{"children":["$","$Lbd",null,{"promise":"$@be","middlewareFlags":["cgas"],"children":["$","$Lbf",null,{"children":["$","$Lc1",null,{"children":["$","$Lc3",null,{"destinationTeamIdPromise":"$@c4","children":["$","$Lc6",null,{"visiblePromise":"$@c7","children":["$","div",null,{"className":"max-h-screen-patched min-h-screen-patched flex w-full flex-col overflow-auto bg-v0-background-200","vaul-drawer-wrapper":"","children":[["$","$2a",null,{"fallback":null,"children":"$Lc8"}],["$","$Lc9",null,{}],["$","$Lca",null,{}],["$","$2a",null,{"fallback":null,"children":["$","$Lcc",null,{}]}],["$","$Lcd",null,{}],["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","$Lce",null,{}]]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}] 2a:o2a2,5b:null 7e:["$","$Ld0",null,{"description":"This generation was deleted, unpublished, or no longer exists.","icon":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"circular","style":{"color":"currentColor"},"className":"size-8","children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m1-5a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7.1 5.82a1 1 0 1 1 1.04 1.42c-.44.06-.89.44-.89 1.01v1h1.5v-.61a2.5 2.5 0 1 0-3-3.46l-.33.68 1.35.64z","clipRule":"evenodd"}]}],"title":"Not Found","children":null}] a1:["$","$Ld1",null,{"enabled":false}] 2a:o20,ab:"$undefined" c7:true c8:null 2a:o20,2c:0 24:0 2d:60 24:T2,id2c:T2,id2a:o8,c4:null 2a:o86f,d2:I[144680,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"S"] d3:"KeepClientOnUpToDateSlugPath" d4:I[983440,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$d3"] d5:"TemplateFlagDialog" d6:I[39126,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$d5"] d7:I[669246,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],""] d8:"TemplateStatusBadge" d9:I[484402,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$d8"] da:I[834117,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"CommunityAvatar"] 2a:o114e,7b:["$","$Ld2",null,{"value":{"fallback":{"template:qvsOxt2ByeH:likes":{"likeCount":2,"isLiked":false}}},"children":[["$","$Ld4",null,{"id":"qvsOxt2ByeH","title":"v0 Community Starter"}],["$","$Ld6",null,{"templateId":"qvsOxt2ByeH"}],["$","div",null,{"data-testid":"template-detail-content","className":"flex flex-1 w-full gap-y-6 flex-col items-center","children":[["$","div",null,{"data-testid":"template-detail-header","className":"flex w-full flex-col items-start gap-6 max-w-[1600px]","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"max-w-full","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"text-v0-gray-900 flex items-center text-sm break-words gap-0.5 flex-nowrap","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$Ld7",null,{"href":"/templates","prefetch":true,"children":"Templates","data-slot":"breadcrumb-link","className":"hover:text-v0-gray-1000 transition-colors","ref":null}]}],[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-4","children":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"m6.75 3.94.53.53 2.82 2.82a1 1 0 0 1 0 1.42l-2.82 2.82-.53.53L5.69 11l.53-.53L8.69 8 6.22 5.53 5.69 5z","clipRule":"evenodd"}]}]}],["$","$Ld7",null,{"className":"hover:text-v0-gray-1000 transition-colors capitalize truncate","href":"/templates/apps-and-games","prefetch":true,"children":"Apps & Games","data-slot":"breadcrumb-link","ref":null}]],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-4","children":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"children":"$7b:props:children:2:props:children:0:props:children:0:props:children:props:children:1:0:props:children:props:children"}]}],["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"text-v0-gray-1000 font-normal capitalize truncate","children":"v0 Community Starter"}]]}]}],["$","div",null,{"className":"flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:items-center sm:gap-2","children":[["$","div",null,{"className":"flex flex-col gap-2 text-left","children":[["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"data-testid":"template-detail-title","className":"line-clamp-1 text-heading-32","children":"v0 Community Starter"}],["$","$Ld9",null,{"status":"pending"}]]}],["$","div",null,{"className":"flex items-center flex-wrap gap-3","children":[["$","$Ld7",null,{"className":"flex items-center gap-1.5","href":"/@emmartinzok","children":[["$","$Lda",null,{"className":"size-5 sm:size-6","username":"emmartinzok","teamId":"$undefined","teamAvatarClassName":"size-3 sm:size-3.5"}],["$","p",null,{"className":"text-sm font-medium text-v0-gray-900","children":"emmartinzok"}]]}],["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"className":"size-3","children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"M2.5 3.25C2.5 1.45 3.96 0 5.75 0h.5C8.05 0 9.5 1.46 9.5 3.25v.5C9.5 5.55 8.04 7 6.25 7h-.5A3.25 3.25 0 0 1 2.5 3.75zM5.75 1.5C4.78 1.5 4 2.28 4 3.25v.5c0 .97.78 1.75 1.75 1.75h.5C7.22 5.5 8 4.72 8 3.75v-.5c0-.97-.78-1.75-1.75-1.75zm-4.25 13v-1.33a4.8 4.8 0 0 1 4.33-2.67h.34a4.8 4.8 0 0 1 4.33 2.67v1.33zM5.83 9a6.3 6.3 0 0 0-5.76 3.69l-.07.15V16h12v-3.16l-.07-.15A6.3 6.3 0 0 0 6.17 9zm10.1 3.69a6.3 6.3 0 0 0-2.59-2.84l-.75 1.3c.8.46 1.48 1.16 1.91 2.02v1.33h-1V16H16v-3.16zM11.25 0h-.75v1.5h.75c.97 0 1.75.78 1.75 1.75v.5c0 .97-.78 1.75-1.75 1.75h-.75V7h.75c1.8 0 3.25-1.46 3.25-3.25v-.5c0-1.8-1.46-3.25-3.25-3.25","clipRule":"evenodd"}]}],["$","span",null,{"className":"text-[13px] leading-none","children":"12"}]]}],"$Ldb","$Ldc"]}]]}]]}],"$Ldd"]}]]}],"$Lde"]}]]}] 2a:o1000,df:"TemplateCardStatsLikesClient" e0:I[441648,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$df"] e1:"TemplateFlagButton" e2:I[39126,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$e1"] e3:"TemplateLikeButton" e4:I[605890,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$e3"] e5:"TemplateBlockButton" e6:I[411379,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$e5"] e8:I[164762,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"TemplateTags"] e9:I[164762,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"TemplateShare"] ea:"TemplateLastUpdated" eb:I[164762,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$ea"] db:["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-dot size-4 -mx-1","children":[["$","circle","18d7e5",{"cx":"12.1","cy":"12.1","r":"1"}],"$undefined"]}] dc:["$","$Le0",null,{"templateCanonId":"qvsOxt2ByeH"}] dd:["$","div",null,{"className":"flex flex-row-reverse items-center gap-2 sm:flex-row","children":[null,null,null,["$","$Le2",null,{}],null,null,["$","$Le4","qvsOxt2ByeH",{"templateCanonId":"qvsOxt2ByeH"}],null,["$","$Le6",null,{"buttonProps":{"className":"h-7 rounded-md px-2 sm:h-8 sm:rounded-lg sm:px-3"},"buttonType":"v0","template":{"blockId":"b_5I9EB1dM16D","description":"v0 clone using the v0-sdk.","imageUrl":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/screenshots/qvsOxt2ByeH-2P9EKDYbSI8W49HuapUPk7WlqvjaaC.jpg","title":"v0 Community Starter","publishedToCommunity":"pending","templateCanonId":"qvsOxt2ByeH","templateVersionId":"Spq61cA4tQh","uses":12,"isTeamTemplate":true,"likeCount":2,"vercelDeploymentUrl":null,"createdAt":"$D2025-07-14T05:57:12.464Z","category":"apps-and-games","tags":[],"authorUsername":"emmartinzok","isVercel":false,"teamId":null,"liked":false},"isOwnTemplate":false}]]}] de:["$","div",null,{"className":"flex w-full flex-1 flex-col py-4 pt-0 items-center text-sm gap-9 max-w-[1600px]","children":[["$","div",null,{"className":"flex h-fit w-full flex-1 flex-col 2a:o2a8,gap-9","children":[["$","$L75","description",{"testId":"template-detail-preview","children":"$Le7"}],["$","div",null,{"className":"flex flex-col lg:flex-row gap-9","children":[["$","$L77",null,{"className":"flex-1","title":"About","children":["$","p",null,{"className":"whitespace-pre-wrap text-v0-gray-900","children":"v0 clone using the v0-sdk."}]}],["$","$L79",null,{"className":"w-full lg:w-80","children":[["$","$Le8",null,{"tags":"$dd:props:children:8:props:template:tags"}],["$","$Le9",null,{"templateUrl":"https://v0.app/templates/qvsOxt2ByeH"}],["$","$Leb",null,{"updatedAt":"$D2025-07-14T06:11:34.715Z"}]]}]]}]]}],["$","$2a",null,{"fallback":null,"children":"$Lec"}]]}] 2a:o2e3,ed:"ExplicitChatIdProvider" ee:I[903690,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$ed"] ef:I[838238,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"SWRDataProvider"] f0:Tf151,2a:of151,[V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { "primary-background": "#0a0a0a", surface: "#1a1a1a", "surface-elevated": "#2a2a2a", "surface-secondary": "#181818", "text-primary": "#ffffff", "text-secondary": "#a0a0a0", "text-muted": "#666666", "text-accent": "#00ff88", "interactive-primary": "#ffffff", "interactive-secondary": "#666666", "interactive-hover": "#333333", "interactive-active": "#444444", "interactive-border": "#333333", "status-success": "#00ff88", "status-warning": "#ffaa00", "status-error": "#ff4444", "status-info": "#0088ff", border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["var(--font-sans)", "Inter", "sans-serif"], mono: ["var(--font-mono)", "JetBrains Mono", "monospace"], }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/ui/v0-logo.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" export function VercelLogo(props: React.SVGProps) { return ( ) } [V0_FILE]typescriptreact:file="lib/v0-sdk.ts" isMerged="true" import { v0 } from 'v0-sdk' /** * Wrapper */ export class V0Client { static async createChat(options: { message: string system?: string modelId?: string imageGenerations?: boolean }): Promise<{ success: boolean chatUrl?: string previewUrl?: string chatId?: string error?: string }> { try { const request = { message: options.message, system: options.system || 'You are an expert React developer', modelConfiguration: { modelId: (options.modelId || 'v0-1.5-md') as 'v0-1.5-md' | 'v0-1.5-sm' | 'v0-1.5-lg', imageGenerations: options.imageGenerations || false, }, } const response: any = await v0.chats.create(request) return { success: true, chatUrl: response.url, previewUrl: response.demo, // iframe URL chatId: response.id, } } catch (error: any) { console.error('Error creating v0 chat:', error) if (error.status === 403) { return { success: false, error: 'Env error, verify your V0_API_KEY' } } else if (error.status === 429) { return { success: false, error: 'Limit rate reached' } } else if (error.status === 400) { return { success: false, error: 'Invalid input' } } return { success: false, error: error.message || 'Unknown error' } } } static async addMessage(options: { chatId: string message: string }): Promise<{ success: boolean previewUrl?: string error?: string }> { try { const request = { chatId: options.chatId, message: options.message, } const response: any = await v0.chats.createMessage(request) return { success: true, previewUrl: response.demo, } } catch (error: any) { console.error('Error adding message to v0 chat:', error) if (error.status === 403) { return { success: false, error: 'Auth error' } } else if (error.status === 404) { return { success: false, error: 'Chat not found' } } else if (error.status === 429) { return { success: false, error: 'Limit rate reached' } } return { success: false, error: error.message || 'Invalid input' } } } static async getChat(chatId: string): Promise<{ success: boolean chat?: any error?: string }> { try { const chat = await v0.chats.getById({ chatId }) return { success: true, chat: chat, } } catch (error: any) { console.error('Error getting v0 chat:', error) return { success: false, error: error.message || 'Error fetching chat' } } } static async getChatHistory(): Promise<{ success: boolean chats?: any[] error?: string }> { try { const chats: any = await v0.chats.find() return { success: true, chats: chats, } } catch (error: any) { console.error('Error getting v0 chat history:', error) return { success: false, error: error.message || 'Error fetching history' } } } } export { v0 } [V0_FILE]typescript:file="actions/generate-ui.ts" isMerged="true" 'use server' import { revalidatePath } from 'next/cache' import { z } from 'zod' import { V0Client } from '@/lib/v0-sdk' // Validation schemas const messageSchema = z.object({ message: z.string().min(1, 'Message is required').max(2000, 'Message too long'), }) const generateComponentSchema = z.object({ message: z.string().min(1, 'Message is required').max(2000, 'Message too long'), model: z.string().optional(), system: z.string().optional(), }) const addMessageSchema = z.object({ chatId: z.string().min(1, 'Chat ID is required'), message: z.string().min(1, 'Message is required').max(2000, 'Message too long'), }) // v0 server actions export async function generateComponentAction(formData: FormData) { try { const rawData = Object.fromEntries(formData.entries()) const validatedData = generateComponentSchema.parse(rawData) const result = await V0Client.createChat({ message: validatedData.message, system: validatedData.system, modelId: validatedData.model as 'v0-1.5-md' | 'v0-1.5-sm' | 'v0-1.5-lg', }) // Revalidate the path to update the UI revalidatePath('/') return result } catch (error) { console.error('Error in generateComponentAction:', error) if (error instanceof z.ZodError) { return { success: false, error: error.errors.map(e => e.message).join(', '), } } return { success: false, error: 'An unexpected error occurred', } } } export async function addMessageAction(formData: FormData) { try { const rawData = Object.fromEntries(formData.entries()) const validatedData = addMessageSchema.parse(rawData) const result = await V0Client.addMessage({ chatId: validatedData.chatId, message: validatedData.message, }) // Revalidate the path to update the UI revalidatePath('/') return result } catch (error) { console.error('Error in addMessageAction:', error) if (error instanceof z.ZodError) { return { success: false, error: error.errors.map(e => e.message).join(', '), } } return { success: false, error: 'An unexpected error occurred', } } } export async function getChatHistoryAction() { try { const result = await V0Client.getChatHistory() return result } catch (error) { console.error('Error in getChatHistoryAction:', error) return { success: false, error: 'An unexpected error occurred', } } } export async function getChatAction(chatId: string) { try { const result = await V0Client.getChat(chatId) return result } catch (error) { console.error('Error in getChatAction:', error) return { success: false, error: 'An unexpected error occurred', } } } export async function sendMessageAction(formData: FormData) { try { const rawData = Object.fromEntries(formData.entries()) const validatedData = messageSchema.parse(rawData) // Process the message (this would typically save to a database) console.log('Message received:', validatedData.message) // Revalidate the path to update the UI revalidatePath('/') return { success: true, message: 'Message sent successfully', } } catch (error) { console.error('Error in sendMessageAction:', error) if (error instanceof z.ZodError) { return { success: false, error: error.errors.map(e => e.message).join(', '), } } return { success: false, error: 'An unexpected error occurred', } } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata, Viewport } from 'next' import { Inter, JetBrains_Mono } from 'next/font/google' import { Providers } from '@/providers' import './globals.css' // Font configurations const inter = Inter({ subsets: ['latin'], variable: '--font-sans', display: 'swap', }) const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono', display: 'swap', }) // Metadata configuration export const metadata: Metadata = { title: { default: 'v0 by Vercel', template: '%s | v0 by Vercel', }, description: 'v0.dev', keywords: ['React', 'Next.js', 'TypeScript', 'AI', 'Component Generator', 'v0'], authors: [{ name: 'v0 by Vercel Team' }], creator: 'v0 by Vercel', metadataBase: new URL('https://v0.dev'), openGraph: { type: 'website', locale: 'en_US', title: 'v0 by Vercel', description: 'v0.dev', siteName: 'v0 by Vercel', }, twitter: { card: 'summary_large_image', title: 'v0 by Vercel', description: 'v0.dev', }, robots: { index: true, follow: true, }, } // Viewport configuration export const viewport: Viewport = { width: 'device-width', initialScale: 1, maximumScale: 1, userScalable: false, themeColor: [ { media: '(prefers-color-scheme: light)', color: 'white' }, { media: '(prefers-color-scheme: dark)', color: '#0a0a0a' }, ], } // Root layout component export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/layout/header.tsx" isMoved="true" isMerged="true" import { Avatar, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { VercelLogo } from "@/components/ui/v0-logo" import { ChevronsUpDown, ChevronDown, GitFork, Github, Settings } from "lucide-react" const RadixLockIcon = ({ className }: { className?: string }) => ( ) interface HeaderProps { className?: string } export function Header({ className }: HeaderProps) { return (

/ / /

Publish to Vercel Export Code

) } [V0_FILE]typescriptreact:file="components/layout/resizable-layout.tsx" isMerged="true" 'use client' import { useState, useRef, useCallback, useEffect } from 'react' import { cn } from '@/lib/utils' import { useApp } from '@/providers' import { SIDEBAR_CONFIG } from '@/config/constants' import type { ResizableLayoutProps } from '@/types' interface ResizableLayoutComponentProps extends ResizableLayoutProps { sidebarContent: React.ReactNode mainContent: React.ReactNode className?: string } export function ResizableLayout({ sidebarContent, mainContent, defaultSidebarWidth = SIDEBAR_CONFIG.DEFAULT_WIDTH, minSidebarWidth = SIDEBAR_CONFIG.MIN_WIDTH, maxSidebarWidth = SIDEBAR_CONFIG.MAX_WIDTH, className }: ResizableLayoutComponentProps) { const { sidebarWidth, setSidebarWidth } = useApp() const [isResizing, setIsResizing] = useState(false) const sidebarRef = useRef(null) const resizeTimeoutRef = useRef(null) // Initialize sidebar width on mount useEffect(() => { if (sidebarWidth === 0) { setSidebarWidth(defaultSidebarWidth) } }, [sidebarWidth, setSidebarWidth, defaultSidebarWidth]) // Debounced resize function to prevent excessive updates const debouncedSetSidebarWidth = useCallback((width: number) => { if (resizeTimeoutRef.current) { clearTimeout(resizeTimeoutRef.current) } resizeTimeoutRef.current = setTimeout(() => { setSidebarWidth(width) }, 0) }, [setSidebarWidth]) const handleMouseDown = useCallback((e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() setIsResizing(true) document.body.style.cursor = 'col-resize' document.body.style.userSelect = 'none' }, []) const handleMouseMove = useCallback((e: MouseEvent) => { if (!sidebarRef.current || !isResizing) return const containerLeft = sidebarRef.current.parentElement!.getBoundingClientRect().left const newWidth = e.clientX - containerLeft const clampedWidth = Math.max(minSidebarWidth, Math.min(newWidth, maxSidebarWidth)) // Update width immediately for smooth visual feedback if (sidebarRef.current) { sidebarRef.current.style.width = `${clampedWidth}px` } // Debounce the context update to prevent excessive re-renders debouncedSetSidebarWidth(clampedWidth) }, [isResizing, minSidebarWidth, maxSidebarWidth, debouncedSetSidebarWidth]) const handleMouseUp = useCallback(() => { setIsResizing(false) document.body.style.cursor = '' document.body.style.userSelect = '' }, []) // Event listeners for mouse events useEffect(() => { if (isResizing) { const handleMouseMoveGlobal = (e: MouseEvent) => handleMouseMove(e) const handleMouseUpGlobal = () => handleMouseUp() window.addEventListener('mousemove', handleMouseMoveGlobal) window.addEventListener('mouseup', handleMouseUpGlobal) return () => { window.removeEventListener('mousemove', handleMouseMoveGlobal) window.removeEventListener('mouseup', handleMouseUpGlobal) } } }, [isResizing, handleMouseMove, handleMouseUp]) // Cleanup timeout on unmount useEffect(() => { return () => { if (resizeTimeoutRef.current) { clearTimeout(resizeTimeoutRef.current) } } }, []) const currentWidth = sidebarWidth || defaultSidebarWidth return (

{sidebarContent}

{mainContent}

) } [V0_FILE]typescriptreact:file="components/features/chat/chat-input.tsx" isMerged="true" import { type FormEvent, type KeyboardEvent } from 'react' import { Button } from '@/components/ui/button' import { Textarea } from '@/components/ui/textarea' import { ArrowUp, Paperclip, Sparkles } from 'lucide-react' import { cn } from '@/lib/utils' import { UI_CONFIG } from '@/config/constants' interface ChatInputProps { value: string onChange: (value: string) => void onSubmit: (e: FormEvent) => void isLoading?: boolean placeholder?: string className?: string } export function ChatInput({ value, onChange, onSubmit, isLoading = false, placeholder = 'Ask a follow-up...', className }: ChatInputProps) { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault() onSubmit(e as any) } } return (

onChange(e.target.value)}
        placeholder={placeholder}
        className="resize-none border-interactive-border bg-surface pr-24"
        style={{ minHeight: `${UI_CONFIG.TEXTAREA_MIN_HEIGHT}px` }}
        onKeyDown={handleKeyDown}
        disabled={isLoading}
      />
      <div className="absolute bottom-2 right-2 flex items-center gap-2">
        <Button 
          type="button"
          variant="ghost" 
          size="icon" 
          className="h-7 w-7 text-text-secondary hover:bg-interactive-hover"
          disabled={isLoading}
        >
          <Sparkles className="h-4 w-4" />
        </Button>
        <Button 
          type="button"
          variant="ghost" 
          size="icon" 
          className="h-7 w-7 text-text-secondary hover:bg-interactive-hover"
          disabled={isLoading}
        >
          <Paperclip className="h-4 w-4" />
        </Button>
        <Button
          type="submit"
          disabled={isLoading || !value.trim()}
          size="icon"
          className="h-7 w-7 bg-interactive-hover text-text-primary hover:bg-interactive-active"
        >
          <ArrowUp className="h-4 w-4" />
        </Button>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/features/chat/chat-message.tsx" isMerged="true"
import { Bot } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { Message } from '@/types'

interface ChatMessageProps {
  message: Message
  className?: string
}

export function ChatMessage({ message, className }: ChatMessageProps) {
  const isUser = message.role === 'user'
  const isAssistant = message.role === 'assistant'

return (
    <div className={cn('flex gap-3', isUser ? 'justify-end' : 'justify-start', className)}>
      {isAssistant && <Bot className="h-5 w-5 shrink-0 text-text-primary" />}
      <div
        className={cn(
          'max-w-[85%] rounded-lg p-3',
          isUser 
            ? 'bg-interactive-active text-text-primary' 
            : 'bg-surface text-text-primary'
        )}
      >
        <p className="whitespace-pre-wrap">{message.content}</p>
        {message.timestamp && (
          <time className="mt-1 block text-xs text-text-muted">
            {new Date(message.timestamp).toLocaleTimeString()}
          </time>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/features/chat/model-selector.tsx" isMerged="true"
import { Button } from '@/components/ui/button'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { 
  DropdownMenu, 
  DropdownMenuContent, 
  DropdownMenuItem, 
  DropdownMenuSeparator, 
  DropdownMenuTrigger 
} from '@/components/ui/dropdown-menu'
import { BarChart, ChevronDown, Check } from 'lucide-react'
import { useApp } from '@/providers'
import { cn } from '@/lib/utils'

interface ModelSelectorProps {
  className?: string
}

export function ModelSelector({ className }: ModelSelectorProps) {
  const { selectedModel, setSelectedModel, getAvailableModels, features, toggleFeature } = useApp()
  const models = getAvailableModels()

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          className={cn(
            'flex items-center gap-1 text-sm text-text-secondary hover:bg-white/5',
            className
          )}
        >
          <BarChart className="h-4 w-4 text-status-success" />
          {selectedModel}
          <ChevronDown className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="start"
        className="w-[--radix-dropdown-menu-trigger-width] bg-[rgba(20,20,21,1)]"
      >
        {models.map((model) => (
          <DropdownMenuItem key={model.id} onSelect={() => setSelectedModel(model.id)}>
            <div className="flex items-center justify-between w-full">
              <div className="flex flex-col">
                <span>{model.name}</span>
                {model.description && (
                  <span className="text-xs text-text-muted">{model.description}</span>
                )}
              </div>
              {selectedModel === model.id && <Check className="h-4 w-4" />}
            </div>
          </DropdownMenuItem>
        ))}
        <DropdownMenuSeparator />
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          <div className="flex w-full items-center justify-between">
            <Label htmlFor="generate-images" className="font-normal">
              Generate Images
            </Label>
            <Switch 
              id="generate-images"
              checked={features.imageGeneration}
              onCheckedChange={() => toggleFeature('imageGeneration')}
            />
          </div>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/features/files/file-explorer.tsx" isMerged="true"
import { CheckCircle, ChevronDown } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { GeneratedFile } from '@/types'
import { FILE_STATUS } from '@/config/constants'

interface FileExplorerProps {
  files?: GeneratedFile[]
  className?: string
}

const defaultFiles: GeneratedFile[] = [
  { name: 'components/chat-form.tsx', content: '', status: 'generated', type: 'component' },
  { name: 'components/autoresize-textarea.tsx', content: '', status: 'generated', type: 'component' },
  { name: 'app/page.tsx', content: '', status: 'generated', type: 'page' },
  { name: 'app/layout.tsx', content: '', status: 'generated', type: 'page' },
  { name: 'app/api/chat/route.ts', content: '', status: 'generated', type: 'api' },
]

export function FileExplorer({ files = defaultFiles, className }: FileExplorerProps) {
  const getStatusColor = (status: string) => {
    switch (status) {
      case FILE_STATUS.GENERATED:
        return 'text-status-success'
      case FILE_STATUS.MODIFIED:
        return 'text-status-warning'
      case FILE_STATUS.UNCHANGED:
        return 'text-text-muted'
      default:
        return 'text-text-muted'
    }
  }

const getStatusText = (status: string) => {
    switch (status) {
      case FILE_STATUS.GENERATED:
        return 'Generated'
      case FILE_STATUS.MODIFIED:
        return 'Modified'
      case FILE_STATUS.UNCHANGED:
        return 'Unchanged'
      default:
        return 'Unknown'
    }
  }

return (
    <div className={cn('rounded-md border border-interactive-border bg-surface p-2 font-mono text-sm', className)}>
      <div className="flex items-center justify-between px-2 py-1">
        <div className="flex items-center gap-2">
          <ChevronDown className="h-4 w-4" />
          <span className="text-text-primary">Version 1</span>
        </div>
        <div className="flex items-center gap-2">
          <span className="rounded bg-interactive-hover px-1.5 py-0.5 text-xs text-text-secondary">
            Latest
          </span>
          <span className="rounded bg-interactive-active px-1.5 py-0.5 text-xs text-text-primary">
            Viewing
          </span>
        </div>
      </div>
      <ul className="mt-2 space-y-1 pl-4">
        {files.map((file) => (
          <li key={file.name} className="flex items-center justify-between gap-4">
            <div className="flex min-w-0 items-center gap-2 text-text-secondary">
              <CheckCircle className={cn('h-4 w-4 shrink-0', getStatusColor(file.status))} />
              <span className="whitespace-nowrap truncate" title={file.name}>
                {file.name}
              </span>
            </div>
            <span className="text-text-muted shrink-0">
              {getStatusText(file.status)}
            </span>
          </li>
        ))}
      </ul>
    </div>
  )
}
[V0_FILE]typescript:file="config/constants.ts" isMerged="true"
import type { V0Model, AppConfig } from '@/types'

// Layout constants
export const SIDEBAR_CONFIG = {
    MIN_WIDTH: 240,
    MAX_WIDTH: 500,
    DEFAULT_WIDTH: 320,
} as const

// Available models
export const AVAILABLE_MODELS: V0Model[] = [
    {
        id: 'v0-1.5-sm',
        name: 'v0-1.5-sm',
        description: 'Small model - Fast generation',
        isAvailable: true,
    },
    {
        id: 'v0-1.5-md',
        name: 'v0-1.5-md',
        description: 'Medium model - Balanced performance',
        isAvailable: true,
    },
    {
        id: 'v0-1.5-lg',
        name: 'v0-1.5-lg',
        description: 'Large model - High quality',
        isAvailable: true,
    },
]

// App configuration
export const APP_CONFIG: AppConfig = {
    models: AVAILABLE_MODELS,
    defaultModel: 'v0-1.5-md',
    features: {
        imageGeneration: true,
        codeExport: true,
        realTimePreview: true,
    },
}

// UI Constants
export const UI_CONFIG = {
    HEADER_HEIGHT: 48, // 12 * 4 = 48px
    ANIMATION_DURATION: 200,
    TEXTAREA_MIN_HEIGHT: 96, // 24 * 4 = 96px
} as const

// Status types for file explorer
export const FILE_STATUS = {
    GENERATED: 'generated',
    MODIFIED: 'modified',
    UNCHANGED: 'unchanged',
} as const
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

// Main utility function for combining classes
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescript:file="lib/utils/format.ts" isMerged="true"
/**
 * Format utilities for the application
 */

export function formatDate(date: Date): string {
    return new Intl.DateTimeFormat('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
    }).format(date)
}

export function formatRelativeTime(date: Date): string {
    const now = new Date()
    const diff = now.getTime() - date.getTime()
    const seconds = Math.floor(diff / 1000)
    const minutes = Math.floor(seconds / 60)
    const hours = Math.floor(minutes / 60)
    const days = Math.floor(hours / 24)

if (seconds < 60) {
        return 'just now'
    } else if (minutes < 60) {
        return `${minutes}m ago`
    } else if (hours < 24) {
        return `${hours}h ago`
    } else if (days < 7) {
        return `${days}d ago`
    } else {
        return formatDate(date)
    }
}

export function formatFileSize(bytes: number): string {
    const sizes = ['B', 'KB', 'MB', 'GB']
    if (bytes === 0) return '0 B'

const i = Math.floor(Math.log(bytes) / Math.log(1024))
    const size = bytes / Math.pow(1024, i)

return `${size.toFixed(1)} ${sizes[i]}`
}

export function truncateText(text: string, maxLength: number): string {
    if (text.length <= maxLength) return text
    return `${text.substring(0, maxLength)}...`
}

export function slugify(text: string): string {
    return text
        .toLowerCase()
        .replace(/[^\w\s-]/g, '')
        .replace(/[\s_-]+/g, '-')
        .replace(/^-+|-+$/g, '')
}

export function generateId(): string {
    return Math.random().toString(36).substring(2) + Date.now().toString(36)
}
[V0_FILE]typescript:file="lib/utils/validation.ts" isMerged="true"
/**
 * Validation utilities for the application
 */

export function isValidEmail(email: string): boolean {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return emailRegex.test(email)
}

export function isValidUrl(url: string): boolean {
    try {
        new URL(url)
        return true
    } catch {
        return false
    }
}

export function isValidPrompt(prompt: string): boolean {
    return prompt.trim().length > 0 && prompt.trim().length <= 1000
}

export function sanitizeInput(input: string): string {
    return input.trim().replace(/[<>]/g, '')
}

export function isValidFileSize(size: number, maxSize: number = 10 * 1024 * 1024): boolean {
    return size > 0 && size <= maxSize
}

export function isValidImageType(type: string): boolean {
    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
    return validTypes.includes(type)
}

export function validateRequired(value: string, fieldName: string): string | null {
    if (!value || value.trim().length === 0) {
        return `${fieldName} is required`
    }
    return null
}

export function validateLength(
    value: string,
    min: number,
    max: number,
    fieldName: string
): string | null {
    if (value.length < min) {
        return `${fieldName} must be at least ${min} characters`
    }
    if (value.length > max) {
        return `${fieldName} must be no more than ${max} characters`
    }
    return null
}
[V0_FILE]typescriptreact:file="providers/app-provider.tsx" isMerged="true"
'use client'

import { createContext, useContext, useState, type ReactNode } from 'react'
import type { V0Model } from '@/types'
import { APP_CONFIG } from '@/config/constants'

// App Context Types
interface AppState {
  selectedModel: string
  previewUrl: string | null
  isGenerating: boolean
  sidebarWidth: number
  features: {
    imageGeneration: boolean
    codeExport: boolean
    realTimePreview: boolean
  }
}

interface AppContextType extends AppState {
  setSelectedModel: (model: string) => void
  setPreviewUrl: (url: string | null) => void
  setIsGenerating: (generating: boolean) => void
  setSidebarWidth: (width: number) => void
  toggleFeature: (feature: keyof AppState['features']) => void
  getAvailableModels: () => V0Model[]
}

// Initial state
const initialState: AppState = {
  selectedModel: APP_CONFIG.defaultModel,
  previewUrl: null,
  isGenerating: false,
  sidebarWidth: 320,
  features: { ...APP_CONFIG.features },
}

// Context
const AppContext = createContext<AppContextType | undefined>(undefined)

// Provider
interface AppProviderProps {
  children: ReactNode
}

export function AppProvider({ children }: AppProviderProps) {
  const [selectedModel, setSelectedModel] = useState(initialState.selectedModel)
  const [previewUrl, setPreviewUrl] = useState<string | null>(initialState.previewUrl)
  const [isGenerating, setIsGenerating] = useState(initialState.isGenerating)
  const [sidebarWidth, setSidebarWidth] = useState(initialState.sidebarWidth)
  const [features, setFeatures] = useState(initialState.features)

const toggleFeature = (feature: keyof AppState['features']) => {
    setFeatures(prev => ({
      ...prev,
      [feature]: !prev[feature],
    }))
  }

const getAvailableModels = () => {
    return APP_CONFIG.models.filter(model => model.isAvailable)
  }

const contextValue: AppContextType = {
    selectedModel,
    previewUrl,
    isGenerating,
    sidebarWidth,
    features,
    setSelectedModel,
    setPreviewUrl,
    setIsGenerating,
    setSidebarWidth,
    toggleFeature,
    getAvailableModels,
  }

return <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>
}

// Hook to use the app context
export function useApp() {
  const context = useContext(AppContext)
  if (context === undefined) {
    throw new Error('useApp must be used within an AppProvider')
  }
  return context
}
[V0_FILE]typescriptreact:file="providers/chat-provider.tsx" isMerged="true"
'use client'

import { createContext, useContext, useReducer, type ReactNode } from 'react'
import type { Message, ChatSession } from '@/types'

// Chat Context Types
interface ChatState {
  currentSession: ChatSession | null
  messages: Message[]
  isLoading: boolean
  error: string | null
}

interface ChatContextType extends ChatState {
  sendMessage: (content: string) => Promise<void>
  clearMessages: () => void
  setLoading: (loading: boolean) => void
  setError: (error: string | null) => void
}

// Actions
type ChatAction =
  | { type: 'SET_MESSAGES'; payload: Message[] }
  | { type: 'ADD_MESSAGE'; payload: Message }
  | { type: 'SET_LOADING'; payload: boolean }
  | { type: 'SET_ERROR'; payload: string | null }
  | { type: 'CLEAR_MESSAGES' }
  | { type: 'SET_SESSION'; payload: ChatSession }

// Initial state
const initialState: ChatState = {
  currentSession: null,
  messages: [],
  isLoading: false,
  error: null,
}

// Reducer
function chatReducer(state: ChatState, action: ChatAction): ChatState {
  switch (action.type) {
    case 'SET_MESSAGES':
      return { ...state, messages: action.payload }
    case 'ADD_MESSAGE':
      return { ...state, messages: [...state.messages, action.payload] }
    case 'SET_LOADING':
      return { ...state, isLoading: action.payload }
    case 'SET_ERROR':
      return { ...state, error: action.payload }
    case 'CLEAR_MESSAGES':
      return { ...state, messages: [], error: null }
    case 'SET_SESSION':
      return { ...state, currentSession: action.payload, messages: action.payload.messages }
    default:
      return state
  }
}

// Context
const ChatContext = createContext<ChatContextType | undefined>(undefined)

// Provider
interface ChatProviderProps {
  children: ReactNode
}

export function ChatProvider({ children }: ChatProviderProps) {
  const [state, dispatch] = useReducer(chatReducer, initialState)

const sendMessage = async (content: string): Promise<void> => {
    if (!content.trim()) return

const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content,
      timestamp: new Date(),
    }

dispatch({ type: 'ADD_MESSAGE', payload: userMessage })
    dispatch({ type: 'SET_LOADING', payload: true })
    dispatch({ type: 'SET_ERROR', payload: null })

try {
      // This will be implemented in the component that uses this context
      // For now, we just add the message
    } catch (error) {
      dispatch({ type: 'SET_ERROR', payload: 'Failed to send message' })
    } finally {
      dispatch({ type: 'SET_LOADING', payload: false })
    }
  }

const clearMessages = () => {
    dispatch({ type: 'CLEAR_MESSAGES' })
  }

const setLoading = (loading: boolean) => {
    dispatch({ type: 'SET_LOADING', payload: loading })
  }

const setError = (error: string | null) => {
    dispatch({ type: 'SET_ERROR', payload: error })
  }

const contextValue: ChatContextType = {
    ...state,
    sendMessage,
    clearMessages,
    setLoading,
    setError,
  }

return <ChatContext.Provider value={contextValue}>{children}</ChatContext.Provider>
}

// Hook to use the chat context
export function useChat() {
  const context = useContext(ChatContext)
  if (context === undefined) {
    throw new Error('useChat must be used within a ChatProvider')
  }
  return context
}
[V0_FILE]typescript:file="types/types.ts" isMerged="true"
// Chat and Message types
export interface Message {
    id: string
    role: 'user' | 'assistant' | 'system'
    content: string
    timestamp?: Date
}

export interface ChatSession {
    id: string
    messages: Message[]
    createdAt: Date
    updatedAt: Date
}

// Component generation types
export interface ComponentGenerationRequest {
    message: string
    system?: string
    model?: string
}

export interface ComponentGenerationResponse {
    success: boolean
    demoUrl?: string
    aiMessage?: string
    error?: string
    generatedFiles?: GeneratedFile[]
}

export interface GeneratedFile {
    name: string
    content: string
    status: 'generated' | 'modified' | 'unchanged'
    type: 'component' | 'page' | 'api' | 'config'
}

// UI Component types
export interface ResizableLayoutProps {
    defaultSidebarWidth?: number
    minSidebarWidth?: number
    maxSidebarWidth?: number
}

export interface PreviewPanelProps {
    previewUrl: string | null
    isLoading?: boolean
}

export interface SidebarProps {
    setPreviewUrl: (url: string | null) => void
    className?: string
}

// Model and Configuration types
export interface V0Model {
    id: string
    name: string
    description?: string
    isAvailable: boolean
}

export interface AppConfig {
    models: V0Model[]
    defaultModel: string
    features: {
        imageGeneration: boolean
        codeExport: boolean
        realTimePreview: boolean
    }
}

// V0 API types (oficial - compatibles con OpenAI)
export interface V0ApiMessage {
    role: 'user' | 'assistant' | 'system'
    content: string
}

export interface V0ApiRequest {
    model: string
    messages: V0ApiMessage[]
    stream?: boolean
    tools?: any[]
    tool_choice?: string | object
}

export interface V0ApiResponse {
    id: string
    object: string
    created: number
    choices: Array<{
        index: number
        message: {
            role: string
            content: string
        }
        finish_reason: string
    }>
}

export interface V0StreamResponse {
    id: string
    object: string
    choices: Array<{
        delta: {
            role?: string
            content?: string
        }
        index: number
        finish_reason: string | null
    }>
}
[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
    // Add security headers
    const response = NextResponse.next()

// Security headers
    response.headers.set('X-Frame-Options', 'DENY')
    response.headers.set('X-Content-Type-Options', 'nosniff')
    response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin')
    response.headers.set('X-XSS-Protection', '1; mode=block')

// CSP for development - adjust for production
    if (process.env.NODE_ENV === 'development') {
        response.headers.set(
            'Content-Security-Policy',
            "default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; frame-src 'self' https://*.vusercontent.net https://*.v0.dev https://v0.dev;"
        )
    } else {
        // Production CSP - more restrictive but allows v0 iframes
        response.headers.set(
            'Content-Security-Policy',
            "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; frame-src 'self' https://*.vusercontent.net https://*.v0.dev https://v0.dev; connect-src 'self' https://api.v0.dev;"
        )
    }

return response
}

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - api (API routes)
         * - _next/static (static files)
         * - _next/image (image optimization files)
         * - favicon.ico (favicon file)
         * - public folder
         */
        '/((?!api|_next/static|_next/image|favicon.ico|public/).*)',
    ],
}
[V0_FILE]typescriptreact:file="providers/index.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type { ReactNode } from "react"
import { ThemeProvider } from "next-themes"
import { AppProvider, useApp } from "./app-provider"
import { ChatProvider, useChat } from "./chat-provider"

interface ProvidersProps {
  children: ReactNode
}

export function Providers({ children }: ProvidersProps) {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} disableTransitionOnChange>
      <AppProvider>
        <ChatProvider>{children}</ChatProvider>
      </AppProvider>
    </ThemeProvider>
  )
}

export { useApp, useChat };
[V0_FILE]typescriptreact:file="components/features/chat/chat-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, type FormEvent } from "react"
import { Button } from "@/components/ui/button"
import { FileExplorer } from "@/components/features/files/file-explorer"
import { ChatMessage } from "./chat-message"
import { ChatInput } from "./chat-input"
import { ModelSelector } from "./model-selector"
import { Bot } from "lucide-react"
import { cn } from "@/lib/utils"
import { useChat, useApp } from "@/providers"
import { generateComponentAction } from "@/actions/generate-ui"

export function ChatSidebar({ className }: { className?: string }) {
  const { messages, isLoading, sendMessage, setError } = useChat()
  const { setIsGenerating, setPreviewUrl: setAppPreviewUrl } = useApp()
  const [input, setInput] = useState("")

const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!input.trim() || isLoading) return

try {
      setIsGenerating(true)
      await sendMessage(input)

// Generate component using server action
      const formData = new FormData()
      formData.append("message", input)
      formData.append("system", "You are an expert React developer")
      formData.append("model", "v0-1.5-md")

const result = await generateComponentAction(formData)

if (result.success && result.previewUrl) {
        setAppPreviewUrl(result.previewUrl)
      } else {
        setError(result.error || "Failed to generate component")
      }
    } catch (error) {
      setError("An unexpected error occurred")
    } finally {
      setIsGenerating(false)
      setInput("")
    }
  }

return (
    <aside className={cn("flex h-full flex-col overflow-hidden rounded-lg bg-[rgba(15,15,15,1)]", className)}>
      {/* Header */}
      <div className="flex h-12 items-center justify-between border-b border-interactive-border px-3">
        <div className="flex items-center gap-2">
          <Button variant="ghost" className="h-auto p-1 text-text-primary hover:bg-interactive-hover">
            Chat
          </Button>
          <Button variant="ghost" className="h-auto p-1 text-text-secondary hover:bg-interactive-hover">
            Design
          </Button>
        </div>
      </div>

{/* Messages */}
      <div className="flex-1 space-y-4 overflow-y-auto p-4 text-sm">
        {messages.length === 0 && (
          <div className="flex items-start gap-3">
            
            <div className="flex-1">
              
            </div>
          </div>
        )}

{messages.map((message) => (
          <ChatMessage key={message.id} message={message} />
        ))}

{messages.length > 0 && (
          <div className="mt-4">
            <FileExplorer />
          </div>
        )}
      </div>

{/* Input */}
      <div className="border-t border-interactive-border p-4">
        <ChatInput
          value={input}
          onChange={setInput}
          onSubmit={handleSubmit}
          isLoading={isLoading}
          placeholder="Ask a follow-up..."
        />
        <div className="mt-2 flex items-center justify-between">
          <ModelSelector />
        </div>
      </div>
    </aside>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Header } from "@/components/layout/header"
import { ResizableLayout } from "@/components/layout/resizable-layout"
import { ChatSidebar } from "@/components/features/chat/chat-sidebar"
import { PreviewPanel } from "@/components/features/preview/preview-panel"

export default function V0ClonePage() {
  return (
    <div className="flex h-screen w-full flex-col bg-primary-background font-sans text-text-primary">
      <Header />
      <div className="flex-1 overflow-hidden px-2 pt-2">
        <ResizableLayout
          sidebarContent={<ChatSidebar />}
          mainContent={<PreviewPanel className="rounded-lg overflow-hidden" />}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/features/preview/preview-panel.tsx" isEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ChevronLeft, ChevronRight, RefreshCw, ExternalLink, Maximize2 } from "lucide-react"
import { cn } from "@/lib/utils"
import { useApp, useChat } from "@/providers"
import { VercelLogo } from "@/components/ui/v0-logo"
import LoadingState from "./loading-state"

interface PreviewPanelProps {
  className?: string
}

const DefaultContent = () => (
  <div className="flex h-full items-center justify-center p-8 text-center bg-[rgba(10,10,10,1)]">
    <div className="flex flex-col items-center gap-4">
      <VercelLogo className="h-10 w-10 text-gray-300" />
      <h2 className="text-xl font-medium text-gray-500">Preview</h2>
    </div>
  </div>
)

const ErrorContent = ({ error }: { error: string }) => (
  <div className="flex h-full items-center justify-center p-8">
    <div className="flex flex-col items-center gap-4 text-center">
      <div className="rounded-full bg-red-100 p-4">
        <svg className="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      </div>
      <h2 className="text-xl font-semibold text-gray-900">Error Generating Component</h2>
      <p className="text-gray-600 max-w-md">{error}</p>
      <Button variant="outline" onClick={() => window.location.reload()} className="mt-4">
        Retry
      </Button>
    </div>
  </div>
)

export function PreviewPanel({ className }: { className?: string }) {
  const { previewUrl, isGenerating: isLoading } = useApp()
  const { error } = useChat()

const isError = !!error
  const errorMessage = error

return (
    <div className={cn("flex h-full flex-col", className)}>
      <div className="flex h-12 items-center gap-4 border-b border-gray-800 px-4 shadow-sm bg-[rgba(15,15,15,1)]">
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400" disabled={!previewUrl}>
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400" disabled={!previewUrl}>
            <ChevronRight className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400" disabled={!previewUrl}>
            <RefreshCw className="h-4 w-4" />
          </Button>
        </div>

<div className="flex items-center gap-2">
          {previewUrl && (
            <>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 text-gray-600 hover:text-gray-900"
                onClick={() => window.open(previewUrl, "_blank")}
                title="Open in new tab"
              >
                <ExternalLink className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 text-gray-600 hover:text-gray-900"
                title="Fullscreen"
              >
                <Maximize2 className="h-4 w-4" />
              </Button>
            </>
          )}
        </div>
      </div>

<div className="flex-1 bg-white overflow-hidden">
        {isLoading ? (
          <LoadingState />
        ) : isError ? (
          <ErrorContent error={errorMessage || "Unknown error"} />
        ) : previewUrl ? (
          <iframe
            src={previewUrl}
            className="h-full w-full border-0"
            title="v0 Component Preview"
            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
            loading="lazy"
          />
        ) : (
          <DefaultContent />
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/features/preview/loading-state.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useEffect, useState, useRef } from "react"
import { Loader2 } from "lucide-react"

// Define our code sequences
const CODE_SEQUENCES = [
  {
    status: "Adding the button",
    lines: [
      "function Button({ children, onClick, variant = 'primary' }) {",
      "  return (",
      "    <button",
      "      onClick={onClick}",
      "      className={`btn btn-${variant} rounded-md px-4 py-2`}>",
      "      {children}",
      "    </button>",
      "  );",
      "}",
    ],
  },
  {
    status: "Configuring styles",
    lines: [
      "const buttonStyles = {",
      "  primary: 'bg-blue-600 text-white hover:bg-blue-700',",
      "  secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',",
      "  danger: 'bg-red-600 text-white hover:bg-red-700',",
      "  success: 'bg-green-600 text-white hover:bg-green-700',",
      "  outline: 'bg-transparent border border-current hover:bg-gray-100'",
      "}",
    ],
  },
  {
    status: "Setting up event handlers",
    lines: [
      "const handleClick = (event) => {",
      "  if (isLoading) return;",
      "  setIsLoading(true);",
      "  onClick?.(event);",
      "  setTimeout(() => setIsLoading(false), 1000);",
      "  analytics.track('button_clicked', { buttonId });",
      "}",
    ],
  },
]

const SyntaxHighlighter = ({ code }: { code: string }) => {
  const highlighted = code
    .replace(/"(.*?)"/g, '<span class="text-green-300">"$1"</span>')
    .replace(/'(.*?)'/g, "<span class=\"text-green-300\">'$1'</span>")
    .replace(
      /\b(function|return|const|let|var|if|else|export|default|import|from|new|async|await|=>)\b/g,
      '<span class="text-fuchsia-400">$1</span>',
    )
    .replace(/\b([A-Z][a-zA-Z0-9_]+)\b/g, '<span class="text-cyan-300">$1</span>')
    .replace(/({|})/g, '<span class="text-yellow-300">$1</span>')
    .replace(/($$|$$)/g, '<span class="text-purple-300">$1</span>')
    .replace(/(\[|\])/g, '<span class="text-orange-300">$1</span>')
    .replace(/(\w+)=/g, '<span class="text-sky-300">$1</span>=')
    .replace(/\b(\d+)\b/g, '<span class="text-amber-300">$1</span>')
    .replace(/(\/\/.*)/g, '<span class="text-gray-500">$1</span>')

return <pre className="text-text-primary flex-1" dangerouslySetInnerHTML={{ __html: highlighted }} />
}

export default function LoadingState() {
  const [sequenceIndex, setSequenceIndex] = useState(0)
  const [visibleLines, setVisibleLines] = useState<Array<{ text: string; number: number }>>([])
  const [scrollPosition, setScrollPosition] = useState(0)
  const codeContainerRef = useRef<HTMLDivElement>(null)
  const lineHeight = 24 // Approximate line height in pixels

const currentSequence = CODE_SEQUENCES[sequenceIndex]
  const totalLines = currentSequence.lines.length

// Initialize visible lines
  useEffect(() => {
    const initialLines = []
    for (let i = 0; i < Math.min(5, totalLines); i++) {
      initialLines.push({
        text: currentSequence.lines[i],
        number: i + 1,
      })
    }
    setVisibleLines(initialLines)
    setScrollPosition(0)
  }, [sequenceIndex, currentSequence.lines, totalLines])

// Handle line advancement
  useEffect(() => {
    const advanceTimer = setInterval(() => {
      // Get the current first visible line index
      const firstVisibleLineIndex = Math.floor(scrollPosition / lineHeight)
      const nextLineIndex = (firstVisibleLineIndex + 3) % totalLines

// If we're about to wrap around, move to next sequence
      if (nextLineIndex < firstVisibleLineIndex && nextLineIndex !== 0) {
        setSequenceIndex((prevIndex) => (prevIndex + 1) % CODE_SEQUENCES.length)
        return
      }

// Add the next line if needed
      if (nextLineIndex >= visibleLines.length && nextLineIndex < totalLines) {
        setVisibleLines((prevLines) => [
          ...prevLines,
          {
            text: currentSequence.lines[nextLineIndex],
            number: nextLineIndex + 1,
          },
        ])
      }

// Scroll to the next line
      setScrollPosition((prevPosition) => prevPosition + lineHeight)
    }, 1500)

return () => clearInterval(advanceTimer)
  }, [scrollPosition, visibleLines, totalLines, sequenceIndex, currentSequence.lines, lineHeight])

// Apply scroll position
  useEffect(() => {
    if (codeContainerRef.current) {
      codeContainerRef.current.scrollTop = scrollPosition
    }
  }, [scrollPosition])

return (
    <div className="flex h-full w-full items-center justify-center bg-primary-background">
      <div className="w-full max-w-xl space-y-4 p-4">
        {/* Status line with spinner */}
        <div className="flex items-center space-x-3 font-medium text-text-secondary">
          <Loader2 className="h-5 w-5 animate-spin" />
          <span>{currentSequence.status}...</span>
        </div>

{/* Code display with line numbers */}
        <div className="relative">
          <div
            ref={codeContainerRef}
            className="relative h-[72px] w-full overflow-hidden font-mono text-sm"
            style={{ scrollBehavior: "smooth" }}
          >
            <div>
              {visibleLines.map((line, index) => (
                <div key={index} className="flex h-[24px]">
                  {/* Line number */}
                  <div className="w-8 select-none pr-4 text-right text-text-muted">{line.number}</div>

{/* Code content */}
                  <SyntaxHighlighter code={line.text} />
                </div>
              ))}
            </div>
          </div>

{/* Linear gradient overlay */}
          <div
            className="pointer-events-none absolute inset-0"
            style={{
              background:
                "linear-gradient(to bottom, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.5) 30%, rgba(10, 10, 10, 0) 100%)",
              zIndex: 10,
            }}
          />
        </div>
      </div>
    </div>
  )
}2a:o1e3,e7:["$","$Lee",null,{"chatId":"FtTVVXe4wxp","children":["$","$Lef",null,{"data":{"@\"active-block\",\"FtTVVXe4wxp\",":{"id":"b_5I9EB1dM16D","messageId":"TxbuPliyTLfoypOofWzSVVOfHmqkpPvL","source":"$f0","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"v0-clone-interface","type":"code-project","project":"v0-clone-interface"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"FtTVVXe4wxp\",":false},"children":"$Lf1"}]}]
2a:o60a,f2:"PublishedPageProvider"
f3:I[845210,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$f2"]
f4:"FullscreenContainer"
f5:I[481556,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$f4"]
f6:"TemplateBlockViewClient"
f7:I[552151,["$2f","$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73"],"$f6"]
f1:["$","$Lf3",null,{"children":["$","$Lf5",null,{"mode":"$undefined","children":["$","$Lf7",null,{"block":"$e7:props:children:props:data:@\"active-block\",\"FtTVVXe4wxp\",","allowMobileFullscreen":true,"initialSize":"$undefined","title":"v0 Community Starter","templateCanonId":"qvsOxt2ByeH","templateVersionId":"Spq61cA4tQh","authorizePublicFrame":false,"vmEnabled":false,"canViewConsole":false,"vercelDeploymentUrl":null}]}]}]
2a:o29f,ec:["$","div",null,{"data-testid":"template-detail-related","className":"w-full flex flex-col gap-9","children":[["$","$L77",null,{"title":"More from emmartinzok","children":["$","div",null,{"className":"flex-1","children":["$","div",null,{"className":"grid grid-cols-1 justify-center gap-6 @lg/page-layout:grid-cols-2 @5xl/page-layout:grid-cols-3","children":["$Lf8","$Lf9","$Lfa"]}]}]}],["$","$L77",null,{"title":"More Templates Like This","children":["$","div",null,{"className":"flex-1","children":["$","div",null,{"className":"grid grid-cols-1 justify-center gap-6 @lg/page-layout:grid-cols-2 @5xl/page-layout:grid-cols-3","children":["$Lfb","$Lfc","$Lfd"]}]}]}]]}]
2a:o2d,2d:C
2c:C
1:C
24:C
1f:C
1a:C
17:C
2e:[48269]
2a:C
</article></body></html>