e1:"ExplicitChatIdProvider" e2:I[903690,["$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67"],"$e1"] e3:I[838238,["$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$63","$64","$65","$66","$67"],"SWRDataProvider"] 31:o1,~31:o449,2:"$Sreact.fragment" 3:"/chat-static/_next/static/immutable/chunks/3hgpkj-xzfw6u.js" 4:I[381307,["$3"],"default"] 5:I[934914,["$3"],"default"] 25:"ViewportBoundary" 26:I[176645,["$3"],"$25"] 28:"MetadataBoundary" 29:I[176645,["$3"],"$28"] 2a:"$Sreact.suspense" :HL["/chat-static/_next/static/immutable/chunks/1bv-hlxwcj3mn.css","style"] :HL["/chat-static/_next/static/immutable/chunks/1t5z917tkvfhq.css","style"] :HL["/chat-static/_next/static/immutable/chunks/1jd4bptd-zy0t.css","style"] :HL["/chat-static/_next/static/immutable/chunks/03jd14_hafawi.css","style"] 1:X 6:X 17:X 1a:X 1f:X 24:X 22:[["children",{"s":"__PAGE__","h":162,"d":{"r":"$L23","p":false,"v":"$24"}}]] 20:[["children",{"s":{"n":"id","t":"d","k":"a-simple-mindmap-app-Odwmru8eGxB","s":null},"h":102,"d":{"r":"$L21","p":false,"v":"$6"},"c":"$Q22"}]] 1d:[["children",{"s":"(discover)","h":106,"d":{"r":"$L1e","p":false,"v":"$1f"},"c":"$Q20"}]] 1b:[["children",{"s":"templates","h":106,"d":{"r":"$L1c","p":false,"v":"$6"},"c":"$Q1d"}]] 18:[["children",{"s":"(no-sidebar)","h":74,"d":{"r":"$L19","p":false,"v":"$1a"},"c":"$Q1b"}]] 31:oc3c,8:[["children",{"s":"(dynamic-root)","h":58,"d":{"r":["$","$2","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/1bv-hlxwcj3mn.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/1t5z917tkvfhq.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/1jd4bptd-zy0t.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","3",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/03jd14_hafawi.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/27drikzuvvlkz.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/0w1lrom8rw5ju.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/11lyl92d5uidb.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1aewy7yrnlnw1.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/2rs4e_urgmfoi.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/2isb-ffyk13h1.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/2ooky3daf1w60.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/3xfqd79v-con1.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/3f25o_f629lnw.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/3i6ogyrec1lar.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/1n7bkbj_n_55k.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/3_b2wbin-ikog.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/1r-2wru0o9lfp.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/3941mm2kmjqco.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/3vous1g45z_7y.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/3noaaw7xa00yr.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/18_-xblcdgpy1.js","async":true,"nonce":"$undefined"}],"$L9","$La","$Lb","$Lc","$Ld","$Le","$Lf","$L10","$L11","$L12","$L13","$L14","$L15"],"$L16"]}],"p":false,"v":"$17"},"c":"$Q18"}]] 31: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"}]] 2c:X 2d:X 31:o716,0:{"q":"","i":false,"S":true,"r":"$1","t":{"t":{"s":"","h":90,"d":{"r":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$6"},"c":"$Q7"},"h":{"r":["$","$2","h",{"children":[null,["$","$L26","puTcKbhg1vl0NKt8ebfWcv",{"children":"$L27"}],["$","div","puTcKbhg1vl0NKt8ebfWcm",{"hidden":true,"children":["$","$L29",null,{"children":["$","$2a",null,{"name":"Next.Metadata","children":"$L2b"}]}]}]]}],"p":false,"v":"$2c"}},"s":"$2d","a":"$@2e","w":"$@2f"} 31:o1000,30:"/chat-static/_next/static/immutable/chunks/27drikzuvvlkz.js" 31:"/chat-static/_next/static/immutable/chunks/0w1lrom8rw5ju.js" 32:"/chat-static/_next/static/immutable/chunks/11lyl92d5uidb.js" 33:"/chat-static/_next/static/immutable/chunks/1aewy7yrnlnw1.js" 34:"/chat-static/_next/static/immutable/chunks/2rs4e_urgmfoi.js" 35:"/chat-static/_next/static/immutable/chunks/2isb-ffyk13h1.js" 36:"/chat-static/_next/static/immutable/chunks/2ooky3daf1w60.js" 37:"/chat-static/_next/static/immutable/chunks/3xfqd79v-con1.js" 38:"/chat-static/_next/static/immutable/chunks/3f25o_f629lnw.js" 39:"/chat-static/_next/static/immutable/chunks/3i6ogyrec1lar.js" 3a:"/chat-static/_next/static/immutable/chunks/1n7bkbj_n_55k.js" 3b:"/chat-static/_next/static/immutable/chunks/3_b2wbin-ikog.js" 3c:"/chat-static/_next/static/immutable/chunks/1r-2wru0o9lfp.js" 3d:"/chat-static/_next/static/immutable/chunks/3941mm2kmjqco.js" 3e:"/chat-static/_next/static/immutable/chunks/3vous1g45z_7y.js" 3f:"/chat-static/_next/static/immutable/chunks/3noaaw7xa00yr.js" 40:"/chat-static/_next/static/immutable/chunks/18_-xblcdgpy1.js" 41:"/chat-static/_next/static/immutable/chunks/1bmakg034cezp.js" 42:"/chat-static/_next/static/immutable/chunks/2c2ur0yl_ff2s.js" 43:"/chat-static/_next/static/immutable/chunks/3b8d4_xwoqc18.js" 44:"/chat-static/_next/static/immutable/chunks/10nyt517pjj02.js" 45:"/chat-static/_next/static/immutable/chunks/1bhi04iocyynd.js" 46:"/chat-static/_next/static/immutable/chunks/22d52d8i9k163.js" 47:"/chat-static/_next/static/immutable/chunks/0xrpdws0tbyya.js" 48:"/chat-static/_next/static/immutable/chunks/2s-65qq2eoe96.js" 49:"/chat-static/_next/static/immutable/chunks/254eugkkwc6ss.js" 4a:"/chat-static/_next/static/immutable/chunks/3upi5_u62q_gq.js" 4b:"/chat-static/_next/static/immutable/chunks/0amyfdl50mz4z.js" 4c:"/chat-static/_next/static/immutable/chunks/0bhx0z1oa2-oe.js" 4d:"/chat-static/_next/static/immutable/chunks/3ppx1kyz3ck5n.js" 4e:"/chat-static/_next/static/immutable/chunks/3t6hx8dv_rt0w.js" 4f:"/chat-static/_next/static/immutable/chunks/13chkuejbk5mz.js" 50:"/chat-static/_next/static/immutable/chunks/2-2kcomlk7g3a.js" 51:"/chat-static/_next/static/immutable/chunks/2jax3rb0sbtfv.js" 52:"ScopedPromiseContextProvider" 53:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"$52"] 5a:"SidebarUIProvider" 5b:I[475961,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"$5a"] 5c:I[990009,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"Header"] 5d:I[980088,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"DynamicCMDK"] 5f:"LoadingBoundaryProvider" 60:I[381307,["$3"],"$5f"] 61:"/chat-static/_next/static/immutable/chunks/25z7qph2amysi.js" 62:"/chat-static/_next/static/immutable/chunks/0iv1vmo68w9j8.js" 63:"/chat-static/_next/static/immutable/chunks/2g_0v-a162i2t.js" 64:"/chat-static/_next/static/immutable/chunks/3zxdefw6bzep4.js" 65:"/chat-static/_next/static/immutable/chunks/1_4vns4okcppg.js" 66:"TemplatePreviewContainer" 67:I[959794,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$66"] 68:"TemplateInfoSection" 69:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62"31:oec5,,"$63","$64","$65"],"$68"] 6a:"TemplateInfoSectionGroup" 6b:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$6a"] 6e:I[176645,["$3"],"OutletBoundary"] 6:C 9:["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/1bmakg034cezp.js","async":true,"nonce":"$undefined"}] a:["$","script","script-18",{"src":"/chat-static/_next/static/immutable/chunks/2c2ur0yl_ff2s.js","async":true,"nonce":"$undefined"}] b:["$","script","script-19",{"src":"/chat-static/_next/static/immutable/chunks/3b8d4_xwoqc18.js","async":true,"nonce":"$undefined"}] c:["$","script","script-20",{"src":"/chat-static/_next/static/immutable/chunks/10nyt517pjj02.js","async":true,"nonce":"$undefined"}] d:["$","script","script-21",{"src":"/chat-static/_next/static/immutable/chunks/1bhi04iocyynd.js","async":true,"nonce":"$undefined"}] e:["$","script","script-22",{"src":"/chat-static/_next/static/immutable/chunks/22d52d8i9k163.js","async":true,"nonce":"$undefined"}] f:["$","script","script-23",{"src":"/chat-static/_next/static/immutable/chunks/0xrpdws0tbyya.js","async":true,"nonce":"$undefined"}] 10:["$","script","script-24",{"src":"/chat-static/_next/static/immutable/chunks/2s-65qq2eoe96.js","async":true,"nonce":"$undefined"}] 11:["$","script","script-25",{"src":"/chat-static/_next/static/immutable/chunks/254eugkkwc6ss.js","async":true,"nonce":"$undefined"}] 12:["$","script","script-26",{"src":"/chat-static/_next/static/immutable/chunks/3upi5_u62q_gq.js","async":true,"nonce":"$undefined"}] 13:["$","script","script-27",{"src":"/chat-static/_next/static/immutable/chunks/0amyfdl50mz4z.js","async":true,"nonce":"$undefined"}] 14:["$","script","script-28",{"src":"/chat-static/_next/static/immutable/chunks/0bhx0z1oa2-oe.js","async":true,"nonce":"$undefined"}] 15:["$","script","script-29",{"src":"/chat-static/_next/static/immutable/chunks/3ppx1kyz3ck5n.js","async":true,"nonce":"$undefined"}] 19:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/3t6hx8dv_rt0w.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/13chkuejbk5mz.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/2-2kcomlk7g3a.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/2jax3rb0sbtfv.js","async":true,"nonce":"$undefined"}]],["$","$L53",null,{"params":null,"promises":{"scopeUserDetails":"$@54","team":"$@55","vercelProjectsFavorites":"$@56","chats":"$@57","sidebarProjectGroups":"$@58","sidebarDrafts":"$@59"},"children":["$","$L5b",null,{"children":[["$","$L5c",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"}]}],["$","$L5d",null,{}]]}]}]]}] 1c:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1e:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/25z7qph2amysi.js","async":true,"nonce":"$undefined"}]],"$L5e"]}] 31:o10d9,21:["$","$L60",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":[["$","$L67",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":[["$","$L69",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"}]]}]}],["$","$L6b",null,{"className":"w-full lg:w-80","children":[["$","$L69",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"}]]}]}]}],["$","$L69",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"}]]}]}],["$","$L69",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/0_ufz3oij4tb2.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":["$L6c",[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}] 31:o293,23:["$","$2","c",{"children":["$L6d",[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/0iv1vmo68w9j8.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/2g_0v-a162i2t.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/3zxdefw6bzep4.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1_4vns4okcppg.js","async":true,"nonce":"$undefined"}]],["$","$L6e",null,{"children":["$","$2a",null,{"name":"Next.MetadataOutlet","children":"$@6f"}]}]]}] 31:o5f4,76:I[339811,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"PageLayout"] 77:"ScrollFadeContainer" 78:I[388503,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"$77"] 79:"CommunityTabsClient" 7a:I[490134,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"$79"] 7b:"CommunityLiveSearch" 7c:I[803568,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"$7b"] 7d:I[32970,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"ZoneProvider"] 7e:I[532822,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61"],"default"] 2d:300 17:T8,variants1f:T8,variants70:T18d6,31: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"}] });31:o534,16:["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","meta",null,{"name":"ahrefs-site-verification","content":"e2ef51ac3cec223624a89ee7790eda482d23374870bff86fe0e0c599b8de4b51"}],["$","script",null,{"dangerouslySetInnerHTML":{"__html":"$70"}}],"$L71","$L72","$L73","$L74"]}],"$L75"]}] 5e:["$","$L76",null,{"actions":["$","div",null,{"className":"flex lg:pr-1 items-center w-full justify-between flex-row gap-2 relative","children":[["$","$L78",null,{"leftFadeClassName":"left-0 z-20","rightFadeClassName":"right-0 z-20","showButtons":false,"className":"flex-1 min-w-0","scrollableClassName":"px-0","children":["$","$L7a",null,{}]}],["$","$2a",null,{"children":["$","$L7c",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":["$","$L7d",null,{"zone":"chat","children":["$","$L7e",null,{}]}]}]]}] 31:o1000,7f:"GeistThemeScript" 80:I[943185,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$7f"] 81:I[600033,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"AppStoreMetaTag"] 82:I[943185,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"GeistProvider"] 83:I[818362,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"LocaleProvider"] 84:I[841245,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"MotionConfig"] 85:"AtomicContextSWRProvider" 86:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"$85"] 87:"GlobalPromiseContextProvider" 88:I[850359,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51"],"$87"] 8b:I[827887,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"JotaiProvider"] 8c:"ServerQuerySWRRuntimeProvider" 8d:I[74757,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$8c"] 8f:I[815349,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"CleanupStorage"] 90:I[470669,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"Analytics"] 91:I[191173,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"SpeedInsights"] 93:"VercelianAppFlowMigrator" 94:I[23825,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$93"] 95:I[108762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"TrackInfo"] 96:I[578386,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"PageViewTracker"] 97:I[356301,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"AutoCapture"] 71:["$","$L80",null,{"storageKey":"theme"}] 72:["$","$2a",null,{"children":["$","$L81",null,{}]}] 73:["$","meta",null,{"name":"slack-app-id","content":"A09PS08K5R8"}] 74:["$","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/compan31: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\"}}]"}}] 31:o93b,75:["$","body",null,{"className":"font-sans bg-v0-background-200 text-v0-gray-1000 antialiased kSVEZa_variable yCrHjW_variable hGs1mq_variable","children":[["$","$L82",null,{"storageKey":"theme","withScript":false,"children":["$","$L83",null,{"locale":"en","children":["$","$L84",null,{"reducedMotion":"user","children":["$","$L86",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":["$","$L88",null,{"params":null,"promises":{"dailyModelUsage":"$@89","freeFixWithV0Usage":"$@8a"},"children":[["$","$L8b",null,{"children":["$","$L8d",null,{"children":"$L8e"}]}],["$","$L8f",null,{}]]}]}]}]}]}],["$","$L90",null,{}],["$","$L91",null,{"endpoint":"https://v0sdk.com/_vercel/speed-insights/vitals"}],["$","$2a",null,{"children":"$L92"}],["$","$L94",null,{}],["$","$L95",null,{}],["$","$L96",null,{}],["$","$L97",null,{}]]}] 31:o90,27:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1"}]] 31:oe,2c:T8,variants31:o1000,98:"HydrateDurableAtoms" 99:I[783749,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$98"] 9a:I[359783,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"DataProvider"] 9b:I[32170,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"UserProvider"] 9d:"AnimatedIconProvider" 9e:I[908887,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$9d"] 9f:I[30570,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"PortalProvider"] a0:"SnowflakePublishProvider" a1:I[966820,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a0"] a2:"UserInputProvider" a3:I[472914,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a2"] a4:I[69221,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"CmdkProvider"] a5:"VirtualMachineUIStateProvider" a6:I[319228,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a5"] a7:"DeployedPreviewIframeRefProvider" a8:I[166890,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a7"] a9:"PreviewSourceUIStateProvider" aa:I[197843,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$a9"] ab:I[367078,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"LoaderProvider"] ac:"PromptFormUIProvider" ad:I[595358,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$ac"] ae:I[242759,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"FlagsProvider"] b0:I[723704,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"NuqsAdapter"] b1:"ChatTabsProvider" b2:I[568561,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$b1"] b3:"PersonalScopeMigrationAnnouncementProvider" b4:I[206559,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$b3"] b6:"AnnouncementVisibilityProvider" b7:I[878519,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$b6"] ba:I[561588,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$3931:o5e1,","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"Toaster"] bb:I[407562,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"Toaster"] bc:"SuspendingDialogs" bd:I[840793,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"$bc"] be:I[323194,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"SignInDialog"] bf:I[279070,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"ConsentBanner"] c0:"/chat-static/_next/static/immutable/chunks/2-hq5fh7i4qph.js" c1:I[192842,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$c0"],"ChatWarning"] c2:I[15279,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d"],"SessionManager"] 31:o8ad,8e:["$","$L99",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":["$","$L9a",null,{"children":["$","$L9b",null,{"expectUser":false,"userPromise":"$@9c","children":["$","$L9e",null,{"children":["$","$L9f",null,{"children":["$","$La1",null,{"children":["$","$La3",null,{"children":["$","$La4",null,{"children":["$","$La6",null,{"children":["$","$La8",null,{"children":["$","$Laa",null,{"children":["$","$Lab",null,{"children":["$","$Lad",null,{"children":["$","$Lae",null,{"promise":"$@af","middlewareFlags":[],"children":["$","$Lb0",null,{"children":["$","$Lb2",null,{"children":["$","$Lb4",null,{"destinationTeamIdPromise":"$@b5","children":["$","$Lb7",null,{"visiblePromise":"$@b8","children":["$","div",null,{"className":"max-h-screen-patched min-h-screen-patched flex w-full flex-col overflow-auto bg-v0-background-200","vaul-drawer-wrapper":"","children":[["$","$2a",null,{"fallback":null,"children":"$Lb9"}],["$","$Lba",null,{}],["$","$Lbb",null,{}],["$","$2a",null,{"fallback":null,"children":["$","$Lbd",null,{}]}],["$","$Lbe",null,{}],["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","$Lbf",null,{}]]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}] 31:o2a2,59:null 6c:["$","$Lc1",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}] 92:["$","$Lc2",null,{"enabled":false}] 31:o20,9c:"$undefined" b8:true b9:null 31:o24,2c:T1,?24:T1,?2d:60 24:T2,id2c:T2,id31:o2f7,b5:null af:{"requested":null,"identity":null,"resolution":"anonymous","flags":{"aepe":false,"asse":false,"afre":false,"bvge":false,"cste":false,"igm":"gateway.google/gemini-3.1-flash-lite-image","ctv2":false,"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,"f5e":true,"f51e":true,"gmpe":true,"impe":false,"gope":false,"awde":false,"awpse":false,"g56se":true,"g52e":false,"g46e":false,"kk3e":false,"o5e":true,"ept":false,"pwz":true,"shce":false,"shme":false,"idue":false,"ipc":true,"dsrr":false,"ftr":null}} 31:o652,c3:I[37565,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"S"] c4:"KeepClientOnUpToDateSlugPath" c5:I[983440,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$c4"] c6:"TemplateFlagDialog" c7:I[39126,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$c6"] c8:I[482195,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],""] c9:"TemplateStatusBadge" ca:I[484402,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$c9"] cb:I[834117,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"CommunityAvatar"] 31:o112e,6d:["$","$Lc3",null,{"value":{"fallback":{"template:Odwmru8eGxB:likes":{"likeCount":22,"isLiked":false}}},"children":[["$","$Lc5",null,{"id":"Odwmru8eGxB","title":"A simple MindMap App"}],["$","$Lc7",null,{"templateId":"Odwmru8eGxB"}],["$","div",null,{"data-testid":"template-detail-content","className":"flex flex-1 w-full gap-y-6 flex-col items-center","children":[["$","div",null,{"data-testid":"template-detail-header","className":"flex w-full flex-col items-start gap-6 max-w-[1600px]","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"max-w-full","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"text-v0-gray-900 flex items-center text-sm break-words gap-0.5 flex-nowrap","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$Lc8",null,{"href":"/templates","prefetch":true,"children":"Templates","data-slot":"breadcrumb-link","className":"hover:text-v0-gray-1000 transition-colors","ref":null}]}],[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-4","children":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"m6.75 3.94.53.53 2.82 2.82a1 1 0 0 1 0 1.42l-2.82 2.82-.53.53L5.69 11l.53-.53L8.69 8 6.22 5.53 5.69 5z","clipRule":"evenodd"}]}]}],["$","$Lc8",null,{"className":"hover:text-v0-gray-1000 transition-colors capitalize truncate","href":"/templates/apps-and-games","prefetch":true,"children":"Apps & Games","data-slot":"breadcrumb-link","ref":null}]],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-4","children":["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"children":"$6d:props:children:2:props:children:0:props:children:0:props:children:props:children:1:0:props:children:props:children"}]}],["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"text-v0-gray-1000 font-normal capitalize truncate","children":"A simple MindMap App"}]]}]}],["$","div",null,{"className":"flex w-full flex-col items-start justify-between gap-4 sm:flex-row sm:items-center sm:gap-2","children":[["$","div",null,{"className":"flex flex-col gap-2 text-left","children":[["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"data-testid":"template-detail-title","className":"line-clamp-1 text-heading-32","children":"A simple MindMap App"}],["$","$Lca",null,{"status":"approved"}]]}],["$","div",null,{"className":"flex items-center flex-wrap gap-3","children":[["$","$Lc8",null,{"className":"flex items-center gap-1.5","href":"/@asifkabeer1-4325","children":[["$","$Lcb",null,{"className":"size-5 sm:size-6","username":"asifkabeer1-4325","teamId":"team_QHf2gO56fZX3AcCgYLjqDnXi","teamAvatarClassName":"size-3 sm:size-3.5"}],["$","p",null,{"className":"text-sm font-medium text-v0-gray-900","children":"asifkabeer1-4325"}]]}],["$","div",null,{"className":"flex flex-row items-center gap-1.5 text-v0-gray-900","children":[["$","div",null,{"className":"flex flex-row whitespace-nowrap items-center gap-1.5","children":[["$","svg",null,{"viewBox":"0 0 16 16","height":16,"width":16,"data-slot":"geist-icon","data-glyph":"$undefined","style":{"color":"currentColor"},"className":"size-3","children":["$","path",null,{"fill":"currentColor","fillRule":"evenodd","d":"M2.5 3.25C2.5 1.45 3.96 0 5.75 0h.5C8.05 0 9.5 1.46 9.5 3.25v.5C9.5 5.55 8.04 7 6.25 7h-.5A3.25 3.25 0 0 1 2.5 3.75zM5.75 1.5C4.78 1.5 4 2.28 4 3.25v.5c0 .97.78 1.75 1.75 1.75h.5C7.22 5.5 8 4.72 8 3.75v-.5c0-.97-.78-1.75-1.75-1.75zm-4.25 13v-1.33a4.8 4.8 0 0 1 4.33-2.67h.34a4.8 4.8 0 0 1 4.33 2.67v1.33zM5.83 9a6.3 6.3 0 0 0-5.76 3.69l-.07.15V16h12v-3.16l-.07-.15A6.3 6.3 0 0 0 6.17 9zm10.1 3.69a6.3 6.3 0 0 0-2.59-2.84l-.75 1.3c.8.46 1.48 1.16 1.91 2.02v1.33h-1V16H16v-3.16zM11.25 0h-.75v1.5h.75c.97 0 1.75.78 1.75 1.75v.5c0 .97-.78 1.75-1.75 1.75h-.75V7h.75c1.8 0 3.25-1.46 3.25-3.25v-.5c0-1.8-1.46-3.25-3.25-3.25","clipRule":"evenodd"}]}],"$Lcc"]}],"$Lcd","$Lce"]}]]}]]}],"$Lcf"]}]]}],"$Ld0"]}]]}] 31:o1000,d1:"TemplateCardStatsLikesClient" d2:I[441648,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$d1"] d3:"TemplateFlagButton" d4:I[39126,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$d3"] d5:"TemplateLikeButton" d6:I[605890,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$d5"] d7:"TemplateBlockButton" d8:I[411379,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$d7"] da:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"TemplateTags"] db:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"TemplateShare"] dc:"TemplateLastUpdated" dd:I[164762,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$dc"] cc:["$","span",null,{"className":"text-[13px] leading-none","children":"72"}] cd:["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-dot size-4 -mx-1","children":[["$","circle","18d7e5",{"cx":"12.1","cy":"12.1","r":"1"}],"$undefined"]}] ce:["$","$Ld2",null,{"templateCanonId":"Odwmru8eGxB"}] cf:["$","div",null,{"className":"flex flex-row-reverse items-center gap-2 sm:flex-row","children":[null,null,null,["$","$Ld4",null,{}],null,null,["$","$Ld6","Odwmru8eGxB",{"templateCanonId":"Odwmru8eGxB"}],null,["$","$Ld8",null,{"buttonProps":{"className":"h-7 rounded-md px-2 sm:h-8 sm:rounded-lg sm:px-3"},"buttonType":"v0","template":{"blockId":"b_kZu8Ez4DuWv","description":"Create unlimited mind maps without login/ sign up. Upload JSONs to visualize. \n\nJSON format\nSample JSON\nUse \"name\" for the node label and \"children\" for sub-nodes. Nest as needed.\n\n{\n \"name\": \"Animal Kingdom\",\n \"children\": [\n { \"name\": \"Mammals 🐻\" },\n { \"name\": \"Birds 🐦\" }\n ]\n}","imageUrl":"https://gvsmhepiuiax2e6y.public.blob.vercel-storage.com/templates/assets/mindmaps-0WestSW9bklWyQe6eMytGRBHzxwEPw.png","title":"A simple MindMap App","publishedToCommunity":"approved","templateCanonId":"Odwmru8eGxB","templateVersionId":"MP7jHlLfgeM","uses":72,"isTeamTemplate":true,"likeCount":22,"vercelDeploymentUrl":null,"createdAt":"$D2025-08-14T19:58:49.071Z","category":"apps-and-games","tags":["mindmap","productivity","tools","apps"],"authorUsername":"asifkabeer1-4325","isVercel":false,"teamId":"team_QHf2gO56fZX3AcCgYLjqDnXi","liked":false},"isOwnTemplate":false}]]}] d0:["$","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":[["$","$L67","description",{"testId":"template-detail-preview","children":"$Ld9"}],["$","div",null,{"className":"flex flex-col lg:flex-row gap-9","children":[["$","$L69",nu31:o328,ll,{"className":"flex-1","title":"About","children":["$","p",null,{"className":"whitespace-pre-wrap text-v0-gray-900","children":"Create unlimited mind maps without login/ sign up. Upload JSONs to visualize. \n\nJSON format\nSample JSON\nUse \"name\" for the node label and \"children\" for sub-nodes. Nest as needed.\n\n{\n \"name\": \"Animal Kingdom\",\n \"children\": [\n { \"name\": \"Mammals 🐻\" },\n { \"name\": \"Birds 🐦\" }\n ]\n}"}]}],["$","$L6b",null,{"className":"w-full lg:w-80","children":[["$","$Lda",null,{"tags":"$cf:props:children:8:props:template:tags"}],["$","$Ldb",null,{"templateUrl":"https://v0.app/templates/a-simple-mindmap-app-Odwmru8eGxB"}],["$","$Ldd",null,{"updatedAt":"$D2025-08-15T14:05:40.239Z"}]]}]]}]]}],["$","$2a",null,{"fallback":null,"children":"$Lde"}]]}] 31:o22f,df:"ExplicitChatIdProvider" e0:I[903690,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$df"] e1:I[838238,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"SWRDataProvider"] e2:T69cf,31:o69cf,[V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "mind-map-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "html2canvas": "^1.4.1" } } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef, useCallback, useEffect } from "react" import { Plus, Undo2, Redo2, ZoomIn, ZoomOut, Download, Trash2, Upload } from "lucide-react" import { Button } from "@/components/ui/button" interface Node { id: string text: string x: number y: number parentId: string | null children: string[] level: number } interface Connection { from: string to: string } interface NodeDimensions { width: number height: number } const COLORS = [ "from-blue-400 to-blue-600", "from-purple-400 to-purple-600", "from-green-400 to-green-600", "from-orange-400 to-orange-600", "from-pink-400 to-pink-600", ] const NODE_WIDTH = 237 const NODE_HEIGHT = 47 export default function MindMapApp() { const [nodes, setNodes] = useState>({ root: { id: "root", text: "Main Idea", x: 400, y: 300, parentId: null, children: [], level: 0, }, }) const [connections, setConnections] = useState([]) const [editingNode, setEditingNode] = useState(null) const [editText, setEditText] = useState("") const [selectedNode, setSelectedNode] = useState("root") const [history, setHistory] = useState[]>([]) const [historyIndex, setHistoryIndex] = useState(-1) const [zoom, setZoom] = useState(1) const [pan, setPan] = useState({ x: 0, y: 0 }) const [isDragging, setIsDragging] = useState(false) const [dragStart, setDragStart] = useState({ x: 0, y: 0 }) const [showImportModal, setShowImportModal] = useState(false) const [importText, setImportText] = useState("") const [isModifierHeld, setIsModifierHeld] = useState(false) const [nodeDimensions, setNodeDimensions] = useState>({}) const svgRef = useRef(null) const containerRef = useRef(null) const canvasRef = useRef(null) const fileInputRef = useRef(null) const nodeRefs = useRef>({}) const measureNodeDimensions = useCallback(() => { const newDimensions: Record = {} Object.keys(nodes).forEach((nodeId) => { const nodeElement = nodeRefs.current[nodeId] if (nodeElement) { const rect = nodeElement.getBoundingClientRect() newDimensions[nodeId] = { width: rect.width / zoom, // Adjust for zoom height: rect.height / zoom, } } }) setNodeDimensions(newDimensions) }, [nodes, zoom]) useEffect(() => { const timer = setTimeout(measureNodeDimensions, 50) return () => clearTimeout(timer) }, [measureNodeDimensions, editingNode]) const saveToHistory = useCallback( (newNodes: Record) => { const newHistory = history.slice(0, historyIndex + 1) newHistory.push({ ...newNodes }) setHistory(newHistory) setHistoryIndex(newHistory.length - 1) }, [history, historyIndex], ) const calculateLayout = useCallback( (nodeMap: Record) => { const updatedNodes = { ...nodeMap } const calculateBranchHeight = (nodeId: string): number => { const node = updatedNodes[nodeId] if (!node.children.length) return NODE_HEIGHT + 30 const childrenHeight = node.children.reduce((total, childId) => { return total + calculateBranchHeight(childId) }, 0) return Math.max(NODE_HEIGHT + 30, childrenHeight) } const positionNodeAndChildren = (nodeId: string, startY: number): number => { const node = updatedNodes[nodeId] const currentY = startY if (node.children.length === 0) { updatedNodes[nodeId] = { ...node, y: currentY } return currentY + NODE_HEIGHT + 30 } const childHeights = node.children.map((childId) => calculateBranchHeight(childId)) const totalChildrenHeight = childHeights.reduce((sum, height) => sum + height, 0) const parentY = currentY + totalChildrenHeight / 2 - (NODE_HEIGHT + 30) / 2 updatedNodes[nodeId] = { ...node, y: parentY } let childY = currentY node.children.forEach((childId, index) => { childY = positionNodeAndChildren(childId, childY) }) return currentY + totalChildrenHeight } const calculateDynamicPositions = () => { // Start with root node at fixed position updatedNodes.root.x = 400 // Process each level, calculating x position based on parent's actual width const processLevel = (nodeIds: string[]) => { nodeIds.forEach((nodeId) => { const node = updatedNodes[nodeId] if (node.parentId) { const parent = updatedNodes[node.parentId] const parentDimensions = nodeDimensions[parent.id] || { width: NODE_WIDTH, height: NODE_HEIGHT } // Position child node with 50px gap after parent's actual width updatedNodes[nodeId] = { ...node, x: parent.x + parentDimensions.width + 50, } } }) } // Group nodes by level and process each level const levelGroups: Record = {} Object.values(updatedNodes).forEach((node) => { if (!levelGroups[node.level]) levelGroups[node.level] = [] levelGroups[node.level].push(node.id) }) // Process levels 1 and above (skip root level 0) Object.keys(levelGroups) .map(Number) .sort((a, b) => a - b) .slice(1) // Skip level 0 (root) .forEach((level) => { processLevel(levelGroups[level]) }) } // Calculate dynamic positions if we have dimension data if (Object.keys(nodeDimensions).length > 0) { calculateDynamicPositions() } else { // Fallback to fixed spacing if dimensions not available yet const levelGroups: Record = {} Object.values(updatedNodes).forEach((node) => { if (!levelGroups[node.level]) levelGroups[node.level] = [] levelGroups[node.level].push(node.id) }) Object.entries(levelGroups).forEach(([level, nodeIds]) => { const levelNum = Number.parseInt(level) const x = 400 + levelNum * 320 nodeIds.forEach((nodeId) => { const node = updatedNodes[nodeId] updatedNodes[nodeId] = { ...node, x } }) }) } positionNodeAndChildren("root", 100) return updatedNodes }, [nodeDimensions], ) // Added nodeDimensions dependency const addChildNode = useCallback( (parentId: string) => { const newId = `node-${Date.now()}` const parent = nodes[parentId] const newNode: Node = { id: newId, text: "New Idea", x: parent.x + 350, y: parent.y, parentId, children: [], level: parent.level + 1, } const updatedNodes = { ...nodes, [newId]: newNode, [parentId]: { ...parent, children: [...parent.children, newId], }, } const layoutedNodes = calculateLayout(updatedNodes) const newConnection: Connection = { from: parentId, to: newId } setConnections((prev) => [...prev, newConnection]) saveToHistory(nodes) setNodes(layoutedNodes) setSelectedNode(newId) setEditingNode(newId) setEditText("") // Start with empty text for new nodes so placeholder shows }, [nodes, calculateLayout, saveToHistory], ) const addSiblingNode = useCallback( (nodeId: string) => { const node = nodes[nodeId] if (!node.parentId) return addChildNode(node.parentId) }, [nodes, addChildNode], ) const deleteNode = useCallback( (nodeId: string) => { if (nodeId === "root") return const node = nodes[nodeId] const parent = node.parentId ? nodes[node.parentId] : null saveToHistory(nodes) const nodesToDelete = new Set() const collectChildren = (id: string) => { nodesToDelete.add(id) nodes[id].children.forEach(collectChildren) } collectChildren(nodeId) const updatedNodes = { ...nodes } if (parent) { updatedNodes[parent.id] = { ...parent, children: parent.children.filter((id) => id !== nodeId), } } nodesToDelete.forEach((id) => { delete updatedNodes[id] }) setConnections((prev) => prev.filter((conn) => !nodesToDelete.has(conn.from) && !nodesToDelete.has(conn.to))) const layoutedNodes = calculateLayout(updatedNodes) setNodes(layoutedNodes) setSelectedNode(parent?.id || "root") }, [nodes, calculateLayout, saveToHistory], ) const startEditing = useCallback( (nodeId: string) => { setEditingNode(nodeId) const nodeText = nodes[nodeId].text if (nodeText === "New Idea" || nodeText === "Main Idea") { setEditText("") } else { setEditText(nodeText) } setSelectedNode(nodeId) }, [nodes], ) const saveEdit = useCallback(() => { if (!editingNode) return saveToHistory(nodes) setNodes((prev) => ({ ...prev, [editingNode]: { ...prev[editingNode], text: editText, }, })) setEditingNode(null) }, [editingNode, editText, nodes, saveToHistory]) const handleKeyDown = useCallback( (e: KeyboardEvent) => { if (editingNode) return switch (e.key) { case "Tab": e.preventDefault() addChildNode(selectedNode) break case "Delete": case "Backspace": e.preventDefault() deleteNode(selectedNode) break case "s": case "S": e.preventDefault() addSiblingNode(selectedNode) break case "l": case "L": e.preventDefault() // Center on main idea: 10% from left, vertically middle, 90% zoom setZoom(0.9) setPan({ x: window.innerWidth * 0.1 - 400, y: window.innerHeight * 0.5 - 300 }) setSelectedNode("root") break case "Escape": setEditingNode(null) break } }, [selectedNode, editingNode, addChildNode, deleteNode, addSiblingNode], ) useEffect(() => { document.addEventListener("keydown", handleKeyDown) return () => document.removeEventListener("keydown", handleKeyDown) }, [handleKeyDown]) const undo = useCallback(() => { if (historyIndex > 0) { setHistoryIndex(historyIndex - 1) setNodes(history[historyIndex - 1]) } }, [history, historyIndex]) const redo = useCallback(() => { if (historyIndex < history.length - 1) { setHistoryIndex(historyIndex + 1) setNodes(history[historyIndex + 1]) } }, [history, historyIndex]) const exportToJSON = useCallback(() => { try { const convertNodeToSimpleFormat = (nodeId: string): any => { const node = nodes[nodeId] const result: any = { name: node.text } if (node.children.length > 0) { result.children = node.children.map((childId) => convertNodeToSimpleFormat(childId)) } return result } const mindmapData = convertNodeToSimpleFormat("root") const dataStr = JSON.stringify(mindmapData, null, 2) const dataBlob = new Blob([dataStr], { type: "application/json" }) const link = document.createElement("a") link.href = URL.createObjectURL(dataBlob) link.download = `mindmap-${new Date().toISOString().split("T")[0]}.json` link.click() URL.revokeObjectURL(link.href) } catch (error) { console.error("Export failed:", error) alert(`Export failed: ${error}`) } }, [nodes]) const importFromJSON = useCallback( (jsonData: string) => { try { const data = JSON.parse(jsonData) if (!data.name || typeof data.name !== "string") { throw new Error("Invalid JSON format: missing root name") } const convertToInternalFormat = ( simpleNode: any, parentId: string | null = null, level = 0, ): Record => { const nodeId = level === 0 ? "root" : `node-${Date.now()}-${Math.random()}` const nodes: Record = {} const node: Node = { id: nodeId, text: simpleNode.name, x: 400 + level * 320, y: 300, parentId, children: [], level, } nodes[nodeId] = node if (simpleNode.children && Array.isArray(simpleNode.children)) { simpleNode.children.forEach((child: any, index: number) => { const childNodes = convertToInternalFormat(child, nodeId, level + 1) const childId = Object.keys(childNodes)[0] node.children.push(childId) Object.assign(nodes, childNodes) }) } return nodes } const newNodes = convertToInternalFormat(data) saveToHistory(nodes) const layoutedNodes = calculateLayout(newNodes) setNodes(layoutedNodes) setSelectedNode("root") setShowImportModal(false) setImportText("") } catch (error) { console.error("Import failed:", error) alert(`Import failed: ${error}`) } }, [nodes, saveToHistory, calculateLayout], ) const handleFileUpload = useCallback( (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file) return const reader = new FileReader() reader.onload = (e) => { const content = e.target?.result as string if (content) { importFromJSON(content) } } reader.readAsText(file) if (fileInputRef.current) { fileInputRef.current.value = "" } }, [importFromJSON], ) const zoomIn = () => setZoom((prev) => Math.min(prev * 1.2, 3)) const zoomOut = () => setZoom((prev) => Math.max(prev / 1.2, 0.3)) const handleMouseDown = (e: React.MouseEvent) => { const target = e.target as HTMLElement if (target === containerRef.current || target === svgRef.current || target === canvasRef.current) { setIsDragging(true) setDragStart({ x: e.clientX - pan.x, y: e.clientY - pan.y }) e.preventDefault() } } useEffect(() => { const handleGlobalMouseMove = (e: MouseEvent) => { if (isDragging) { setPan({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y, }) e.preventDefault() } } const handleGlobalMouseUp = () => { setIsDragging(false) } const handleWheel = (e: WheelEvent) => { if (e.metaKey || e.ctrlKey) { e.preventDefault() e.stopPropagation() const container = containerRef.current if (container) { const scrollCompensation = e.deltaY * 2.0 // Adjust multiplier as needed // Zoom based on scroll direction if (e.deltaY < 0) { setZoom((prev) => Math.min(prev * 1.1, 3)) // Counter-scroll down to compensate for upward scroll container.scrollTop += scrollCompensation } else { setZoom((prev) => Math.max(prev / 1.1, 0.3)) // Counter-scroll up to compensate for downward scroll container.scrollTop += scrollCompensation } } } } if (isDragging) { document.addEventListener("mousemove", handleGlobalMouseMove) document.addEventListener("mouseup", handleGlobalMouseUp) } document.addEventListener("wheel", handleWheel, { passive: false }) return () => { document.removeEventListener("mousemove", handleGlobalMouseMove) document.removeEventListener("mouseup", handleGlobalMouseUp) document.removeEventListener("wheel", handleWheel) } }, [isDragging, dragStart]) const generatePath = (from: Node, to: Node) => { const fromDimensions = nodeDimensions[from.id] || { width: NODE_WIDTH, height: NODE_HEIGHT } const toDimensions = nodeDimensions[to.id] || { width: NODE_WIDTH, height: NODE_HEIGHT } const fromX = from.x + fromDimensions.width const fromY = from.y const toX = to.x const toY = to.y const midX = fromX + (toX - fromX) * 0.5 return `M ${fromX} ${fromY} C ${midX} ${fromY} ${midX} ${toY} ${toX} ${toY}` } useEffect(() => { const newConnections: Connection[] = [] Object.values(nodes).forEach((node) => { if (node.parentId && nodes[node.parentId]) { newConnections.push({ from: node.parentId, to: node.id }) } }) setConnections(newConnections) }, [nodes]) return (

{showImportModal && (

Import Mind Map

Paste JSON data:

setImportText(e.target.value)}
                  placeholder="Paste your mind map JSON data here..."
                  className="w-full h-32 p-3 border border-gray-300 rounded-md resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

<div>
                <input ref={fileInputRef} type="file" accept=".json" onChange={handleFileUpload} className="hidden" />
                <Button onClick={() => fileInputRef.current?.click()} variant="outline" className="w-full">
                  <Upload className="w-4 h-4 mr-2" />
                  Upload JSON File
                </Button>
              </div>
            </div>

<div className="flex gap-2 mt-6">
              <Button onClick={() => importFromJSON(importText)} disabled={!importText.trim()} className="flex-1">
                Import
              </Button>
              <Button
                onClick={() => {
                  setShowImportModal(false)
                  setImportText("")
                }}
                variant="outline"
                className="flex-1"
              >
                Cancel
              </Button>
            </div>
          </div>
        </div>
      )}

<div
        ref={containerRef}
        className={`w-full h-full ${isDragging ? "cursor-grabbing" : "cursor-grab"}`}
        style={{
          scrollbarWidth: "auto",
          scrollbarColor: "#cbd5e1 #f1f5f9",
        }}
        onMouseDown={handleMouseDown}
      >
        <div
          ref={canvasRef}
          className="relative transition-transform duration-200 ease-out"
          style={{
            width: "4000px",
            height: "3000px",
            minWidth: "100vw",
            minHeight: "100vh",
            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
            backgroundImage: `radial-gradient(circle, rgba(148, 163, 184, 0.15) 1px, transparent 1px)`,
            backgroundSize: "20px 20px",
          }}
        >
          <svg
            ref={svgRef}
            className="absolute inset-0 w-full h-full pointer-events-none"
            style={{ width: "100%", height: "100%" }}
          >
            {connections.map((conn) => {
              const fromNode = nodes[conn.from]
              const toNode = nodes[conn.to]
              if (!fromNode || !toNode) return null

return (
                <path
                  key={`${conn.from}-${conn.to}`}
                  d={generatePath(fromNode, toNode)}
                  stroke="url(#gradient)"
                  strokeWidth="3"
                  fill="none"
                  className="drop-shadow-sm"
                />
              )
            })}

{Object.values(nodes).map((node) => {
            const colorClass = COLORS[node.level % COLORS.length]
            const isSelected = selectedNode === node.id

return (
              <div
                key={node.id}
                className="absolute transition-all duration-300 ease-out animate-in fade-in slide-in-from-left-4"
                style={{
                  left: node.x,
                  top: node.y,
                  transform: "translate(0, -50%)",
                }}
              >
                <div
                  ref={(el) => {
                    if (el) nodeRefs.current[node.id] = el
                  }}
                  className={`
                  relative bg-gradient-to-r ${colorClass} 
                  rounded-xl shadow-lg hover:shadow-xl 
                  transition-all duration-200 ease-out
                  min-w-[${NODE_WIDTH}px] min-h-[${NODE_HEIGHT}px]
                  flex items-center justify-between
                  group cursor-pointer
                  border-2 ${isSelected ? "border-white border-opacity-60" : "border-white/20"}
                `}
                  onClick={() => setSelectedNode(node.id)}
                >
                  <div className="flex-1 px-4 py-3">
                    {editingNode === node.id ? (
                      <input
                        type="text"
                        value={editText}
                        onChange={(e) => setEditText(e.target.value)}
                        onBlur={saveEdit}
                        onKeyDown={(e) => {
                          if (e.key === "Enter") saveEdit()
                          if (e.key === "Escape") setEditingNode(null)
                        }}
                        className="w-full bg-transparent text-white placeholder-white/70 outline-none font-medium text-base"
                        autoFocus
                      />
                    ) : (
                      <span
                        onClick={() => startEditing(node.id)}
                        className="text-white font-medium text-base leading-tight cursor-text hover:bg-white/10 rounded px-1 py-0.5 transition-colors"
                      >
                        {node.text}
                      </span>
                    )}
                  </div>

<div className="flex items-center gap-1 mr-3 opacity-0 group-hover:opacity-100 transition-opacity">
                    <button
                      onClick={(e) => {
                        e.stopPropagation()
                        addChildNode(node.id)
                      }}
                      className="
                        w-8 h-8 rounded-full bg-white/20 hover:bg-white/30
                        flex items-center justify-center
                        transition-all duration-200 ease-out
                        hover:scale-110 active:scale-95
                      "
                    >
                      <Plus className="w-4 h-4 text-white" />
                    </button>
                    {node.id !== "root" && (
                      <button
                        onClick={(e) => {
                          e.stopPropagation()
                          deleteNode(node.id)
                        }}
                        className="
                          w-8 h-8 rounded-full bg-red-500/20 hover:bg-red-500/30
                          flex items-center justify-center
                          transition-all duration-200 ease-out
                          hover:scale-110 active:scale-95
                        "
                      >
                        <Trash2 className="w-4 h-4 text-white" />
                      </button>
                    )}
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>

<div className="fixed bottom-4 left-4 z-20 bg-white/90 backdrop-blur-sm rounded-lg p-3 shadow-lg text-xs text-gray-600">
        <div className="space-y-1">
          <div>
            <kbd className="px-1.5 py-0.5 bg-gray-100 rounded text-xs">Tab</kbd> Add child node
          </div>
          <div>
            <kbd className="px-1.5 py-0.5 bg-gray-100 rounded text-xs">S</kbd> Add sibling node
          </div>
          <div>
            <kbd className="px-1.5 py-0.5 bg-gray-100 rounded text-xs">Delete</kbd> Delete node
          </div>
          <div>
            <kbd className="px-1.5 py-0.5 bg-gray-100 rounded text-xs">L</kbd> Center on main idea
          </div>
          <div>
            <kbd className="px-1.5 py-0.5 bg-gray-100 rounded text-xs">Cmd/Ctrl + Scroll</kbd> Zoom
          </div>
        </div>
      </div>
    </div>
  )
}31:o240,d9:["$","$Le0",null,{"chatId":"f5q20IcLOny","children":["$","$Le1",null,{"data":{"@\"active-block\",\"f5q20IcLOny\",":{"id":"b_kZu8Ez4DuWv","messageId":"tzN3An4NKx2MxMW8ztlwzYj5gBsOzrVx","source":"$e2","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"mind-map-app","type":"code-project","project":"mind-map-app","taskNameActive":"Adding placeholder text behavior","taskNameComplete":"Added placeholder text behavior"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"f5q20IcLOny\",":false},"children":"$Le3"}]}]
31:o4fb,e4:"PublishedPageProvider"
e5:I[845210,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$e4"]
e6:"FullscreenContainer"
e7:I[481556,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$e6"]
e8:"TemplateBlockViewClient"
e9:I[552151,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$61","$62","$63","$64","$65"],"$e8"]
e3:["$","$Le5",null,{"children":["$","$Le7",null,{"mode":"$undefined","children":["$","$Le9",null,{"block":"$d9:props:children:props:data:@\"active-block\",\"f5q20IcLOny\",","allowMobileFullscreen":true,"initialSize":"$undefined","title":"A simple MindMap App","templateCanonId":"Odwmru8eGxB","templateVersionId":"MP7jHlLfgeM","authorizePublicFrame":true,"vmEnabled":false,"canViewConsole":false,"vercelDeploymentUrl":null}]}]}]
31:o11,2f:true
2e:44174
31:o22,2d:C
2c:C
1:C
24:C
1f:C
1a:C
17:C
31:C
e4:T69cf,[V0_FILE]json:file="package.json" isEdit="true" isMerged="true"
{
  "name": "mind-map-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "html2canvas": "^1.4.1"
  }
}
[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useRef, useCallback, useEffect } from "react"
import { Plus, Undo2, Redo2, ZoomIn, ZoomOut, Download, Trash2, Upload } from "lucide-react"
import { Button } from "@/components/ui/button"

interface Node {
  id: string
  text: string
  x: number
  y: number
  parentId: string | null
  children: string[]
  level: number
}

interface Connection {
  from: string
  to: string
}

interface NodeDimensions {
  width: number
  height: number
}

const COLORS = [
  "from-blue-400 to-blue-600",
  "from-purple-400 to-purple-600",
  "from-green-400 to-green-600",
  "from-orange-400 to-orange-600",
  "from-pink-400 to-pink-600",
]

const NODE_WIDTH = 237
const NODE_HEIGHT = 47

export default function MindMapApp() {
  const [nodes, setNodes] = useState<Record<string, Node>>({
    root: {
      id: "root",
      text: "Main Idea",
      x: 400,
      y: 300,
      parentId: null,
      children: [],
      level: 0,
    },
  })

const [connections, setConnections] = useState<Connection[]>([])
  const [editingNode, setEditingNode] = useState<string | null>(null)
  const [editText, setEditText] = useState("")
  const [selectedNode, setSelectedNode] = useState<string>("root")
  const [history, setHistory] = useState<Record<string, Node>[]>([])
  const [historyIndex, setHistoryIndex] = useState(-1)
  const [zoom, setZoom] = useState(1)
  const [pan, setPan] = useState({ x: 0, y: 0 })
  const [isDragging, setIsDragging] = useState(false)
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
  const [showImportModal, setShowImportModal] = useState(false)
  const [importText, setImportText] = useState("")
  const [isModifierHeld, setIsModifierHeld] = useState(false)

const [nodeDimensions, setNodeDimensions] = useState<Record<string, NodeDimensions>>({})

const svgRef = useRef<SVGSVGElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef = useRef<HTMLDivElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

const nodeRefs = useRef<Record<string, HTMLDivElement>>({})

const measureNodeDimensions = useCallback(() => {
    const newDimensions: Record<string, NodeDimensions> = {}

Object.keys(nodes).forEach((nodeId) => {
      const nodeElement = nodeRefs.current[nodeId]
      if (nodeElement) {
        const rect = nodeElement.getBoundingClientRect()
        newDimensions[nodeId] = {
          width: rect.width / zoom, // Adjust for zoom
          height: rect.height / zoom,
        }
      }
    })

setNodeDimensions(newDimensions)
  }, [nodes, zoom])

useEffect(() => {
    const timer = setTimeout(measureNodeDimensions, 50)
    return () => clearTimeout(timer)
  }, [measureNodeDimensions, editingNode])

const saveToHistory = useCallback(
    (newNodes: Record<string, Node>) => {
      const newHistory = history.slice(0, historyIndex + 1)
      newHistory.push({ ...newNodes })
      setHistory(newHistory)
      setHistoryIndex(newHistory.length - 1)
    },
    [history, historyIndex],
  )

const calculateLayout = useCallback(
    (nodeMap: Record<string, Node>) => {
      const updatedNodes = { ...nodeMap }

const calculateBranchHeight = (nodeId: string): number => {
        const node = updatedNodes[nodeId]
        if (!node.children.length) return NODE_HEIGHT + 30

const childrenHeight = node.children.reduce((total, childId) => {
          return total + calculateBranchHeight(childId)
        }, 0)

return Math.max(NODE_HEIGHT + 30, childrenHeight)
      }

const positionNodeAndChildren = (nodeId: string, startY: number): number => {
        const node = updatedNodes[nodeId]
        const currentY = startY

if (node.children.length === 0) {
          updatedNodes[nodeId] = { ...node, y: currentY }
          return currentY + NODE_HEIGHT + 30
        }

const childHeights = node.children.map((childId) => calculateBranchHeight(childId))
        const totalChildrenHeight = childHeights.reduce((sum, height) => sum + height, 0)

const parentY = currentY + totalChildrenHeight / 2 - (NODE_HEIGHT + 30) / 2
        updatedNodes[nodeId] = { ...node, y: parentY }

let childY = currentY
        node.children.forEach((childId, index) => {
          childY = positionNodeAndChildren(childId, childY)
        })

return currentY + totalChildrenHeight
      }

const calculateDynamicPositions = () => {
        // Start with root node at fixed position
        updatedNodes.root.x = 400

// Process each level, calculating x position based on parent's actual width
        const processLevel = (nodeIds: string[]) => {
          nodeIds.forEach((nodeId) => {
            const node = updatedNodes[nodeId]
            if (node.parentId) {
              const parent = updatedNodes[node.parentId]
              const parentDimensions = nodeDimensions[parent.id] || { width: NODE_WIDTH, height: NODE_HEIGHT }

// Position child node with 50px gap after parent's actual width
              updatedNodes[nodeId] = {
                ...node,
                x: parent.x + parentDimensions.width + 50,
              }
            }
          })
        }

// Group nodes by level and process each level
        const levelGroups: Record<number, string[]> = {}
        Object.values(updatedNodes).forEach((node) => {
          if (!levelGroups[node.level]) levelGroups[node.level] = []
          levelGroups[node.level].push(node.id)
        })

// Process levels 1 and above (skip root level 0)
        Object.keys(levelGroups)
          .map(Number)
          .sort((a, b) => a - b)
          .slice(1) // Skip level 0 (root)
          .forEach((level) => {
            processLevel(levelGroups[level])
          })
      }

// Calculate dynamic positions if we have dimension data
      if (Object.keys(nodeDimensions).length > 0) {
        calculateDynamicPositions()
      } else {
        // Fallback to fixed spacing if dimensions not available yet
        const levelGroups: Record<number, string[]> = {}
        Object.values(updatedNodes).forEach((node) => {
          if (!levelGroups[node.level]) levelGroups[node.level] = []
          levelGroups[node.level].push(node.id)
        })

Object.entries(levelGroups).forEach(([level, nodeIds]) => {
          const levelNum = Number.parseInt(level)
          const x = 400 + levelNum * 320

nodeIds.forEach((nodeId) => {
            const node = updatedNodes[nodeId]
            updatedNodes[nodeId] = { ...node, x }
          })
        })
      }

positionNodeAndChildren("root", 100)

return updatedNodes
    },
    [nodeDimensions],
  ) // Added nodeDimensions dependency

const addChildNode = useCallback(
    (parentId: string) => {
      const newId = `node-${Date.now()}`
      const parent = nodes[parentId]

const newNode: Node = {
        id: newId,
        text: "New Idea",
        x: parent.x + 350,
        y: parent.y,
        parentId,
        children: [],
        level: parent.level + 1,
      }

const updatedNodes = {
        ...nodes,
        [newId]: newNode,
        [parentId]: {
          ...parent,
          children: [...parent.children, newId],
        },
      }

const layoutedNodes = calculateLayout(updatedNodes)

const newConnection: Connection = { from: parentId, to: newId }
      setConnections((prev) => [...prev, newConnection])

saveToHistory(nodes)
      setNodes(layoutedNodes)
      setSelectedNode(newId)
      setEditingNode(newId)
      setEditText("") // Start with empty text for new nodes so placeholder shows
    },
    [nodes, calculateLayout, saveToHistory],
  )

const addSiblingNode = useCallback(
    (nodeId: string) => {
      const node = nodes[nodeId]
      if (!node.parentId) return

addChildNode(node.parentId)
    },
    [nodes, addChildNode],
  )

const deleteNode = useCallback(
    (nodeId: string) => {
      if (nodeId === "root") return

const node = nodes[nodeId]
      const parent = node.parentId ? nodes[node.parentId] : null

saveToHistory(nodes)

const nodesToDelete = new Set<string>()
      const collectChildren = (id: string) => {
        nodesToDelete.add(id)
        nodes[id].children.forEach(collectChildren)
      }
      collectChildren(nodeId)

const updatedNodes = { ...nodes }
      if (parent) {
        updatedNodes[parent.id] = {
          ...parent,
          children: parent.children.filter((id) => id !== nodeId),
        }
      }

nodesToDelete.forEach((id) => {
        delete updatedNodes[id]
      })

setConnections((prev) => prev.filter((conn) => !nodesToDelete.has(conn.from) && !nodesToDelete.has(conn.to)))

const layoutedNodes = calculateLayout(updatedNodes)
      setNodes(layoutedNodes)
      setSelectedNode(parent?.id || "root")
    },
    [nodes, calculateLayout, saveToHistory],
  )

const startEditing = useCallback(
    (nodeId: string) => {
      setEditingNode(nodeId)
      const nodeText = nodes[nodeId].text
      if (nodeText === "New Idea" || nodeText === "Main Idea") {
        setEditText("")
      } else {
        setEditText(nodeText)
      }
      setSelectedNode(nodeId)
    },
    [nodes],
  )

const saveEdit = useCallback(() => {
    if (!editingNode) return

saveToHistory(nodes)
    setNodes((prev) => ({
      ...prev,
      [editingNode]: {
        ...prev[editingNode],
        text: editText,
      },
    }))
    setEditingNode(null)
  }, [editingNode, editText, nodes, saveToHistory])

const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (editingNode) return

switch (e.key) {
        case "Tab":
          e.preventDefault()
          addChildNode(selectedNode)
          break
        case "Delete":
        case "Backspace":
          e.preventDefault()
          deleteNode(selectedNode)
          break
        case "s":
        case "S":
          e.preventDefault()
          addSiblingNode(selectedNode)
          break
        case "l":
        case "L":
          e.preventDefault()
          // Center on main idea: 10% from left, vertically middle, 90% zoom
          setZoom(0.9)
          setPan({ x: window.innerWidth * 0.1 - 400, y: window.innerHeight * 0.5 - 300 })
          setSelectedNode("root")
          break
        case "Escape":
          setEditingNode(null)
          break
      }
    },
    [selectedNode, editingNode, addChildNode, deleteNode, addSiblingNode],
  )

useEffect(() => {
    document.addEventListener("keydown", handleKeyDown)
    return () => document.removeEventListener("keydown", handleKeyDown)
  }, [handleKeyDown])

const undo = useCallback(() => {
    if (historyIndex > 0) {
      setHistoryIndex(historyIndex - 1)
      setNodes(history[historyIndex - 1])
    }
  }, [history, historyIndex])

const redo = useCallback(() => {
    if (historyIndex < history.length - 1) {
      setHistoryIndex(historyIndex + 1)
      setNodes(history[historyIndex + 1])
    }
  }, [history, historyIndex])

const exportToJSON = useCallback(() => {
    try {
      const convertNodeToSimpleFormat = (nodeId: string): any => {
        const node = nodes[nodeId]
        const result: any = { name: node.text }

if (node.children.length > 0) {
          result.children = node.children.map((childId) => convertNodeToSimpleFormat(childId))
        }

return result
      }

const mindmapData = convertNodeToSimpleFormat("root")
      const dataStr = JSON.stringify(mindmapData, null, 2)
      const dataBlob = new Blob([dataStr], { type: "application/json" })

const link = document.createElement("a")
      link.href = URL.createObjectURL(dataBlob)
      link.download = `mindmap-${new Date().toISOString().split("T")[0]}.json`
      link.click()

URL.revokeObjectURL(link.href)
    } catch (error) {
      console.error("Export failed:", error)
      alert(`Export failed: ${error}`)
    }
  }, [nodes])

const importFromJSON = useCallback(
    (jsonData: string) => {
      try {
        const data = JSON.parse(jsonData)

if (!data.name || typeof data.name !== "string") {
          throw new Error("Invalid JSON format: missing root name")
        }

const convertToInternalFormat = (
          simpleNode: any,
          parentId: string | null = null,
          level = 0,
        ): Record<string, Node> => {
          const nodeId = level === 0 ? "root" : `node-${Date.now()}-${Math.random()}`
          const nodes: Record<string, Node> = {}

const node: Node = {
            id: nodeId,
            text: simpleNode.name,
            x: 400 + level * 320,
            y: 300,
            parentId,
            children: [],
            level,
          }

nodes[nodeId] = node

if (simpleNode.children && Array.isArray(simpleNode.children)) {
            simpleNode.children.forEach((child: any, index: number) => {
              const childNodes = convertToInternalFormat(child, nodeId, level + 1)
              const childId = Object.keys(childNodes)[0]
              node.children.push(childId)
              Object.assign(nodes, childNodes)
            })
          }

return nodes
        }

const newNodes = convertToInternalFormat(data)
        saveToHistory(nodes)
        const layoutedNodes = calculateLayout(newNodes)
        setNodes(layoutedNodes)
        setSelectedNode("root")
        setShowImportModal(false)
        setImportText("")
      } catch (error) {
        console.error("Import failed:", error)
        alert(`Import failed: ${error}`)
      }
    },
    [nodes, saveToHistory, calculateLayout],
  )

const handleFileUpload = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const file = event.target.files?.[0]
      if (!file) return

const reader = new FileReader()
      reader.onload = (e) => {
        const content = e.target?.result as string
        if (content) {
          importFromJSON(content)
        }
      }
      reader.readAsText(file)

if (fileInputRef.current) {
        fileInputRef.current.value = ""
      }
    },
    [importFromJSON],
  )

const zoomIn = () => setZoom((prev) => Math.min(prev * 1.2, 3))
  const zoomOut = () => setZoom((prev) => Math.max(prev / 1.2, 0.3))

const handleMouseDown = (e: React.MouseEvent) => {
    const target = e.target as HTMLElement
    if (target === containerRef.current || target === svgRef.current || target === canvasRef.current) {
      setIsDragging(true)
      setDragStart({ x: e.clientX - pan.x, y: e.clientY - pan.y })
      e.preventDefault()
    }
  }

useEffect(() => {
    const handleGlobalMouseMove = (e: MouseEvent) => {
      if (isDragging) {
        setPan({
          x: e.clientX - dragStart.x,
          y: e.clientY - dragStart.y,
        })
        e.preventDefault()
      }
    }

const handleGlobalMouseUp = () => {
      setIsDragging(false)
    }

const handleWheel = (e: WheelEvent) => {
      if (e.metaKey || e.ctrlKey) {
        e.preventDefault()
        e.stopPropagation()

const container = containerRef.current
        if (container) {
          const scrollCompensation = e.deltaY * 2.0 // Adjust multiplier as needed

// Zoom based on scroll direction
          if (e.deltaY < 0) {
            setZoom((prev) => Math.min(prev * 1.1, 3))
            // Counter-scroll down to compensate for upward scroll
            container.scrollTop += scrollCompensation
          } else {
            setZoom((prev) => Math.max(prev / 1.1, 0.3))
            // Counter-scroll up to compensate for downward scroll
            container.scrollTop += scrollCompensation
          }
        }
      }
    }

if (isDragging) {
      document.addEventListener("mousemove", handleGlobalMouseMove)
      document.addEventListener("mouseup", handleGlobalMouseUp)
    }

document.addEventListener("wheel", handleWheel, { passive: false })

return () => {
      document.removeEventListener("mousemove", handleGlobalMouseMove)
      document.removeEventListener("mouseup", handleGlobalMouseUp)
      document.removeEventListener("wheel", handleWheel)
    }
  }, [isDragging, dragStart])

const generatePath = (from: Node, to: Node) => {
    const fromDimensions = nodeDimensions[from.id] || { width: NODE_WIDTH, height: NODE_HEIGHT }
    const toDimensions = nodeDimensions[to.id] || { width: NODE_WIDTH, height: NODE_HEIGHT }

const fromX = from.x + fromDimensions.width
    const fromY = from.y
    const toX = to.x
    const toY = to.y

const midX = fromX + (toX - fromX) * 0.5

return `M ${fromX} ${fromY} C ${midX} ${fromY} ${midX} ${toY} ${toX} ${toY}`
  }

useEffect(() => {
    const newConnections: Connection[] = []
    Object.values(nodes).forEach((node) => {
      if (node.parentId && nodes[node.parentId]) {
        newConnections.push({ from: node.parentId, to: node.id })
      }
    })
    setConnections(newConnections)
  }, [nodes])

return (
    <div className="w-screen h-screen bg-gray-50 overflow-auto relative">
      <div className="fixed top-4 right-4 z-20 flex gap-2">
        <Button variant="outline" size="sm" onClick={exportToJSON} className="bg-white shadow-md">
          <Download className="w-4 h-4" />
        </Button>
        <Button variant="outline" size="sm" onClick={() => setShowImportModal(true)} className="bg-white shadow-md">
          <Upload className="w-4 h-4" />
        </Button>
        <Button variant="outline" size="sm" onClick={undo} disabled={historyIndex <= 0} className="bg-white shadow-md">
          <Undo2 className="w-4 h-4" />
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={redo}
          disabled={historyIndex >= history.length - 1}
          className="bg-white shadow-md"
        >
          <Redo2 className="w-4 h-4" />
        </Button>
        <Button variant="outline" size="sm" onClick={zoomOut} className="bg-white shadow-md">
          <ZoomOut className="w-4 h-4" />
        </Button>
        <Button variant="outline" size="sm" onClick={zoomIn} className="bg-white shadow-md">
          <ZoomIn className="w-4 h-4" />
        </Button>
      </div>

{showImportModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-30">
          <div className="bg-white rounded-lg p-6 w-96 max-w-[90vw] shadow-xl">
            <h3 className="text-lg font-semibold mb-4">Import Mind Map</h3>

<div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Paste JSON data:</label>
                <textarea
                  value={importText}
                  onChange={(e) => setImportText(e.target.value)}
                  placeholder="Paste your mind map JSON data here..."
                  className="w-full h-32 p-3 border border-gray-300 rounded-md resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

{Object.values(nodes).map((node) => {
            const colorClass = COLORS[node.level % COLORS.length]
            const isSelected = selectedNode === node.id

About

Tags

Share

About

Tags

Share

More Templates Like This

More Templates Like This