e1:"ExplicitChatIdProvider" e2:I[903690,["$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","$64","$65","$66","$67","$68"],"$e1"] e3:I[838238,["$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","$64","$65","$66","$67","$68"],"SWRDataProvider"] 32:o1,~32:o480,2:"$Sreact.fragment" 3:"/chat-static/_next/static/immutable/chunks/344ii6lor939z.js" 4:I[695259,["$3"],"default"] 5:I[565976,["$3"],"default"] 26:"ViewportBoundary" 27:I[407550,["$3"],"$26"] 29:"MetadataBoundary" 2a:I[407550,["$3"],"$29"] 2b:"$Sreact.suspense" :HL["/chat-static/_next/static/immutable/chunks/2zeq6cdsrffgs.css","style"] :HL["/chat-static/_next/static/immutable/chunks/0psna2sukmul_.css","style"] :HL["/chat-static/_next/static/immutable/chunks/2788dbs0biv5l.css","style"] :HL["/chat-static/_next/static/immutable/chunks/0fdug_96ci9uf.css","style"] :HL["/chat-static/_next/static/immutable/chunks/3ov87t7yn984v.css","style"] 1:X 6:X 18:X 1b:X 20:X 25:X 23:[["children",{"s":"__PAGE__","h":162,"d":{"r":"$L24","p":false,"v":"$25"}}]] 21:[["children",{"s":{"n":"id","t":"d","k":"YHHaW2ztOsk","s":null},"h":102,"d":{"r":"$L22","p":false,"v":"$6"},"c":"$Q23"}]] 1e:[["children",{"s":"(discover)","h":106,"d":{"r":"$L1f","p":false,"v":"$20"},"c":"$Q21"}]] 1c:[["children",{"s":"templates","h":106,"d":{"r":"$L1d","p":false,"v":"$6"},"c":"$Q1e"}]] 19:[["children",{"s":"(no-sidebar)","h":74,"d":{"r":"$L1a","p":false,"v":"$1b"},"c":"$Q1c"}]] 32:oc70,8:[["children",{"s":"(dynamic-root)","h":58,"d":{"r":["$","$2","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2zeq6cdsrffgs.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/0psna2sukmul_.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2788dbs0biv5l.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","3",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/0fdug_96ci9uf.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","4",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/3ov87t7yn984v.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/0s91nv935u0kq.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/32gb-v7_cfzqx.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/3rneqh-vsqil3.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/06g-rie23iir4.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/1ibth-4qqbhor.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/39ouvcffzes09.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/0nm9y9yxjvms6.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/3l445ldb7t27o.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/02d02djy805-w.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/2y7omgpv14bz5.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/277_v9eijjb0j.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/0ngmsluflzcnc.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/38aftlut_e3ia.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/2vmptnhcjirpe.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/44lffh5bkggou.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/1y1gg-uv-yg37.js","async":true,"nonce":"$undefined"}],"$L9","$La","$Lb","$Lc","$Ld","$Le","$Lf","$L10","$L11","$L12","$L13","$L14","$L15","$L16"],"$L17"]}],"p":false,"v":"$18"},"c":"$Q19"}]] 32:o1d7,7:[["children",{"s":{"n":"variants","t":"d","k":"v0pprvariant-0-0-en-","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"}]] 2d:X 2e:X 32:o71d,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,["$","$L27","9f6rC0WMuyjLOLe1QYc4Pv",{"children":"$L28"}],["$","$L2a","9f6rC0WMuyjLOLe1QYc4Pm",{"children":[["$","div",null,{"hidden":true,"children":["$","$2b",null,{"name":"Next.Metadata","children":"$L2c"}]}],null]}]]}],"p":false,"v":"$2d"}},"s":"$2e","a":"$@2f","w":"$@30"} 32:o1000,31:"/chat-static/_next/static/immutable/chunks/0s91nv935u0kq.js" 32:"/chat-static/_next/static/immutable/chunks/32gb-v7_cfzqx.js" 33:"/chat-static/_next/static/immutable/chunks/3rneqh-vsqil3.js" 34:"/chat-static/_next/static/immutable/chunks/06g-rie23iir4.js" 35:"/chat-static/_next/static/immutable/chunks/1ibth-4qqbhor.js" 36:"/chat-static/_next/static/immutable/chunks/39ouvcffzes09.js" 37:"/chat-static/_next/static/immutable/chunks/0nm9y9yxjvms6.js" 38:"/chat-static/_next/static/immutable/chunks/3l445ldb7t27o.js" 39:"/chat-static/_next/static/immutable/chunks/02d02djy805-w.js" 3a:"/chat-static/_next/static/immutable/chunks/2y7omgpv14bz5.js" 3b:"/chat-static/_next/static/immutable/chunks/277_v9eijjb0j.js" 3c:"/chat-static/_next/static/immutable/chunks/0ngmsluflzcnc.js" 3d:"/chat-static/_next/static/immutable/chunks/38aftlut_e3ia.js" 3e:"/chat-static/_next/static/immutable/chunks/2vmptnhcjirpe.js" 3f:"/chat-static/_next/static/immutable/chunks/44lffh5bkggou.js" 40:"/chat-static/_next/static/immutable/chunks/1y1gg-uv-yg37.js" 41:"/chat-static/_next/static/immutable/chunks/0uxkhhp8wogt1.js" 42:"/chat-static/_next/static/immutable/chunks/358yxcdt1q22y.js" 43:"/chat-static/_next/static/immutable/chunks/42ovlxm1wmcwo.js" 44:"/chat-static/_next/static/immutable/chunks/3gd76rgcgdfvq.js" 45:"/chat-static/_next/static/immutable/chunks/01a9_kdk7wvw6.js" 46:"/chat-static/_next/static/immutable/chunks/2f_9eh0ql-b5w.js" 47:"/chat-static/_next/static/immutable/chunks/1-royq331wc9f.js" 48:"/chat-static/_next/static/immutable/chunks/2m2yel67gxrig.js" 49:"/chat-static/_next/static/immutable/chunks/19j6c8sv9jpbu.js" 4a:"/chat-static/_next/static/immutable/chunks/0wdvsaivxfepn.js" 4b:"/chat-static/_next/static/immutable/chunks/2wdn3k_g5gncz.js" 4c:"/chat-static/_next/static/immutable/chunks/2f5x2m1bfr85t.js" 4d:"/chat-static/_next/static/immutable/chunks/33d9s-i6cc0wg.js" 4e:"/chat-static/_next/static/immutable/chunks/2sm31xx94jmle.js" 4f:"/chat-static/_next/static/immutable/chunks/05lw6sns_14cs.js" 50:"/chat-static/_next/static/immutable/chunks/1h6_1262jslgg.js" 51:"/chat-static/_next/static/immutable/chunks/3gadxnzv8ec3m.js" 52:"/chat-static/_next/static/immutable/chunks/1bf824ju4p8hw.js" 53:"ScopedPromiseContextProvider" 54:I[850359,["$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"] 5b:"SidebarUIProvider" 5c:I[475961,["$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"],"$5b"] 5d:I[990009,["$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"],"Header"] 5e:I[980088,["$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"],"DynamicCMDK"] 60:"LoadingBoundaryProvider" 61:I[695259,["$3"],"$60"] 62:"/chat-static/_next/static/immutable/chunks/01uf_9opfv9we.js" 63:"/chat-static/_next/static/immutable/chunks/1vk9hn38mzbyf.js" 64:"/chat-static/_next/static/immutable/chunks/37sc9_omp9zmt.js" 65:"/chat-static/_next/static/immutable/chunks/19nmjpy21roro.js" 66:"/chat-static/_next/static/immutable/chunks/1gqluh-jaq9z3.js" 67:"TemplatePreviewContainer" 68:I[959794,["$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","$62","$63","$64","$65","$66"],"$67"] 69:"TemplateInfoSection" 6a:I[164762,["$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","$62","$63"32:of4b,,"$64","$65","$66"],"$69"] 6b:"TemplateInfoSectionGroup" 6c:I[164762,["$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","$62","$63","$64","$65","$66"],"$6b"] 6f:I[407550,["$3"],"OutletBoundary"] 6:C 9:["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/0uxkhhp8wogt1.js","async":true,"nonce":"$undefined"}] a:["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/358yxcdt1q22y.js","async":true,"nonce":"$undefined"}] b:["$","script","script-18",{"src":"/chat-static/_next/static/immutable/chunks/42ovlxm1wmcwo.js","async":true,"nonce":"$undefined"}] c:["$","script","script-19",{"src":"/chat-static/_next/static/immutable/chunks/3gd76rgcgdfvq.js","async":true,"nonce":"$undefined"}] d:["$","script","script-20",{"src":"/chat-static/_next/static/immutable/chunks/01a9_kdk7wvw6.js","async":true,"nonce":"$undefined"}] e:["$","script","script-21",{"src":"/chat-static/_next/static/immutable/chunks/2f_9eh0ql-b5w.js","async":true,"nonce":"$undefined"}] f:["$","script","script-22",{"src":"/chat-static/_next/static/immutable/chunks/1-royq331wc9f.js","async":true,"nonce":"$undefined"}] 10:["$","script","script-23",{"src":"/chat-static/_next/static/immutable/chunks/2m2yel67gxrig.js","async":true,"nonce":"$undefined"}] 11:["$","script","script-24",{"src":"/chat-static/_next/static/immutable/chunks/19j6c8sv9jpbu.js","async":true,"nonce":"$undefined"}] 12:["$","script","script-25",{"src":"/chat-static/_next/static/immutable/chunks/0wdvsaivxfepn.js","async":true,"nonce":"$undefined"}] 13:["$","script","script-26",{"src":"/chat-static/_next/static/immutable/chunks/2wdn3k_g5gncz.js","async":true,"nonce":"$undefined"}] 14:["$","script","script-27",{"src":"/chat-static/_next/static/immutable/chunks/2f5x2m1bfr85t.js","async":true,"nonce":"$undefined"}] 15:["$","script","script-28",{"src":"/chat-static/_next/static/immutable/chunks/33d9s-i6cc0wg.js","async":true,"nonce":"$undefined"}] 16:["$","script","script-29",{"src":"/chat-static/_next/static/immutable/chunks/2sm31xx94jmle.js","async":true,"nonce":"$undefined"}] 1a:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/05lw6sns_14cs.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/1h6_1262jslgg.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/3gadxnzv8ec3m.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1bf824ju4p8hw.js","async":true,"nonce":"$undefined"}]],["$","$L54",null,{"params":null,"promises":{"scopeUserDetails":"$@55","team":"$@56","vercelProjectsFavorites":"$@57","chats":"$@58","sidebarProjectGroups":"$@59","sidebarDrafts":"$@5a"},"children":["$","$L5c",null,{"children":[["$","$L5d",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"}]}],["$","$L5e",null,{}]]}]}]]}] 1d:["$","$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"}]]}] 1f:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/01uf_9opfv9we.js","async":true,"nonce":"$undefined"}]],"$L5f"]}] 32:o10d9,22:["$","$L61",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":[["$","$L68",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":[["$","$L6a",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"}]]}]}],["$","$L6c",null,{"className":"w-full lg:w-80","children":[["$","$L6a",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"}]]}]}]}],["$","$L6a",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"}]]}]}],["$","$L6a",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/3afd6tr3sn1gu.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":["$L6d",[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}] 32:o293,24:["$","$2","c",{"children":["$L6e",[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/1vk9hn38mzbyf.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/37sc9_omp9zmt.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/19nmjpy21roro.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1gqluh-jaq9z3.js","async":true,"nonce":"$undefined"}]],["$","$L6f",null,{"children":["$","$2b",null,{"name":"Next.MetadataOutlet","children":"$@70"}]}]]}] 32:o5f4,77:I[339811,["$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","$62"],"PageLayout"] 78:"ScrollFadeContainer" 79:I[388503,["$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","$62"],"$78"] 7a:"CommunityTabsClient" 7b:I[490134,["$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","$62"],"$7a"] 7c:"CommunityLiveSearch" 7d:I[803568,["$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","$62"],"$7c"] 7e:I[32970,["$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","$62"],"ZoneProvider"] 7f:I[532822,["$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","$62"],"default"] 2e:300 18:T8,variants20:T8,variants71:T18d6,32:o18d6,(({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);async function g(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)}}!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 h=new c,i=new d(a);g(h,i,a).catch(a=>{console.error("Error patching XMLHttpRequest:",a)}),b=window.fetch,window.fetch=async(c,d)=>{let g=new URL(c instanceof Request?c.url:c,location.href),j=g.origin===location.origin,k=a.find(a=>f({path:g.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 h.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",g.pathname),o.set("x-method",l);let p={...d,headers:o};return i.loaded||0!==n.b?b(c,p):1===n.d||k?.advancedOptions?.checkLevel==="deepAnalysis"?(await i.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"}] });32:o534,17:["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","meta",null,{"name":"ahrefs-site-verification","content":"e2ef51ac3cec223624a89ee7790eda482d23374870bff86fe0e0c599b8de4b51"}],["$","script",null,{"dangerouslySetInnerHTML":{"__html":"$71"}}],"$L72","$L73","$L74","$L75"]}],"$L76"]}] 5f:["$","$L77",null,{"actions":["$","div",null,{"className":"flex lg:pr-1 items-center w-full justify-between flex-row gap-2 relative","children":[["$","$L79",null,{"leftFadeClassName":"left-0 z-20","rightFadeClassName":"right-0 z-20","showButtons":false,"className":"flex-1 min-w-0","scrollableClassName":"px-0","children":["$","$L7b",null,{}]}],["$","$2b",null,{"children":["$","$L7d",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":["$","$L7e",null,{"zone":"chat","children":["$","$L7f",null,{}]}]}]]}] 32:o1000,80:"GeistThemeScript" 81:I[526065,["$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"],"$80"] 82:I[600033,["$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"],"AppStoreMetaTag"] 83:I[526065,["$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"],"GeistProvider"] 84:I[818362,["$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"],"LocaleProvider"] 85:I[841245,["$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"],"MotionConfig"] 86:"AtomicContextSWRProvider" 87:I[850359,["$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"],"$86"] 88:"GlobalPromiseContextProvider" 89:I[850359,["$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"],"$88"] 8c:I[827887,["$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"],"JotaiProvider"] 8d:"ServerQuerySWRRuntimeProvider" 8e:I[74757,["$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"],"$8d"] 90:I[815349,["$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"],"CleanupStorage"] 91:I[241214,["$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"],"Analytics"] 92:I[156707,["$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"],"SpeedInsights"] 94:"VercelianAppFlowMigrator" 95:I[23825,["$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"],"$94"] 96:I[108762,["$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"],"TrackInfo"] 97:I[578386,["$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"],"PageViewTracker"] 98:I[356301,["$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"],"AutoCapture"] 72:["$","$L81",null,{"storageKey":"theme"}] 73:["$","$2b",null,{"children":["$","$L82",null,{}]}] 74:["$","meta",null,{"name":"slack-app-id","content":"A09PS08K5R8"}] 75:["$","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\",\"sameAs\":[\"https://x.com/vercel\",\"https://x.com/v0\",\"https://github.com/vercel\",\"https://www.linkedin.com/compan32:o1c4,y/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\"}}]"}}] 32:o93c,76:["$","body",null,{"className":"font-sans bg-v0-background-200 text-v0-gray-1000 antialiased mAFGZa_variable _1SOORW_variable hGs1mq_variable","children":[["$","$L83",null,{"storageKey":"theme","withScript":false,"children":["$","$L84",null,{"locale":"en","children":["$","$L85",null,{"reducedMotion":"user","children":["$","$L87",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":["$","$L89",null,{"params":null,"promises":{"dailyModelUsage":"$@8a","freeFixWithV0Usage":"$@8b"},"children":[["$","$L8c",null,{"children":["$","$L8e",null,{"children":"$L8f"}]}],["$","$L90",null,{}]]}]}]}]}]}],["$","$L91",null,{}],["$","$L92",null,{"endpoint":"https://v0sdk.com/_vercel/speed-insights/vitals"}],["$","$2b",null,{"children":"$L93"}],["$","$L95",null,{}],["$","$L96",null,{}],["$","$L97",null,{}],["$","$L98",null,{}]]}] 32:o90,28:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1"}]] 32:oe,2d:T8,variants32:o1000,99:"HydrateDurableAtoms" 9a:I[783749,["$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"],"$99"] 9b:I[359783,["$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"],"DataProvider"] 9c:I[32170,["$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"],"UserProvider"] 9e:"AnimatedIconProvider" 9f:I[908887,["$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"],"$9e"] a0:I[30570,["$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"],"PortalProvider"] a1:"SnowflakePublishProvider" a2:I[966820,["$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"],"$a1"] a3:"UserInputProvider" a4:I[472914,["$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"],"$a3"] a5:I[69221,["$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"],"CmdkProvider"] a6:"VirtualMachineUIStateProvider" a7:I[319228,["$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"],"$a6"] a8:"DeployedPreviewIframeRefProvider" a9:I[166890,["$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"],"$a8"] aa:"PreviewSourceUIStateProvider" ab:I[197843,["$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"],"$aa"] ac:I[367078,["$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"],"LoaderProvider"] ad:"PromptFormUIProvider" ae:I[595358,["$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"],"$ad"] af:I[242759,["$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"],"FlagsProvider"] b1:I[530813,["$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"],"NuqsAdapter"] b2:"ChatTabsProvider" b3:I[568561,["$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"],"$b2"] b4:"PersonalScopeMigrationAnnouncementProvider" b5:I[206559,["$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"],"$b4"] b7:"AnnouncementVisibilityProvider" b8:I[878519,["$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"],"$b7"] bb:I[561588,["$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a32:o5e1,","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e"],"Toaster"] bc:I[407562,["$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"],"Toaster"] bd:"SuspendingDialogs" be:I[840793,["$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"],"$bd"] bf:I[323194,["$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"],"SignInDialog"] c0:I[279070,["$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"],"ConsentBanner"] c1:"/chat-static/_next/static/immutable/chunks/24s8tk2v2k1oc.js" c2:I[192842,["$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","$62","$c1"],"ChatWarning"] c3:I[15279,["$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"],"SessionManager"] 32:o8ad,8f:["$","$L9a",null,{"serverData":{"chat":null,"scoped":null,"root":{"root":{"sidebarCollapsed":false,"sidebarPreferenceSet":false,"sidebarWidth":250,"lastUpdated":0,"modelConfiguration":{"fast":false,"modelId":"v0-max","thinking":false,"thinkingEffort":null,"imageGenerations":false},"modelDisplayPreference":null,"lastModelPreference":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":["$","$L9b",null,{"children":["$","$L9c",null,{"expectUser":false,"userPromise":"$@9d","children":["$","$L9f",null,{"children":["$","$La0",null,{"children":["$","$La2",null,{"children":["$","$La4",null,{"children":["$","$La5",null,{"children":["$","$La7",null,{"children":["$","$La9",null,{"children":["$","$Lab",null,{"children":["$","$Lac",null,{"children":["$","$Lae",null,{"children":["$","$Laf",null,{"promise":"$@b0","middlewareFlags":[],"children":["$","$Lb1",null,{"children":["$","$Lb3",null,{"children":["$","$Lb5",null,{"destinationTeamIdPromise":"$@b6","children":["$","$Lb8",null,{"visiblePromise":"$@b9","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":[["$","$2b",null,{"fallback":null,"children":"$Lba"}],["$","$Lbb",null,{}],["$","$Lbc",null,{}],["$","$2b",null,{"fallback":null,"children":["$","$Lbe",null,{}]}],["$","$Lbf",null,{}],["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","$Lc0",null,{}]]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}] 32:o2a2,5a:null 6d:["$","$Lc2",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}] 93:["$","$Lc3",null,{"enabled":false}] 32:o20,9d:"$undefined" b9:true ba:null 32:o24,2d:T1,?25:T1,?2e:60 25:T2,id2d:T2,id32:o33a,b6:null b0:{"requested":null,"identity":null,"resolution":"anonymous","flags":{"aepe":false,"asse":false,"afre":false,"bvge":false,"cdm":{"rule":"","value":"ineligible"},"igm":"gateway.google/gemini-3.1-flash-lite-image","ctv2":true,"lcw":false,"tbb":false,"oivs":false,"vmmt":false,"nfd":"","nfde":1,"iedm":true,"inb":true,"stve":true,"ci":true,"smpe":false,"dsie":false,"sie":false,"siv2":false,"cvod":false,"dce":false,"tse":false,"ftdml":true,"lmmo":false,"ubse":true,"dcpps":false,"spu":true,"kps":false,"tfam":false,"evmv":true,"uae":false,"f5e":true,"f51e":true,"cfmte":false,"impe":true,"gope":false,"awde":false,"awpse":false,"g56se":true,"g52e":false,"g46e":false,"kk3e":false,"o5e":true,"o55e":true,"o55fe":true,"o55cnp":false,"ept":false,"shce":false,"shme":false,"idue":false,"ipc":true,"dsrr":false,"ftr":null}} 32:o11,30:true 2f:44423 32:o22,2e:C 2d:C 1:C 25:C 20:C 1b:C 18:C 32:C e4:T1e9cb,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import V0Blocks from "@/components/v0-blocks" export default function Home() { return } [V0_FILE]typescript:file="lib/constants.ts" isMerged="true" export const GRID_SIZE = 20 export const BRICK_HEIGHT = 1.2 export const LAYER_GAP = 0.005 export const GROUND_HEIGHT = BRICK_HEIGHT / 4 export const STUD_HEIGHT = 0.2 export const STUD_RADIUS = 0.3 export const STUD_SEGMENTS = 16 export const TEXTURES = { roughness: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_Roughness-uXe3bt2x4CgFTpjN9nyi0fPRvu69f2.jpg", normal: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_NormalGL-K5hpwiN8hyBFaqLgpGOBe1n7JypC5n.jpg", color: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_Color-vAhGH2sCmmtYLZ4Qp4UAdIIqzuTWkB.jpg", } export const MARBLE_TEXTURES = { roughness: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_Roughness-E11kZGSuFRz7Tw1kAaDKzpCm9PexxD.jpg", normal: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_NormalGL-yyE1gw0semnetBvj2CIz5UfqwTwoHr.jpg", color: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_Color-yiNesdpa46Mn7IwRiCFo11NERCO2Yw.jpg", } [V0_FILE]typescriptreact:file="components/large-plane.tsx" isMerged="true" import type React from "react" import * as THREE from "three" import { useTexture } from "@react-three/drei" import { MARBLE_TEXTURES } from "@/lib/constants" export const LargePlane: React.FC = () => { const marbleTextures = useTexture(MARBLE_TEXTURES, (loadedTextures) => { Object.values(loadedTextures).forEach((texture) => { texture.wrapS = texture.wrapT = THREE.RepeatWrapping texture.repeat.set(1000, 1000) }) }) return ( ) } [V0_FILE]typescriptreact:file="components/highlight-square.tsx" isMerged="true" import type React from "react" import * as THREE from "three" interface HighlightSquareProps { position: [number, number, number] isValid: boolean width: number height: number } export const HighlightSquare: React.FC = ({ position, isValid, width, height }) => { return ( ) } [V0_FILE]typescriptreact:file="components/platform.tsx" isMerged="true" "use client" import type React from "react" import { useMemo } from "react" import * as THREE from "three" import { Instances, Instance } from "@react-three/drei" import { GRID_SIZE, GROUND_HEIGHT, STUD_HEIGHT, STUD_RADIUS } from "@/lib/constants" export const Platform: React.FC = () => { const studGeometry = useMemo(() => new THREE.CylinderGeometry(STUD_RADIUS, STUD_RADIUS, STUD_HEIGHT, 12), []) const studPositions = useMemo(() => { const positions = [] for (let x = -GRID_SIZE / 2 + 0.5; x < GRID_SIZE / 2; x++) { for (let z = -GRID_SIZE / 2 + 0.5; z < GRID_SIZE / 2; z++) { positions.push([x, GROUND_HEIGHT / 2 + STUD_HEIGHT / 2, z]) } } return positions }, []) return ( {studPositions.map((pos, index) => ( ))} ) } [V0_FILE]typescriptreact:file="app/fonts.ts" isMerged="true" import { Geist } from "next/font/google" export const geistSans = Geist({ subsets: ["latin"], display: "swap", variable: "--font-geist-sans", }) [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { geistSans } from "./fonts" import "./globals.css" export const metadata: Metadata = { title: "V0 Blocks", description: "A 3D block building application", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --font-geist: var(--font-geist-sans); } html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; position: fixed; touch-action: none; overscroll-behavior: none; user-select: none; /* Prevent text selection */ -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ } body { font-family: var(--font-geist); touch-action: manipulation; /* Improve touch behavior */ } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]javascript:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { fontFamily: { sans: ["var(--font-geist-sans)"], }, colors: { 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))", }, purple: { 950: "#1a103d", 900: "#2a1a5e", 800: "#3a2a7e", 700: "#4a3a9e", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, animation: { in: "in 0.2s ease-out", }, keyframes: { in: { "0%": { opacity: 0 }, "100%": { opacity: 1 }, }, }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescript:file="components/v0-blocks/events.ts" isMerged="true" import type { Dispatch, SetStateAction } from "react" // Define types for our brick and history export type Brick = { color: string position: [number, number, number] width: number height: number } export type BrickHistory = Brick[][] // Event handlers export const handleAddBrick = ( brick: Brick, bricks: Brick[], setBricks: Dispatch>, history: BrickHistory, historyIndex: number, setHistory: Dispatch>, setHistoryIndex: Dispatch>, ) => { const newBricks = [...bricks, brick] setBricks(newBricks) const newHistory = history.slice(0, historyIndex + 1) newHistory.push(newBricks) setHistory(newHistory) setHistoryIndex(historyIndex + 1) } export const handleDeleteBrick = ( index: number, bricks: Brick[], setBricks: Dispatch>, history: BrickHistory, historyIndex: number, setHistory: Dispatch>, setHistoryIndex: Dispatch>, ) => { const newBricks = bricks.filter((_, i) => i !== index) setBricks(newBricks) const newHistory = history.slice(0, historyIndex + 1) newHistory.push(newBricks) setHistory(newHistory) setHistoryIndex(historyIndex + 1) } export const handleUpdateBrick = ( index: number, newPosition: [number, number, number], bricks: Brick[], setBricks: Dispatch>, history: BrickHistory, historyIndex: number, setHistory: Dispatch>, setHistoryIndex: Dispatch>, ) => { const newBricks = bricks.map((brick, i) => (i === index ? { ...brick, position: newPosition } : brick)) setBricks(newBricks) const newHistory = history.slice(0, historyIndex + 1) newHistory.push(newBricks) setHistory(newHistory) setHistoryIndex(historyIndex + 1) } export const handleUndo = ( historyIndex: number, setHistoryIndex: Dispatch>, history: BrickHistory, setBricks: Dispatch>, ) => { if (historyIndex > 0) { const newIndex = historyIndex - 1 setHistoryIndex(newIndex) setBricks(history[newIndex]) } } export const handleRedo = ( historyIndex: number, setHistoryIndex: Dispatch>, history: BrickHistory, setBricks: Dispatch>, ) => { if (historyIndex < history.length - 1) { const newIndex = historyIndex + 1 setHistoryIndex(newIndex) setBricks(history[newIndex]) } } export const handleClearSet = ( setBricks: Dispatch>, setHistory: Dispatch>, setHistoryIndex: Dispatch>, ) => { setBricks([]) setHistory([[]]) setHistoryIndex(0) } export const handlePlayToggle = (isPlaying: boolean, setIsPlaying: Dispatch>) => { setIsPlaying(!isPlaying) } [V0_FILE]typescript:file="components/block/types.ts" isMerged="true" export interface BlockProps { color: string position: [number, number, number] width: number height: number isPlacing?: boolean opacity?: number onClick?: () => void } [V0_FILE]typescriptreact:file="components/block/index.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useMemo } from "react" import * as THREE from "three" import { useFrame } from "@react-three/fiber" import { Instances, Instance, useTexture } from "@react-three/drei" import { BRICK_HEIGHT, LAYER_GAP, STUD_HEIGHT, STUD_RADIUS, STUD_SEGMENTS, TEXTURES } from "@/lib/constants" import type { BlockProps } from "./types" export const Block: React.FC = ({ color, position, width, height, isPlacing = false, opacity = 1, onClick, }) => { const depth = height const blockGeometry = useMemo(() => new THREE.BoxGeometry(width, BRICK_HEIGHT - LAYER_GAP, depth), [width, depth]) const studGeometry = useMemo( () => new THREE.CylinderGeometry(STUD_RADIUS, STUD_RADIUS, STUD_HEIGHT, STUD_SEGMENTS), [], ) const studPositions = useMemo(() => { const positions = [] for (let x = -width / 2 + 0.5; x < width / 2; x++) { for (let z = -depth / 2 + 0.5; z < depth / 2; z++) { positions.push([x, BRICK_HEIGHT / 2 - LAYER_GAP / 2 + STUD_HEIGHT / 2, z]) } } return positions }, [width, depth]) const textures = useTexture(TEXTURES) const brickRef = useRef(null) const studRef = useRef(null) const groupRef = useRef(null) // Determine if this is an erase highlight const isEraseHighlight = isPlacing && onClick !== undefined useFrame((state) => { if (isPlacing && brickRef.current && studRef.current) { // Use different colors for build mode (yellow) vs erase mode (red) const glowColor = isEraseHighlight ? new THREE.Color(1, 0, 0) : new THREE.Color(1, 1, 0) const glowIntensity = Math.sin(state.clock.elapsedTime * 4) * 0.1 + 0.9 brickRef.current.material.emissive.copy(glowColor) brickRef.current.material.emissiveIntensity = glowIntensity studRef.current.material.emissive.copy(glowColor) studRef.current.material.emissiveIntensity = glowIntensity } }) const instanceLimit = useMemo(() => Math.max(width * depth, 100), [width, depth]) // Convert color to darker version for better shadow definition const darkenedColor = useMemo(() => { if (isEraseHighlight) return "#ff0000" // Red for erase mode if (isPlacing) return "#ffff00" // Yellow for build mode // Convert hex to RGB const hex = color.replace("#", "") const r = Number.parseInt(hex.substring(0, 2), 16) const g = Number.parseInt(hex.substring(2, 4), 16) const b = Number.parseInt(hex.substring(4, 6), 16) // Darken by 10% const darkenFactor = 0.9 const newR = Math.floor(r * darkenFactor) const newG = Math.floor(g * darkenFactor) const newB = Math.floor(b * darkenFactor) return `#${newR.toString(16).padStart(2, "0")}${newG.toString(16).padStart(2, "0")}${newB.toString(16).padStart(2, "0")}` }, [color, isPlacing, isEraseHighlight]) // Handle click with stopPropagation to ensure the correct block is deleted const handleClick = (e: THREE.ThreeEvent) => { e.stopPropagation() if (onClick) onClick() } // Check if we're on mobile const isMobile = useMemo(() => { if (typeof window !== "undefined") { return window.innerWidth < 768 } return false }, []) // Only use onPointerDown for erase mode on mobile // For build mode, we need to use the regular click handler const isEraseMode = isEraseHighlight && isMobile return ( { // For mobile erase mode only, trigger click on pointer down if (isEraseMode && onClick) { e.stopPropagation() onClick() } }} > {studPositions.map((pos, index) => ( ))} ) } [V0_FILE]typescriptreact:file="components/scene/types.ts" isMerged="true" import type { Brick } from "@/components/v0-blocks/events" export interface SceneProps { bricks: Brick[] selectedColor: string width: number depth: number onAddBrick: (brick: Brick) => void onDeleteBrick?: (index: number) => void onUndo: () => void onRedo: () => void isPlaying: boolean interactionMode?: "build" | "move" | "erase" } [V0_FILE]typescriptreact:file="components/popover.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" interface PopoverProps { isOpen: boolean onClose: () => void anchor: React.RefObject children: React.ReactNode position?: "top" | "bottom" } export const Popover: React.FC = ({ isOpen, onClose, anchor, children, position = "bottom" }) => { const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 }) const popoverRef = useRef(null) // Calculate and set position whenever the popover opens or the anchor changes useEffect(() => { const updatePosition = () => { if (isOpen && anchor.current && popoverRef.current) { const rect = anchor.current.getBoundingClientRect() const popoverRect = popoverRef.current.getBoundingClientRect() let top: number if (position === "top") { // Position above the anchor element top = rect.top - popoverRect.height - 8 } else { // Position below the anchor element top = rect.bottom + 8 } // Center horizontally relative to the anchor let left = rect.left + rect.width / 2 - popoverRect.width / 2 // Adjust position if it goes off-screen if (left < 10) { left = 10 } else if (left + popoverRect.width > window.innerWidth - 10) { left = window.innerWidth - popoverRect.width - 10 } setPopoverPosition({ top, left }) } } // Initial position calculation if (isOpen) { // Use requestAnimationFrame to ensure the popover is rendered before measuring requestAnimationFrame(() => { updatePosition() }) } // Update position on resize window.addEventListener("resize", updatePosition) return () => { window.removeEventListener("resize", updatePosition) } }, [isOpen, anchor, position]) // Handle clicks outside the popover useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( popoverRef.current && !popoverRef.current.contains(event.target as Node) && anchor.current && !anchor.current.contains(event.target as Node) ) { onClose() } } if (isOpen) { // Delay adding the event listener to prevent immediate closing const timer = setTimeout(() => { document.addEventListener("mousedown", handleClickOutside) }, 100) return () => { clearTimeout(timer) document.removeEventListener("mousedown", handleClickOutside) } } }, [isOpen, onClose, anchor]) if (!isOpen) return null return (

{children}

) } [V0_FILE]typescriptreact:file="components/audio-player.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Volume2, VolumeX } from "lucide-react" export const AudioPlayer: React.FC = () => { const [isMuted, setIsMuted] = useState(true) const audioRef = useRef(null) useEffect(() => { audioRef.current = new Audio( "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Pixel%20Dreams-wNU5nif9OTg2n5YIcFd3j8bteFV2As.mp3", ) audioRef.current.loop = true }, []) useEffect(() => { if (audioRef.current) { if (isMuted) { audioRef.current.pause() } else { audioRef.current.play() } } }, [isMuted]) return ( ) } [V0_FILE]typescriptreact:file="components/mobile-toolbar.tsx" isMerged="true" "use client" import type React from "react" import { Pencil, Camera } from "lucide-react" interface MobileToolbarProps { onModeChange: (mode: "draw" | "camera") => void currentMode: "draw" | "camera" } export const MobileToolbar: React.FC = ({ onModeChange, currentMode }) => { return (

) } [V0_FILE]typescriptreact:file="components/tooltip.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { createPortal } from "react-dom" interface TooltipProps { text: string position?: "top" | "right" | "bottom" | "left" children: React.ReactNode delay?: number } export const Tooltip: React.FC = ({ text, position = "top", children, delay = 400 }) => { const [isVisible, setIsVisible] = useState(false) const [mounted, setMounted] = useState(false) const childRef = useRef(null) const timerRef = useRef(null) const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 }) // Handle client-side mounting useEffect(() => { setMounted(true) return () => setMounted(false) }, []) const showTooltip = () => { if (timerRef.current) clearTimeout(timerRef.current) timerRef.current = setTimeout(() => { if (!childRef.current) return const rect = childRef.current.getBoundingClientRect() let top = 0 let left = 0 switch (position) { case "top": top = rect.top - 30 // Position above with enough space for the tooltip left = rect.left + rect.width / 2 break case "right": top = rect.top + rect.height / 2 left = rect.right + 8 break case "bottom": top = rect.bottom + 8 left = rect.left + rect.width / 2 break case "left": top = rect.top + rect.height / 2 left = rect.left - 8 break } setTooltipPosition({ top, left }) setIsVisible(true) }, delay) } const hideTooltip = () => { if (timerRef.current) { clearTimeout(timerRef.current) timerRef.current = null } setIsVisible(false) } useEffect(() => { return () => { if (timerRef.current) { clearTimeout(timerRef.current) } } }, []) // Determine tooltip class based on position const getTooltipClass = () => { const baseClass = "fixed z-50 px-2 py-1 text-xs font-medium text-white bg-black/80 rounded-md shadow-lg whitespace-nowrap transform" switch (position) { case "top": return `${baseClass} -translate-x-1/2 -translate-y-full` case "right": return `${baseClass} translate-y-[-50%]` case "bottom": return `${baseClass} -translate-x-1/2` case "left": return `${baseClass} -translate-x-full translate-y-[-50%]` default: return baseClass } } return (

{children} {mounted && isVisible && createPortal(

{text}

, document.body, )}

) } [V0_FILE]typescriptreact:file="components/simple-tooltip.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" interface SimpleTooltipProps { text: string position?: "top" | "right" | "bottom" | "left" children: React.ReactNode } export const SimpleTooltip: React.FC = ({ text, position = "top", children }) => { const [isHovered, setIsHovered] = useState(false) const [isMounted, setIsMounted] = useState(false) useEffect(() => { setIsMounted(true) }, []) if (!isMounted) { return <>{children} } return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onFocus={() => setIsHovered(true)} onBlur={() => setIsHovered(false)} > {children} {isHovered && (

{text}

)}

) } [V0_FILE]typescript:file="lib/actions.ts" isFixed="true" isQuickEdit="true" isMerged="true" // This file re-exports all actions from the actions directory // It's kept for backward compatibility export * from "./actions/index" export type { SavedCreation } from "./types" [V0_FILE]typescriptreact:file="components/save-modal.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { saveCreation } from "@/lib/actions/save-creation" import { updateCreation } from "@/lib/actions/update-creation" import type { Brick } from "@/components/v0-blocks/events" import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" interface SaveModalProps { isOpen: boolean onClose: () => void bricks: Brick[] currentId?: string currentName?: string } export const SaveModal: React.FC = ({ isOpen, onClose, bricks, currentId, currentName = "" }) => { const [name, setName] = useState(currentName) const [isSaving, setIsSaving] = useState(false) const [message, setMessage] = useState("") const [isSuccess, setIsSuccess] = useState(false) // Update name when currentName changes useEffect(() => { setName(currentName || "") }, [currentName]) const handleSave = async () => { if (!name.trim()) { setMessage("Please enter a name for your creation") setIsSuccess(false) return } setIsSaving(true) setMessage("") try { const result = currentId ? await updateCreation(currentId, name, bricks) : await saveCreation(name, bricks) setIsSuccess(result.success) setMessage(result.message || "") if (result.success) { // Close modal after a short delay setTimeout(() => { onClose() }, 1500) } } catch (error) { setIsSuccess(false) setMessage("An error occurred while saving") } finally { setIsSaving(false) } } return ( ) } [V0_FILE]typescript:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-avatar": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.4", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-hover-card": "^1.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-menubar": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-toast": "^1.2.4", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "nanoid": "^5.0.4" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/load-modal.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Trash2, Clock, RefreshCw } from "lucide-react" import { getCreations } from "@/lib/actions/get-creations" import { deleteCreation } from "@/lib/actions/delete-creation" import type { SavedCreation } from "@/lib/types" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" interface LoadModalProps { isOpen: boolean onClose: () => void onLoad: (creation: SavedCreation) => void } export const LoadModal: React.FC = ({ isOpen, onClose, onLoad }) => { const [creations, setCreations] = useState([]) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [isDeleting, setIsDeleting] = useState(null) useEffect(() => { if (isOpen) { loadCreations() } }, [isOpen]) const loadCreations = async () => { setIsLoading(true) setError("") try { const result = await getCreations(20, 0) if (result.success) { setCreations(result.creations || []) } else { setError(result.message || "Failed to load creations") } } catch (error) { setError("An error occurred while loading creations") } finally { setIsLoading(false) } } const handleDelete = async (id: string, e: React.MouseEvent) => { e.stopPropagation() if (isDeleting) return if (!confirm("Are you sure you want to delete this creation?")) { return } setIsDeleting(id) try { const result = await deleteCreation(id) if (result.success) { // Remove from local state setCreations(creations.filter((c) => c.id !== id)) } else { alert(result.message || "Failed to delete creation") } } catch (error) { alert("An error occurred while deleting the creation") } finally { setIsDeleting(null) } } const formatDate = (timestamp: number) => { return new Date(timestamp).toLocaleString() } // Skeleton loading component const CreationSkeleton = () => (

) return ( ) } [V0_FILE]typescriptreact:file="components/color-selector/types.ts" isMerged="true" export interface ColorSelectorProps { colors: string[] selectedColor: string onSelectColor: (color: string) => void onUndo: () => void onRedo: () => void canUndo: boolean canRedo: boolean width: number depth: number onWidthChange: (width: number) => void onDepthChange: (depth: number) => void onClearSet: () => void onPlayToggle: () => void isPlaying: boolean onSave: () => void onLoad: () => void currentCreationId?: string currentCreationName?: string currentTheme: ColorTheme onThemeChange: (theme: ColorTheme) => void bricksCount: number } export type ColorTheme = "default" | "muted" | "monochrome" export const COLOR_THEMES: Record = { default: [ "#FF3333", // Red "#FF9933", // Orange "#FFCC33", // Yellow "#33CC66", // Green "#33CCFF", // Light Blue "#3366CC", // Dark Blue "#9933CC", // Purple "#222222", // Black ], muted: [ "#CC6666", // Muted Red "#CC9966", // Muted Orange "#CCCC66", // Muted Yellow "#66CC99", // Muted Green "#66CCCC", // Muted Light Blue "#6699CC", // Muted Dark Blue "#9966CC", // Muted Purple "#444444", // Dark Gray ], monochrome: [ "#FFFFFF", // White "#DDDDDD", // Light Gray 1 "#BBBBBB", // Light Gray 2 "#999999", // Mid Gray 1 "#777777", // Mid Gray 2 "#555555", // Dark Gray 1 "#333333", // Dark Gray 2 "#111111", // Near Black ], } [V0_FILE]typescriptreact:file="components/v0-blocks/index.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef, useCallback, useEffect } from "react" import { Canvas } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import { Pause } from "lucide-react" import { AudioPlayer } from "../audio-player" import { Scene } from "../scene" import { ColorSelector } from "../color-selector" import { ActionToolbar } from "../action-toolbar" import { SaveModal } from "../save-modal" import { LoadModal } from "../load-modal" import { ClearConfirmationModal } from "./clear-confirmation-modal" import { useKeyboardShortcuts } from "./use-keyboard-shortcuts" import { useColorTheme } from "./use-color-theme" import { useTouchHandling } from "./use-touch-handling" import { useLocalStorage } from "./use-local-storage" import { clearLocalStorage } from "@/lib/utils/local-storage" import type { SavedCreation } from "@/lib/types" import { type Brick, handleAddBrick, handleDeleteBrick, handleUpdateBrick, handleUndo, handleRedo, handleClearSet, handlePlayToggle, } from "./events" import { IntegrationCheckDialog } from "../integration-check-dialog" import { isKvConfigured } from "@/lib/utils/check-kv-integration" export default function V0Blocks() { // Theme and colors const { currentTheme, currentColors, selectedColor, setSelectedColor, handleSelectColor, handleThemeChange } = useColorTheme() // State const [bricks, setBricks] = useState([]) const [history, setHistory] = useState([[]]) const [historyIndex, setHistoryIndex] = useState(0) const [width, setWidth] = useState(2) const [depth, setDepth] = useState(2) const [isPlaying, setIsPlaying] = useState(false) const [interactionMode, setInteractionMode] = useState<"build" | "move" | "erase">("build") const orbitControlsRef = useRef() // Modal state const [showSaveModal, setShowSaveModal] = useState(false) const [showLoadModal, setShowLoadModal] = useState(false) const [showClearModal, setShowClearModal] = useState(false) const [currentCreationId, setCurrentCreationId] = useState() const [currentCreationName, setCurrentCreationName] = useState() // Add these state variables in the V0Blocks component after the other modal states const [showIntegrationDialog, setShowIntegrationDialog] = useState(false) const [integrationDialogType, setIntegrationDialogType] = useState<"save" | "load">("save") const [isKvAvailable, setIsKvAvailable] = useState(true) // Add this effect to check KV availability when the component mounts useEffect(() => { const checkKvAvailability = async () => { try { const available = await isKvConfigured() setIsKvAvailable(available) } catch (error) { console.error("Error checking KV availability:", error) setIsKvAvailable(false) } } checkKvAvailability() }, []) // Set up touch handling useTouchHandling() // Set up localStorage persistence useLocalStorage({ bricks, width, depth, selectedColor, currentTheme, currentCreationId, currentCreationName, setBricks, setWidth, setDepth, setSelectedColor, handleThemeChange, setCurrentCreationId, setCurrentCreationName, setHistory, setHistoryIndex, }) // Wrapper functions that call the imported event handlers with the current state const onAddBrick = useCallback( (brick: Brick) => { handleAddBrick(brick, bricks, setBricks, history, historyIndex, setHistory, setHistoryIndex) }, [bricks, history, historyIndex], ) const onDeleteBrick = useCallback( (index: number) => { handleDeleteBrick(index, bricks, setBricks, history, historyIndex, setHistory, setHistoryIndex) }, [bricks, history, historyIndex], ) const onUpdateBrick = useCallback( (index: number, newPosition: [number, number, number]) => { handleUpdateBrick(index, newPosition, bricks, setBricks, history, historyIndex, setHistory, setHistoryIndex) }, [bricks, history, historyIndex], ) const onUndo = useCallback(() => { console.log("Undo triggered") handleUndo(historyIndex, setHistoryIndex, history, setBricks) }, [history, historyIndex]) const onRedo = useCallback(() => { console.log("Redo triggered") handleRedo(historyIndex, setHistoryIndex, history, setBricks) }, [history, historyIndex]) const onClearSet = useCallback(() => { console.log("Clear set triggered") handleClearSet(setBricks, setHistory, setHistoryIndex) // Clear current creation info when clearing the set setCurrentCreationId(undefined) setCurrentCreationName(undefined) // Clear localStorage clearLocalStorage() // Close the modal setShowClearModal(false) }, []) const handleClearWithConfirmation = useCallback(() => { if (bricks.length > 0) { setShowClearModal(true) } }, [bricks.length]) const onPlayToggle = useCallback(() => { console.log("Play toggle triggered") handlePlayToggle(isPlaying, setIsPlaying) }, [isPlaying]) const handleModeChange = useCallback((mode: "build" | "move" | "erase") => { setInteractionMode(mode) }, []) // Save/Load handlers const handleSave = useCallback(() => { if (!isKvAvailable) { setIntegrationDialogType("save") setShowIntegrationDialog(true) } else { setShowSaveModal(true) } }, [isKvAvailable]) // Replace the handleLoad function with this const handleLoad = useCallback(() => { if (!isKvAvailable) { setIntegrationDialogType("load") setShowIntegrationDialog(true) } else { setShowLoadModal(true) } }, [isKvAvailable]) const handleLoadCreation = useCallback((creation: SavedCreation) => { // Load the creation setBricks(creation.bricks) // Update history const newHistory = [[...creation.bricks]] setHistory(newHistory) setHistoryIndex(0) // Update current creation info setCurrentCreationId(creation.id) setCurrentCreationName(creation.name) // Close the modal setShowLoadModal(false) }, []) // Set up keyboard shortcuts useKeyboardShortcuts({ isPlaying, width, depth, currentColors, setWidth, setDepth, setSelectedColor, setInteractionMode, onUndo, onRedo, onPlayToggle, handleClearWithConfirmation, handleSave, handleLoad, currentTheme, handleThemeChange, }) return (

e.preventDefault()} // Prevent context menu on right-click >

{!isPlaying && ( <> 0} canRedo={historyIndex < history.length - 1} width={width} depth={depth} onWidthChange={setWidth} onDepthChange={setDepth} onClearSet={handleClearWithConfirmation} onPlayToggle={onPlayToggle} isPlaying={isPlaying} onSave={handleSave} onLoad={handleLoad} currentCreationId={currentCreationId} currentCreationName={currentCreationName} currentTheme={currentTheme} onThemeChange={handleThemeChange} bricksCount={bricks.length} /> )} {isPlaying && ( )} {/* Modals */} setShowSaveModal(false)} bricks={bricks} currentId={currentCreationId} currentName={currentCreationName} /> setShowLoadModal(false)} onLoad={handleLoadCreation} /> setShowClearModal(false)} onClear={onClearSet} /> setShowIntegrationDialog(false)} actionType={integrationDialogType} />

) } [V0_FILE]typescriptreact:file="components/color-selector/index.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import type { ColorSelectorProps } from "./types" import { HistoryControls } from "./history-controls" import { ColorPicker } from "./color-picker" import { DimensionControls } from "./dimension-controls" import { FileControls } from "./file-controls" import { ActionControls } from "./action-controls" import { MobileMenu } from "./mobile-menu" export const ColorSelector: React.FC = ({ colors, selectedColor, onSelectColor, onUndo, onRedo, canUndo, canRedo, width, depth, onWidthChange, onDepthChange, onClearSet, onPlayToggle, isPlaying, onSave, onLoad, currentCreationId, currentCreationName, currentTheme, onThemeChange, bricksCount, }) => { const [isMobile, setIsMobile] = useState(false) // Handle client-side mounting and detect mobile useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) return (

{/* Main Controls Panel - Very rounded with smaller padding */}

{/* History Controls */}

{/* Color Selector */}

{/* Dimension Controls */}

{/* Desktop: Save/Load Controls */} {!isMobile && ( <>

)} {/* Desktop: Action Buttons */} {!isMobile && ( 0} /> )} {/* Mobile: Menu Button */} {isMobile && ( 0} /> )}

) } [V0_FILE]typescript:file="lib/utils/lighten-color.ts" isMerged="true" /** * Lightens a hex color by a specified percentage * @param color Hex color string (e.g. "#FF0000") * @param percent Percentage to lighten (0-100) * @returns Lightened hex color string */ export function lightenColor(color: string, percent: number): string { // Convert hex to RGB const hex = color.replace("#", "") let r = Number.parseInt(hex.substring(0, 2), 16) let g = Number.parseInt(hex.substring(2, 4), 16) let b = Number.parseInt(hex.substring(4, 6), 16) // Lighten the color r = Math.min(255, Math.floor(r + (255 - r) * (percent / 100))) g = Math.min(255, Math.floor(g + (255 - g) * (percent / 100))) b = Math.min(255, Math.floor(b + (255 - b) * (percent / 100))) // Convert back to hex return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}` } [V0_FILE]typescriptreact:file="components/color-selector/mobile-menu.tsx" isMerged="true" "use client" import type React from "react" import { Play, Trash2, Save, FolderOpen, Menu } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" interface MobileMenuProps { onPlayToggle: () => void isPlaying: boolean onSave: () => void onLoad: () => void onClearSet: () => void hasBricks: boolean } export const MobileMenu: React.FC = ({ onPlayToggle, isPlaying, onSave, onLoad, onClearSet, hasBricks, }) => { return (

) } [V0_FILE]typescriptreact:file="components/color-selector/clear-modal.tsx" isMerged="true" "use client" import type React from "react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" interface ClearModalProps { isOpen: boolean onClose: () => void onClear: () => void } export const ClearModal: React.FC = ({ isOpen, onClose, onClear }) => { return ( ) } [V0_FILE]typescriptreact:file="components/v0-blocks/clear-confirmation-modal.tsx" isMerged="true" "use client" import type React from "react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" interface ClearConfirmationModalProps { isOpen: boolean onClose: () => void onClear: () => void } export const ClearConfirmationModal: React.FC = ({ isOpen, onClose, onClear }) => { // Create a handler that prevents event propagation const handleClear = (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() onClear() } return ( ) } [V0_FILE]typescriptreact:file="components/v0-blocks/use-keyboard-shortcuts.ts" isMerged="true" "use client" import { useEffect } from "react" // Helper function to check if we're currently focused on an input element function isInputElement(): boolean { const activeElement = document.activeElement if (!activeElement) return false const tagName = activeElement.tagName.toLowerCase() const isEditable = activeElement.hasAttribute("contenteditable") && activeElement.getAttribute("contenteditable") !== "false" return tagName === "input" || tagName === "textarea" || tagName === "select" || isEditable } interface KeyboardShortcutsProps { isPlaying: boolean width: number depth: number currentColors: string[] setWidth: (width: number | ((prev: number) => number)) => void setDepth: (depth: number | ((prev: number) => number)) => void setSelectedColor: (color: string) => void setInteractionMode: (mode: "build" | "move" | "erase") => void onUndo: () => void onRedo: () => void onPlayToggle: () => void handleClearWithConfirmation: () => void handleSave: () => void handleLoad: () => void currentTheme: string handleThemeChange: (theme: string) => void } export function useKeyboardShortcuts({ isPlaying, width, depth, currentColors, setWidth, setDepth, setSelectedColor, setInteractionMode, onUndo, onRedo, onPlayToggle, handleClearWithConfirmation, handleSave, handleLoad, currentTheme, handleThemeChange, }: KeyboardShortcutsProps) { useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { // Skip keyboard shortcuts when playing if (isPlaying) return // Skip keyboard shortcuts when typing in an input field if (isInputElement()) return // Swap dimensions with S key if (event.key === "S" || event.key === "s") { setWidth((prevWidth) => depth) setDepth((prevDepth) => width) } // Switch to Build mode with B key if (event.key === "B" || event.key === "b") { setInteractionMode("build") } // Switch to Move mode with M key if (event.key === "M" || event.key === "m") { setInteractionMode("move") } // Switch to Erase mode with E key if (event.key === "E" || event.key === "e") { setInteractionMode("erase") } // Cycle through color themes with C key if (event.key === "C" || event.key === "c") { const themes = ["default", "muted", "monochrome"] const currentIndex = themes.indexOf(currentTheme) const nextIndex = (currentIndex + 1) % themes.length handleThemeChange(themes[nextIndex]) } // Decrease width with [ key if (event.key === "[" && !event.shiftKey) { setWidth((prevWidth) => Math.max(1, prevWidth - 1)) } // Increase width with ] key if (event.key === "]" && !event.shiftKey) { setWidth((prevWidth) => Math.min(20, prevWidth + 1)) } // Decrease depth with ; key if (event.key === ";") { setDepth((prevDepth) => Math.max(1, prevDepth - 1)) } // Increase depth with ' key if (event.key === "'") { setDepth((prevDepth) => Math.min(20, prevDepth + 1)) } // Color selection with number keys 1-8 if (event.key >= "1" && event.key <= "8") { const colorIndex = Number.parseInt(event.key) - 1 if (colorIndex >= 0 && colorIndex < currentColors.length) { setSelectedColor(currentColors[colorIndex]) } } // Undo: CMD+Z (Mac) or CTRL+Z (Windows) if ((event.metaKey || event.ctrlKey) && !event.shiftKey && event.key.toLowerCase() === "z") { event.preventDefault() console.log("CMD+Z pressed") onUndo() } // Redo: CMD+SHIFT+Z (Mac) or CTRL+SHIFT+Z (Windows) if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "z") { event.preventDefault() console.log("CMD+SHIFT+Z pressed") onRedo() } // Keep CMD+Y as an alternative for redo for backward compatibility if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "y") { event.preventDefault() console.log("CMD+Y pressed") onRedo() } // Play: CMD+Enter if ((event.metaKey || event.ctrlKey) && event.key === "Enter") { event.preventDefault() console.log("CMD+Enter pressed") onPlayToggle() } // Clear: CMD+Delete or CMD+Backspace if ((event.metaKey || event.ctrlKey) && (event.key === "Delete" || event.key === "Backspace")) { event.preventDefault() console.log("CMD+Delete pressed") handleClearWithConfirmation() } // Save: CMD+S if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") { event.preventDefault() console.log("CMD+S pressed") handleSave() } // Load: CMD+O if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "o") { event.preventDefault() console.log("CMD+O pressed") handleLoad() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [ isPlaying, width, depth, currentColors, setWidth, setDepth, setSelectedColor, setInteractionMode, onUndo, onRedo, onPlayToggle, handleClearWithConfirmation, handleSave, handleLoad, currentTheme, handleThemeChange, ]) } [V0_FILE]typescript:file="components/v0-blocks/use-color-theme.ts" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" import { COLOR_THEMES } from "../color-selector/types" import type { ColorTheme } from "../color-selector/types" export function useColorTheme() { const [currentTheme, setCurrentTheme] = useState("default") const [currentColors, setCurrentColors] = useState(COLOR_THEMES[currentTheme]) const [selectedColor, setSelectedColor] = useState(currentColors[0]) // Update currentColors when theme changes useEffect(() => { const newColors = COLOR_THEMES[currentTheme] setCurrentColors(newColors) // Find the closest color in the new theme to the currently selected color const oldColorIndex = COLOR_THEMES["default"].indexOf(selectedColor) const mutedColorIndex = COLOR_THEMES["muted"].indexOf(selectedColor) const monoColorIndex = COLOR_THEMES["monochrome"].indexOf(selectedColor) // If the color exists in any theme, use its index to select the corresponding color in the new theme if (oldColorIndex !== -1) { setSelectedColor(newColors[oldColorIndex]) } else if (mutedColorIndex !== -1) { setSelectedColor(newColors[mutedColorIndex]) } else if (monoColorIndex !== -1) { setSelectedColor(newColors[monoColorIndex]) } else { // If not found in any theme, default to the first color in the new theme setSelectedColor(newColors[0]) } }, [currentTheme, selectedColor]) // Handle color selection with updated theme colors const handleSelectColor = useCallback((color: string) => { setSelectedColor(color) }, []) // Handle theme change const handleThemeChange = useCallback((theme: ColorTheme) => { setCurrentTheme(theme) }, []) return { currentTheme, currentColors, selectedColor, setSelectedColor, handleSelectColor, handleThemeChange, } } [V0_FILE]typescriptreact:file="components/v0-blocks/use-touch-handling.ts" isMerged="true" "use client" import { useEffect } from "react" export function useTouchHandling() { // Prevent text selection on mobile, but allow button clicks useEffect(() => { const preventDefaultTouchAction = (e: TouchEvent) => { // Don't prevent default for buttons and interactive elements const target = e.target as HTMLElement const isInteractive = target.tagName === "BUTTON" || target.closest("button") || target.closest('[role="button"]') || target.closest(".bg-white") || // Allow interaction with the control panel target.closest("[data-radix-popper-content-wrapper]") // Allow interaction with popover content if (!isInteractive) { e.preventDefault() } } // Prevent scrolling on document body document.body.style.overflow = "hidden" document.documentElement.style.overflow = "hidden" // Prevent pull-to-refresh and other browser gestures document.addEventListener("gesturestart", preventDefaultTouchAction, { passive: false }) document.addEventListener("gesturechange", preventDefaultTouchAction, { passive: false }) document.addEventListener("gestureend", preventDefaultTouchAction, { passive: false }) // Add event listeners to prevent default touch actions document.addEventListener("touchstart", preventDefaultTouchAction, { passive: false }) document.addEventListener("touchmove", preventDefaultTouchAction, { passive: false }) document.addEventListener("touchend", preventDefaultTouchAction, { passive: false }) return () => { // Clean up event listeners document.body.style.overflow = "" document.documentElement.style.overflow = "" document.removeEventListener("gesturestart", preventDefaultTouchAction) document.removeEventListener("gesturechange", preventDefaultTouchAction) document.removeEventListener("gestureend", preventDefaultTouchAction) document.removeEventListener("touchstart", preventDefaultTouchAction) document.removeEventListener("touchmove", preventDefaultTouchAction) document.removeEventListener("touchend", preventDefaultTouchAction) } }, []) } [V0_FILE]typescript:file="lib/actions/save-creation.ts" isMerged="true" "use server" import { kv } from "@vercel/kv" import { nanoid } from "nanoid" import { revalidatePath } from "next/cache" import type { Brick } from "@/components/v0-blocks/events" import type { SavedCreation } from "../types" // Save the current blocks to Redis export async function saveCreation(name: string, bricks: Brick[]) { try { const id = nanoid(10) const timestamp = Date.now() const creation: SavedCreation = { id, name, bricks, createdAt: timestamp, updatedAt: timestamp, } // Save to Redis await kv.set(`creation:${id}`, JSON.stringify(creation)) // Add to list of creations await kv.zadd("creations", { score: timestamp, member: id }) revalidatePath("/") return { success: true, id, message: "Creation saved successfully!" } } catch (error) { console.error("Error saving creation:", error) return { success: false, message: "Failed to save creation." } } } [V0_FILE]typescript:file="lib/actions/update-creation.ts" isMerged="true" "use server" import { kv } from "@vercel/kv" import { revalidatePath } from "next/cache" import type { Brick } from "@/components/v0-blocks/events" import type { SavedCreation } from "../types" // Update an existing creation export async function updateCreation(id: string, name: string, bricks: Brick[]) { try { // Get the existing creation const existingCreationStr = await kv.get(`creation:${id}`) if (!existingCreationStr) { return { success: false, message: "Creation not found." } } const existingCreation = typeof existingCreationStr === "string" ? JSON.parse(existingCreationStr) : (existingCreationStr as SavedCreation) const timestamp = Date.now() const updatedCreation: SavedCreation = { ...existingCreation, name, bricks, updatedAt: timestamp, } // Update in Redis await kv.set(`creation:${id}`, JSON.stringify(updatedCreation)) // Update score in sorted set await kv.zadd("creations", { score: timestamp, member: id }) revalidatePath("/") return { success: true, id, message: "Creation updated successfully!" } } catch (error) { console.error("Error updating creation:", error) return { success: false, message: "Failed to update creation." } } } [V0_FILE]typescript:file="lib/actions/get-creation.ts" isMerged="true" "use server" import { kv } from "@vercel/kv" import type { SavedCreation } from "../types" // Get a specific creation by ID export async function getCreation(id: string) { try { const creationData = await kv.get(`creation:${id}`) if (!creationData) { return { success: false, message: "Creation not found." } } const creation = typeof creationData === "string" ? JSON.parse(creationData) : (creationData as SavedCreation) return { success: true, creation } } catch (error) { console.error("Error getting creation:", error) return { success: false, message: "Failed to get creation." } } } [V0_FILE]typescript:file="lib/actions/get-creations.ts" isMerged="true" "use server" import { kv } from "@vercel/kv" import type { SavedCreation } from "../types" // Get all creations (with pagination) export async function getCreations(limit = 10, offset = 0) { try { // Get IDs from sorted set (newest first) const ids = await kv.zrange("creations", offset, offset + limit - 1, { rev: true }) if (!ids || ids.length === 0) { return { success: true, creations: [] } } // Get all creations in parallel const creationsPromises = ids.map((id) => kv.get(`creation:${id}`)) const creationsData = await Promise.all(creationsPromises) // Parse JSON data safely const creations = creationsData .filter((data) => data !== null) .map((data) => { // Handle both string and object formats if (typeof data === "string") { try { return JSON.parse(data) as SavedCreation } catch (e) { console.error("Error parsing creation data:", e) return null } } else { return data as SavedCreation } }) .filter(Boolean) as SavedCreation[] return { success: true, creations } } catch (error) { console.error("Error getting creations:", error) return { success: false, message: `Failed to get creations: ${error.message}` } } } [V0_FILE]typescript:file="lib/actions/delete-creation.ts" isMerged="true" "use server" import { kv } from "@vercel/kv" import { revalidatePath } from "next/cache" // Delete a creation export async function deleteCreation(id: string) { try { // Delete from Redis await kv.del(`creation:${id}`) // Remove from sorted set await kv.zrem("creations", id) revalidatePath("/") return { success: true, message: "Creation deleted successfully!" } } catch (error) { console.error("Error deleting creation:", error) return { success: false, message: "Failed to delete creation." } } } [V0_FILE]typescript:file="lib/actions/index.ts" isMerged="true" export * from "./save-creation" export * from "./update-creation" export * from "./get-creation" export * from "./get-creations" export * from "./delete-creation" [V0_FILE]typescript:file="lib/types.ts" isMerged="true" import type { Brick } from "@/components/v0-blocks/events" // Type for saved creation export type SavedCreation = { id: string name: string bricks: Brick[] createdAt: number updatedAt: number } [V0_FILE]typescript:file="lib/utils/local-storage.ts" isMerged="true" import type { Brick } from "@/components/v0-blocks/events" const LOCAL_STORAGE_KEY = "v0-blocks-state" export interface LocalStorageState { bricks: Brick[] width: number height: number selectedColor: string currentTheme: string creationId?: string creationName?: string } export function saveToLocalStorage(state: LocalStorageState): boolean { try { const serializedState = JSON.stringify(state) localStorage.setItem(LOCAL_STORAGE_KEY, serializedState) return true } catch (error) { console.error("Error saving to localStorage:", error) return false } } export function loadFromLocalStorage(): LocalStorageState | null { try { const serializedState = localStorage.getItem(LOCAL_STORAGE_KEY) if (!serializedState) return null return JSON.parse(serializedState) as LocalStorageState } catch (error) { console.error("Error loading from localStorage:", error) return null } } export function clearLocalStorage(): boolean { try { localStorage.removeItem(LOCAL_STORAGE_KEY) return true } catch (error) { console.error("Error clearing localStorage:", error) return false } } export function isLocalStorageAvailable(): boolean { try { const testKey = "__test__" localStorage.setItem(testKey, testKey) localStorage.removeItem(testKey) return true } catch (e) { return false } } [V0_FILE]typescriptreact:file="components/v0-blocks/use-local-storage.ts" isMerged="true" "use client" import { useEffect, useRef } from "react" import type { Brick } from "./events" import type { ColorTheme } from "../color-selector/types" import { saveToLocalStorage, loadFromLocalStorage, isLocalStorageAvailable } from "@/lib/utils/local-storage" interface UseLocalStorageProps { bricks: Brick[] width: number depth: number selectedColor: string currentTheme: ColorTheme currentCreationId?: string currentCreationName?: string setBricks: (bricks: Brick[]) => void setWidth: (width: number) => void setDepth: (depth: number) => void setSelectedColor: (color: string) => void handleThemeChange: (theme: ColorTheme) => void setCurrentCreationId: (id?: string) => void setCurrentCreationName: (name?: string) => void setHistory: (history: Brick[][]) => void setHistoryIndex: (index: number) => void } export function useLocalStorage({ bricks, width, depth, selectedColor, currentTheme, currentCreationId, currentCreationName, setBricks, setWidth, setDepth, setSelectedColor, handleThemeChange, setCurrentCreationId, setCurrentCreationName, setHistory, setHistoryIndex, }: UseLocalStorageProps) { const hasLocalStorage = useRef(false) const isInitialLoad = useRef(true) const saveTimeoutRef = useRef(null) // Check if localStorage is available useEffect(() => { hasLocalStorage.current = isLocalStorageAvailable() }, []) // Load data from localStorage on initial mount useEffect(() => { if (!hasLocalStorage.current) return if (isInitialLoad.current) { const savedState = loadFromLocalStorage() if (savedState) { // Only restore if there are bricks to restore if (savedState.bricks && savedState.bricks.length > 0) { setBricks(savedState.bricks) setWidth(savedState.width || 2) setDepth(savedState.height || 2) setSelectedColor(savedState.selectedColor || "#FF3333") if (savedState.currentTheme) { handleThemeChange(savedState.currentTheme as ColorTheme) } if (savedState.creationId) { setCurrentCreationId(savedState.creationId) } if (savedState.creationName) { setCurrentCreationName(savedState.creationName) } // Initialize history with the loaded bricks setHistory([[...savedState.bricks]]) setHistoryIndex(0) } } isInitialLoad.current = false } }, [ setBricks, setWidth, setDepth, setSelectedColor, handleThemeChange, setCurrentCreationId, setCurrentCreationName, setHistory, setHistoryIndex, ]) // Save data to localStorage whenever state changes (debounced) useEffect(() => { if (!hasLocalStorage.current || isInitialLoad.current) return // Clear any existing timeout if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current) } // Set a new timeout to save after 500ms of inactivity saveTimeoutRef.current = setTimeout(() => { saveToLocalStorage({ bricks, width, height: depth, selectedColor, currentTheme, creationId: currentCreationId, creationName: currentCreationName, }) }, 500) // Cleanup timeout on unmount return () => { if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current) } } }, [bricks, width, depth, selectedColor, currentTheme, currentCreationId, currentCreationName]) } [V0_FILE]typescriptreact:file="components/scene/index.tsx" isMerged="true" "use client" import type React from "react" import { Environment, SoftShadows } from "@react-three/drei" import type { SceneProps } from "./types" import { LargePlane } from "../large-plane" import { Platform } from "../platform" import { BuildMode } from "./build-mode" import { EraseMode } from "./erase-mode" import { LightingSetup } from "./lighting-setup" import { useSceneInteraction } from "./use-scene-interaction" import { Block } from "../block" import { GRID_SIZE } from "@/constants" export const Scene: React.FC = ({ bricks, selectedColor, width, depth, onAddBrick, onDeleteBrick, onUndo, onRedo, isPlaying, interactionMode = "build", }) => { const { currentBrickPosition, isValid, showNewBrick, hoveredBrickIndex, handleClick, handleTouchStart, handleTouchMove, handleTouchEnd, handleBrickClick, planeRef, } = useSceneInteraction({ bricks, width, depth, selectedColor, onAddBrick, onDeleteBrick, isPlaying, interactionMode, }) return ( <> {/* Render all bricks */} {bricks.map((brick, index) => ( handleBrickClick(index)} /> ))} {/* Render appropriate mode components */} {interactionMode === "build" && !isPlaying && ( )} {interactionMode === "erase" && !isPlaying && } {/* The plane is always present but only interactive when not playing and in build mode */} ) } [V0_FILE]typescriptreact:file="components/scene/build-mode.tsx" isMerged="true" "use client" import type React from "react" import { Block } from "../block" import { HighlightSquare } from "../highlight-square" interface BuildModeProps { showNewBrick: boolean isValid: boolean currentBrickPosition: [number, number, number] selectedColor: string width: number depth: number } export const BuildMode: React.FC = ({ showNewBrick, isValid, currentBrickPosition, selectedColor, width, depth, }) => { if (!showNewBrick) return null return ( <> ) } [V0_FILE]typescriptreact:file="components/scene/erase-mode.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" export const EraseMode: React.FC = () => { return null } [V0_FILE]typescriptreact:file="components/scene/lighting-setup.tsx" isMerged="true" "use client" import type React from "react" import { useRef } from "react" import * as THREE from "three" import { useFrame, useThree } from "@react-three/fiber" export const LightingSetup: React.FC = () => { const { camera } = useThree() const directionalLightRef = useRef(null) useFrame(() => { // Update directional light to follow camera somewhat if (directionalLightRef.current) { const lightPos = new THREE.Vector3( camera.position.x * 0.5 + 5, Math.max(8, camera.position.y * 0.5), camera.position.z * 0.5 + 5, ) directionalLightRef.current.position.copy(lightPos) directionalLightRef.current.lookAt(0, 0, 0) } }) return ( <> {/* Reduced ambient light intensity for better shadows */} {/* Main directional light with improved shadow settings */} {/* Secondary fill light from opposite direction */} ) } [V0_FILE]typescriptreact:file="components/scene/use-scene-interaction.ts" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import * as THREE from "three" import { useFrame, useThree } from "@react-three/fiber" import { GRID_SIZE, BRICK_HEIGHT, LAYER_GAP, GROUND_HEIGHT } from "@/lib/constants" import type { Brick } from "@/components/v0-blocks/events" interface UseSceneInteractionProps { bricks: Brick[] width: number depth: number selectedColor: string onAddBrick: (brick: Brick) => void onDeleteBrick?: (index: number) => void isPlaying: boolean interactionMode: "build" | "move" | "erase" } export function useSceneInteraction({ bricks, width, depth, selectedColor, onAddBrick, onDeleteBrick, isPlaying, interactionMode, }: UseSceneInteractionProps) { const [currentBrickPosition, setCurrentBrickPosition] = useState<[number, number, number]>([ 0, GROUND_HEIGHT / 2 + BRICK_HEIGHT / 2, 0, ]) const [isPlacing, setIsPlacing] = useState(true) const [isValid, setIsValid] = useState(true) const [showNewBrick, setShowNewBrick] = useState(true) const [hoveredBrickIndex, setHoveredBrickIndex] = useState(null) const [touchedBrickIndex, setTouchedBrickIndex] = useState(null) const [isDeleting, setIsDeleting] = useState(false) const [isMobile, setIsMobile] = useState(false) // Touch interaction tracking const [touchStartPosition, setTouchStartPosition] = useState<{ x: number; y: number } | null>(null) const [hasMoved, setHasMoved] = useState(false) const touchMoveThreshold = 10 // pixels const { camera, raycaster, mouse } = useThree() const planeRef = useRef(null) // Detect mobile device useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) // Reset hovered brick index when bricks array changes (after deletion) useEffect(() => { if (isDeleting) { setHoveredBrickIndex(null) setTouchedBrickIndex(null) setIsDeleting(false) } }, [bricks, isDeleting]) // Reset hovered brick index when interaction mode changes useEffect(() => { setHoveredBrickIndex(null) setTouchedBrickIndex(null) // Reset the plane's raycast behavior when switching modes if (planeRef.current) { if (interactionMode === "build") { // Restore the original raycast function for build mode if ((planeRef.current as any)._originalRaycast) { planeRef.current.raycast = (planeRef.current as any)._originalRaycast ;(planeRef.current as any)._originalRaycast = null } } else { // Store the original raycast function if not already stored if (!(planeRef.current as any)._originalRaycast) { const originalRaycast = planeRef.current.raycast ;(planeRef.current as any)._originalRaycast = originalRaycast // Set a dummy raycast function that does nothing for non-build modes planeRef.current.raycast = () => {} } } } }, [interactionMode]) const snapToGrid = (value: number, size: number) => { const isOdd = size % 2 !== 0 const snappedValue = Math.round(value) return isOdd ? snappedValue - 0.5 : snappedValue } const isValidPlacement = (position: [number, number, number], width: number, depth: number) => { const [x, y, z] = position const left = Math.floor(x - width / 2) const right = Math.ceil(x + width / 2) const top = Math.floor(z - depth / 2) const bottom = Math.ceil(z + depth / 2) if (left < -GRID_SIZE / 2 || right > GRID_SIZE / 2 || top < -GRID_SIZE / 2 || bottom > GRID_SIZE / 2) { return false } return !bricks.some((brick) => { const brickLeft = Math.floor(brick.position[0] - brick.width / 2) const brickRight = Math.ceil(brick.position[0] + brick.width / 2) const brickTop = Math.floor(brick.position[2] - brick.height / 2) const brickBottom = Math.ceil(brick.position[2] + brick.height / 2) const horizontalOverlap = left < brickRight && right > brickLeft const verticalOverlap = top < brickBottom && bottom > brickTop const sameLayer = Math.abs(y - brick.position[1]) < 0.1 return horizontalOverlap && verticalOverlap && sameLayer }) } const findHighestBrick = (x: number, z: number, width: number, depth: number) => { const relevantBricks = bricks.filter((brick) => { const horizontalOverlap = Math.abs(brick.position[0] - x) < (width + brick.width) / 2 const verticalOverlap = Math.abs(brick.position[2] - z) < (depth + brick.height) / 2 return horizontalOverlap && verticalOverlap }) if (relevantBricks.length === 0) return GROUND_HEIGHT / 2 + BRICK_HEIGHT / 2 return Math.max(...relevantBricks.map((brick) => brick.position[1])) + BRICK_HEIGHT + LAYER_GAP } // Find the brick at the current pointer position const findBrickAtPointer = () => { // Create a temporary array to store distances to each brick const intersectedBricks: { index: number; distance: number }[] = [] // Check for intersections with each brick bricks.forEach((brick, index) => { // Create a box that represents the brick for intersection testing const brickBox = new THREE.Box3().setFromCenterAndSize( new THREE.Vector3(brick.position[0], brick.position[1], brick.position[2]), new THREE.Vector3(brick.width, BRICK_HEIGHT, brick.height), ) // Check if the ray intersects the brick box const intersectionPoint = new THREE.Vector3() if (raycaster.ray.intersectBox(brickBox, intersectionPoint)) { // Calculate distance from camera to intersection point const distance = raycaster.ray.origin.distanceTo(intersectionPoint) intersectedBricks.push({ index, distance }) } }) // Sort by distance and return the closest brick (not the furthest) if (intersectedBricks.length > 0) { intersectedBricks.sort((a, b) => a.distance - b.distance) return intersectedBricks[0].index } return null } useFrame(() => { // Skip raycaster calculations when in play mode or when deleting if (isPlaying || isDeleting) return // Set up raycaster raycaster.setFromCamera(mouse, camera) // Handle build mode if (interactionMode === "build" && isPlacing && planeRef.current) { const intersects = raycaster.intersectObject(planeRef.current) if (intersects.length > 0) { const { x, z } = intersects[0].point const snappedX = snapToGrid(x, width) const snappedZ = snapToGrid(z, depth) const highestPoint = findHighestBrick(snappedX, snappedZ, width, depth) const newPosition: [number, number, number] = [snappedX, highestPoint, snappedZ] setCurrentBrickPosition(newPosition) setIsValid(isValidPlacement(newPosition, width, depth)) } } // Handle erase mode - check for brick intersections // Only highlight bricks on desktop, not on mobile if (interactionMode === "erase" && !isDeleting && !touchedBrickIndex && !isMobile) { // Reset hovered brick index setHoveredBrickIndex(null) // Find brick at pointer const brickIndex = findBrickAtPointer() if (brickIndex !== null) { setHoveredBrickIndex(brickIndex) } } }) const handleClick = (event: THREE.MouseEvent) => { // Prevent default behavior to avoid unintended actions event.stopPropagation() if (isPlaying) return if (interactionMode === "build" && isPlacing && isValid && showNewBrick) { onAddBrick({ color: selectedColor, position: currentBrickPosition, width, height: depth }) } } // Touch handlers for mobile const handleTouchStart = (event: THREE.ThreeEvent) => { if (isPlaying) return // Record the starting position for all modes setTouchStartPosition({ x: event.clientX, y: event.clientY }) setHasMoved(false) if (interactionMode === "erase" && isMobile) { // For erase mode on mobile, we'll check for brick deletion in handleTouchEnd // to avoid accidental deletions when trying to rotate the camera raycaster.setFromCamera(mouse, camera) const brickIndex = findBrickAtPointer() if (brickIndex !== null) { setTouchedBrickIndex(brickIndex) } } else if (interactionMode === "erase" && !isMobile) { // For erase mode on desktop, find and highlight the brick on touch start raycaster.setFromCamera(mouse, camera) const brickIndex = findBrickAtPointer() if (brickIndex !== null) { setTouchedBrickIndex(brickIndex) } } } const handleTouchMove = (event: THREE.ThreeEvent) => { if (isPlaying) return if (touchStartPosition) { // Calculate distance moved const dx = event.clientX - touchStartPosition.x const dy = event.clientY - touchStartPosition.y const distance = Math.sqrt(dx * dx + dy * dy) // If moved more than threshold, mark as moved if (distance > touchMoveThreshold) { setHasMoved(true) } } if (interactionMode === "erase" && !isMobile) { // For erase mode on desktop, update the highlighted brick if the pointer moves raycaster.setFromCamera(mouse, camera) const brickIndex = findBrickAtPointer() // Only update if we're not already touching a brick or if we've moved to a different brick if (touchedBrickIndex === null || brickIndex !== touchedBrickIndex) { setTouchedBrickIndex(brickIndex) } } } const handleTouchEnd = (event: THREE.ThreeEvent) => { if (isPlaying) return if (interactionMode === "build") { // If didn't move (or moved very little), consider it a tap to place a brick if (touchStartPosition && !hasMoved && isValid && showNewBrick) { onAddBrick({ color: selectedColor, position: currentBrickPosition, width, height: depth }) } } else if (interactionMode === "erase" && touchedBrickIndex !== null) { // For erase mode, delete the brick on touch end if we didn't move much if (!hasMoved && onDeleteBrick) { setIsDeleting(true) onDeleteBrick(touchedBrickIndex) } } // Reset touch tracking setTouchStartPosition(null) setHasMoved(false) setTouchedBrickIndex(null) } const handleBrickClick = (index: number) => { if (isPlaying || isDeleting) return if (interactionMode === "erase" && onDeleteBrick) { // Set deleting flag to prevent hover effects during deletion setIsDeleting(true) // Clear the hovered brick index immediately setHoveredBrickIndex(null) // Delete the brick onDeleteBrick(index) } } // Update the plane's raycast behavior when isPlaying changes useEffect(() => { if (planeRef.current) { if (isPlaying) { // Store the original raycast function const originalRaycast = planeRef.current.raycast ;(planeRef.current as any)._originalRaycast = originalRaycast // Set a dummy raycast function that does nothing planeRef.current.raycast = () => {} } else if ((planeRef.current as any)._originalRaycast && interactionMode === "build") { // Only restore for build mode and when not playing planeRef.current.raycast = (planeRef.current as any)._originalRaycast ;(planeRef.current as any)._originalRaycast = null } } }, [isPlaying, interactionMode]) // Add keyboard shortcut for toggling brick visibility useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (isPlaying) return // Disable keyboard controls when playing if (event.key === "h" || event.key === "H") { setShowNewBrick((prev) => !prev) } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [isPlaying]) return { currentBrickPosition, isValid, showNewBrick, hoveredBrickIndex: isMobile ? null : hoveredBrickIndex, // Never show hover effect on mobile touchedBrickIndex, handleClick, handleTouchStart, handleTouchMove, handleTouchEnd, handleBrickClick, planeRef, } } [V0_FILE]typescriptreact:file="constants.tsx" isQuickEdit="true" isMerged="true" export const GRID_SIZE = 20 export const BRICK_HEIGHT = 1.2 export const LAYER_GAP = 0.005 export const GROUND_HEIGHT = BRICK_HEIGHT / 4 export const STUD_HEIGHT = 0.2 export const STUD_RADIUS = 0.3 export const STUD_SEGMENTS = 16 export const TEXTURES = { roughness: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_Roughness-uXe3bt2x4CgFTpjN9nyi0fPRvu69f2.jpg", normal: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_NormalGL-K5hpwiN8hyBFaqLgpGOBe1n7JypC5n.jpg", color: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Plastic013A_1K-JPG_Color-vAhGH2sCmmtYLZ4Qp4UAdIIqzuTWkB.jpg", } export const MARBLE_TEXTURES = { roughness: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_Roughness-E11kZGSuFRz7Tw1kAaDKzpCm9PexxD.jpg", normal: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_NormalGL-yyE1gw0semnetBvj2CIz5UfqwTwoHr.jpg", color: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Marble019_1K-JPG_Color-yiNesdpa46Mn7IwRiCFo11NERCO2Yw.jpg", } [V0_FILE]typescriptreact:file="components/color-selector/maybe-tooltip.tsx" isMerged="true" "use client" import type React from "react" import { SimpleTooltip } from "../simple-tooltip" interface MaybeTooltipProps { text: string children: React.ReactNode isMobile: boolean } export const MaybeTooltip: React.FC = ({ text, children, isMobile }) => { if (isMobile) { return children } return ( {children} ) } [V0_FILE]typescriptreact:file="components/color-selector/history-controls.tsx" isMerged="true" "use client" import type React from "react" import { Undo2, Redo2 } from "lucide-react" import { MaybeTooltip } from "./maybe-tooltip" interface HistoryControlsProps { onUndo: () => void onRedo: () => void canUndo: boolean canRedo: boolean isMobile: boolean } export const HistoryControls: React.FC = ({ onUndo, onRedo, canUndo, canRedo, isMobile }) => { return (

) } [V0_FILE]typescriptreact:file="components/color-selector/file-controls.tsx" isMerged="true" "use client" import type React from "react" import { Save, FolderOpen } from "lucide-react" import { MaybeTooltip } from "./maybe-tooltip" interface FileControlsProps { onSave: () => void onLoad: () => void isMobile: boolean } export const FileControls: React.FC = ({ onSave, onLoad, isMobile }) => { return (

) } [V0_FILE]typescriptreact:file="components/color-selector/action-controls.tsx" isMerged="true" "use client" import type React from "react" import { Play, Trash2 } from "lucide-react" import { MaybeTooltip } from "./maybe-tooltip" interface ActionControlsProps { onPlayToggle: () => void isPlaying: boolean onClearSet: () => void isMobile: boolean hasBricks: boolean } export const ActionControls: React.FC = ({ onPlayToggle, isPlaying, onClearSet, isMobile, hasBricks, }) => { return (

) } [V0_FILE]typescriptreact:file="components/action-toolbar.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Hammer, Move, Eraser } from "lucide-react" import { SimpleTooltip } from "./simple-tooltip" interface ActionToolbarProps { onModeChange: (mode: "build" | "move" | "erase") => void currentMode: "build" | "move" | "erase" } export const ActionToolbar: React.FC = ({ onModeChange, currentMode }) => { const [isMobile, setIsMobile] = useState(false) // Detect mobile device useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) // Conditionally render tooltip based on device const MaybeTooltip = ({ text, children }) => { if (isMobile) { return children } return ( {children} ) } return (

) } [V0_FILE]typescriptreact:file="components/color-selector/dimension-controls.tsx" isMerged="true" "use client" import type React from "react" import { ArrowLeftRight, ChevronDown } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { SimpleTooltip } from "../simple-tooltip" interface DimensionControlsProps { width: number height: number onWidthChange: (width: number) => void onHeightChange: (height: number) => void isMobile: boolean } export const DimensionControls: React.FC = ({ width, height, onWidthChange, onHeightChange, isMobile, }) => { // Create an array of options for the dropdowns (1-20) const dimensionOptions = Array.from({ length: 20 }, (_, i) => i + 1) // Function to swap width and height const handleSwapDimensions = () => { onWidthChange(height) onHeightChange(width) } if (isMobile) { return (

{width} {dimensionOptions.map((option) => ( onWidthChange(option)}> {option} ))} {height} {dimensionOptions.map((option) => ( onHeightChange(option)}> {option} ))}

) } return (

{width} {dimensionOptions.map((option) => ( onWidthChange(option)}> {option} ))} {height} {dimensionOptions.map((option) => ( onHeightChange(option)}> {option} ))}

) } [V0_FILE]typescriptreact:file="components/color-selector/color-picker.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Check } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { SimpleTooltip } from "../simple-tooltip" import { MaybeTooltip } from "./maybe-tooltip" import { lightenColor } from "@/lib/utils/lighten-color" import type { ColorTheme } from "./types" import { COLOR_THEMES } from "./types" interface ColorPickerProps { colors: string[] selectedColor: string onSelectColor: (color: string) => void currentTheme: ColorTheme onThemeChange: (theme: ColorTheme) => void isMobile: boolean } export const ColorPicker: React.FC = ({ colors, selectedColor, onSelectColor, currentTheme, onThemeChange, isMobile, }) => { const [isPopoverOpen, setIsPopoverOpen] = useState(false) // Color names for tooltips based on theme const colorNames = { default: ["Red", "Orange", "Yellow", "Green", "Light Blue", "Dark Blue", "Purple", "Black"], muted: [ "Muted Red", "Muted Orange", "Muted Yellow", "Muted Green", "Muted Cyan", "Muted Blue", "Muted Purple", "Dark Gray", ], monochrome: [ "White", "Light Gray 1", "Light Gray 2", "Mid Gray 1", "Mid Gray 2", "Dark Gray 1", "Dark Gray 2", "Near Black", ], } const ColorButton = ({ color, isSelected, onClick, index }) => ( )}

Muted

{COLOR_THEMES.muted.map((color, index) => (

Monochrome

{COLOR_THEMES.monochrome.map((color, index) => (

) } [V0_FILE]typescript:file="lib/utils/check-kv-integration.ts" isQuickEdit="true" isMerged="true" "use server" /** * Checks if the required KV environment variables are set * @returns boolean indicating if KV is properly configured */ export async function isKvConfigured(): Promise { try { const hasKvUrl = !!process.env.KV_REST_API_URL const hasKvToken = !!process.env.KV_REST_API_TOKEN // If both environment variables are present, try to make a simple KV request // to verify the connection works if (hasKvUrl && hasKvToken) { const { kv } = await import("@vercel/kv") // Try to ping the KV database await kv.ping() return true } return false } catch (error) { console.error("Error checking KV configuration:", error) return false } } [V0_FILE]typescriptreact:file="components/integration-check-dialog.tsx" isEdit="true" "use client" import type React from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" import Image from "next/image" import Link from "next/link" interface IntegrationCheckDialogProps { isOpen: boolean onClose: () => void actionType: "save" | "load" } export const IntegrationCheckDialog: React.FC = ({ isOpen, onClose, actionType }) => { return ( ) } db:["$","$Le2",null,{"chatId":"utgpEteHhsV","children":["$","$Le3",null,{"data":{"@\"active-block\",\"utgpEteHhsV\",":{"id":"b_0V3wmU2lnT5","messageId":"OnlIFY4VOvBx9vxwwuegUNz7RXTUNDEX","source":"$e4","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"hello-world","type":"code-project","project":"hello-world"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"utgpEteHhsV\",":false},"children":"$Le5"}]}]

{creation.name}

Default

Muted

Monochrome

Follow these steps:

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This

More from ctate

More Templates Like This