1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5589],{78825:function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/apps/[id]/visual",function(){return a(16982)}])},16982:function(e,t,a){"use strict";a.r(t),a.d(t,{__N_SSP:function(){return J},default:function(){return V}});var n=a(85893),s=a(67294),l=a(39332),i=a(87317);a(47861);var o=a(93496);let r=(0,a(48688).eI)("https://emjltpfatzdtlcseewns.supabase.co","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVtamx0cGZhdHpkdGxjc2Vld25zIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NjUyMzI0OTIsImV4cCI6MTk4MDgwODQ5Mn0.p9OeA7csxXO4Z9ZeKb0yi95ewoB6g-61h4PpkOrONMw");async function c(e){if(!e.user_id)return[];let{data:t,error:a}=await r.from("global_components").insert([e]);if(a)throw a;return t}async function d(e){if(!e)return[];let{data:t,error:a}=await r.from("global_components").select("*").eq("user_id",e);if(a)throw a;return t}async function m(e){if(!e)return null;let{data:t,error:a}=await r.from("global_components").select("*").eq("id",e).single();if(a)throw a;return t}var p=a(62309),g=a(4298),u=a.n(g),x=a(65027),f=a.n(x),v=a(67026),h=a.n(v),y=a(36952),b=a.n(y),w=a(15872),C=a.n(w),k=a(61902),S=a.n(k),j=a(48678),M=a.n(j),T=a(57657),I=a.n(T),N=a(6291),E=a.n(N),B=a(2147),L=a.n(B),A=a(56351),q=a(88426),z=a.n(q),P=a(74268),H=a.n(P),_=a(77408),D=a(13380);a(87441);var G=a(89091);a(88169);var F=a(84053),O=a(29355),R=e=>{let{html:t,cssString:a,js:l,onSave:i,data:r,onSelectElement:g,appId:x,components:v,setAppContent:y}=e,w=(0,s.useRef)(null),[k,j]=(0,s.useState)(null),{width:T,height:N}
1=(0,O.n)(),[B,q]=(0,s.useState)(!1),[P,R]=(0,s.useState)({top:0,left:0,width:0,height:0}),[J,V]=(0,s.useState)(null),[Z,Q]=(0,s.useState)(null),W=(0,F.useSupabaseClient)(),[U,X]=(0,s.useState)(()=>"undefined"!=typeof localStorage&&!localStorage.getItem("hasVisitedGrapesEditor"));(0,s.useEffect)(()=>{q((0,_.s2)()),async function(){let{data:{user:e}}=await W.auth.getUser();Q(e)}()},[]),(0,s.useEffect)(()=>{if(!w.current){var e="./img/",n="https://via.placeholder.com/350x250/";let q=()=>[{value:"",name:"None"}].concat(r.map((e,t)=>({value:t.toString(),name:"".concat(t," - ").concat(e.title||"Item ".concat(t+1))}))),P=A.ZP.init({container:"#gjs",fromElement:!0,height:"100%",width:"auto",storageManager:!1,deviceManager:{devices:[{name:"Desktop",width:""},{name:"Mobile",width:"320px",widthMedia:"480px"}]},allowScripts:1,showOffsets:!0,assetManager:{embedAsBase64:!0,assets:[e+"team1.jpg",e+"team2.jpg",e+"team3.jpg",n+"78c5d6/fff",n+"459ba8/fff",n+"79c267/fff",n+"c5d647/fff",n+"f28c33/fff",n+"e868a2/fff",n+"cc4360/fff",e+"work-desk.jpg",e+"phone-app.png",e+"bg-gr-v.png"]},selectorManager:{componentFirst:!0},styleManager:{sectors:[{name:"General",properties:[{extend:"float",type:"radio",default:"none",options:[{value:"none",className:"fa fa-times"},{value:"left",className:"fa fa-align-left"},{value:"right",className:"fa fa-align-right"}]},"display",{extend:"position",type:"select"},"top","right","left","bottom"]},{name:"Dimension",open:!1,properties:["width",{id:"flex-width",type:"integer",name:"Width",units:["px","%"],property:"flex-basis",toRequire:1},"height","max-width","min-height","margin","padding"]},{name:"Typography",open:!1,properties:["font-family","font-size","font-weight","letter-spacing","color","line-height",{extend:"text-align",options:[{id:"left",label:"Left",className:"fa fa-align-left"},{id:"center",label:"Center",className:"fa fa-align-center"},{id:"right",label:"Right",className:"fa fa-align-right"},{id:"justify",label:"Justify",className:"fa fa-align-justify"}]},{property:"text-decoration",type:"radio",default:"none",options:[{id:"none",label:"None",className:"fa fa-times"},{id:"underline",label:"underline",className:"fa fa-underline"},{id:"line-through",label:"Line-through",className:"fa fa-strikethrough"}]},"text-shadow"]},{name:"Decorations",open:!1,properties:["opacity","border-radius","border","box-shadow","background"]},{name:"Extra",open:!1,buildProps:["transition","perspective","transform"]},{name:"Flex",open:!1,properties:[{name:"Flex Container",property:"display",type:"select",defaults:"block",list:[{value:"block",name:"Disable"},{value:"flex",name:"Enable"}]},{name:"Flex Parent",property:"label-parent-flex",type:"integer"},{name:"Direction",property:"flex-direction",type:"radio",defaults:"row",list:[{value:"row",name:"Row",className:"icons-flex icon-dir-row",title:"Row"},{value:"row-reverse",name:"Row reverse",className:"icons-flex icon-dir-row-rev",title:"Row reverse"},{value:"column",name:"Column",title:"Column",className:"icons-flex icon-dir-col"},{value:"column-reverse",name:"Column reverse",title:"Column reverse",className:"icons-flex icon-dir-col-rev"}]},{name:"Justify",property:"justify-content",type:"radio",defaults:"flex-start",list:[{value:"flex-start",className:"icons-flex icon-just-start",title:"Start"},{value:"flex-end",title:"End",className:"icons-flex icon-just-end"},{value:"space-between",title:"Space between",className:"icons-flex icon-just-sp-bet"},{value:"space-around",title:"Space around",className:"icons-flex icon-just-sp-ar"},{value:"center",title:"Center",className:"icons-flex icon-just-sp-cent"}]},{name:"Align",property:"align-items",type:"radio",defaults:"center",list:[{value:"flex-start",title:"Start",className:"icons-flex icon-al-start"},{value:"flex-end",title:"End",className:"icons-flex icon-al-end"},{value:"stretch",title:"Stretch",className:"icons-flex icon-al-str"},{value:"center",title:"Center",className:"icons-flex icon-al-center"}]},{name:"Flex Children",property:"label-parent-flex",type:"integer"},{name:"Order",property:"order",type:"integer",defaults:0,min:0},{name:"Flex",property:"flex",type:"composite",properties:[{name:"Grow",property:"flex-grow",type:"integer",defaults:0,min:0},{name:"Shrink",property:"flex-shrink",type:"integer",defaults:0,min:0},{name:"Basis",property:"flex-basis",type:"integer",units:["px","%",""],unit:"",defaults:"auto"}]},{name:"Align",property:"align-self",type:"radio",defaults:"auto",list:[{value:"auto",name:"Auto"},{value:"flex-start",title:"Start",className:"icons-flex icon-al-start"},{value:"flex-end",title:"End",className:"icons-flex icon-al-end"},{value:"stretch",title:"Stretch",className:"icons-flex icon-al-str"},{value:"center",title:"Center",className:"icons-flex icon-al-center"}]}]}]},plugins:[z(),M(),b(),f(),S(),h(),C(),I(),E(),L(),H(),e=>{e.DomComponents.addType("dynamic-content",{model:{defaults:{tagName:"div",attributes:{class:"prose lg:prose-xl","data-dynamic-content":!0}
1,traits:[{type:"select",name:"data-content-key",options:[{value:"",name:"None"},{value:"content",name:"Content"}]},{type:"select",name:"data-content-index",options:q()}]}},view:{onRender(e){let{el:t,model:a}=e,n=a.get("attributes")["data-content-key"],s=a.get("attributes")["data-content-index"];n&&void 0!==s&&(t.innerHTML=(0,D.fH)({count:3,units:"paragraph"}))}}}),e.BlockManager.add("dynamic-content",{label:"Dynamic Content",category:"Extra",content:{type:"dynamic-content",content:"Add your dynamic content here"}}),["header","text","image","link","paragraph","default"].forEach(t=>{e.DomComponents.addType(t,{model:{defaults:{traits:[{type:"select",name:"data-content-key",options:[{value:"",name:"None"},{value:"title",name:"Title"},{value:"feature_image",name:"Feature Image"},{value:"excerpt",name:"Excerpt"},{value:"slug",name:"Slug"},{value:"authors",name:"Author(s)"},{value:"tags",name:"Tag(s)"},{value:"content",name:"Content"}]},{type:"select",name:"data-content-index",options:q()},...function(e){switch(e){case"link":return[{type:"text",name:"href",label:"Href"},{type:"select",name:"target",label:"Target",options:[{value:"",name:"Current window"},{value:"_blank",name:"New window"}]}];case"image":return[{type:"text",name:"src",label:"Source"},{type:"text",name:"alt",label:"Alt Text"}];case"header":return[{tagName:"h1"}];case"text":case"paragraph":return[{tagName:"p"}];default:return[{type:"text",name:"id",label:"ID"},{type:"text",name:"title",label:"Title"}]}}(t)]}},view:{onRender(e){let{el:t,model:a}=e;console.log("onRender",t,a);let n=a.get("attributes")["data-content-key"],s=a.get("attributes")["data-content-index"];if(n&&void 0!==s){let e=(0,G.Cj)(t.innerHTML,r);e=e.replace(/<div class="prose lg:prose-xl" data-dynamic-content="true" data-content-key="(\w+)" data-content-index="(\d+)">[\s\S]*?<\/div>/g,'<div class="prose lg:prose-xl" data-dynamic-content="true" data-content-key="$1" data-content-index="$2">{{dynamicContent:$1:$2}}</div>'),t.innerHTML=e}}}})}),e.Commands.add("convert-to-dynamic",{run(e,t){arguments.length>2&&void 0!==arguments[2]&&arguments[2],console.log("convert-to-dynamic");let a=e.getSelected();if(a){let t=a.get("type"),n="";if("image"===t)n="feature_image";else if("link"===t)n="slug";else if("text"===t){let e=a.get("tagName").toLowerCase();["h1","h2","h3","h4","h5","h6"].includes(e)?n="title":"p"===e&&(n="excerpt")}else"DIV"===a.get("tagName")&&(n="content");let s=e.DomComponents.getWrapper().find("[data-content-index]").length;a.addAttributes({"data-content-key":n,"data-content-index":s.toString()}),a.view.render()}}}),e.BlockManager.add("tailwind-section",{label:"Standard Section",category:"Tailwind Layouts",content:'\n <section class="py-12 px-4 sm:px-6 lg:px-8 bg-white">\n <div class="max-w-7xl mx-auto">\n <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">\n Section Title\n </h2>\n <p class="mt-4 text-xl text-gray-500">\n This is a standard section with some content. You can customize this as needed.\n </p>\n </div>\n </section>\n ',attributes:{class:"fa fa-puzzle-piece"}}),e.BlockManager.add("tailwind-feature-section",{label:"Feature Section",category:"Tailwind Layouts",content:'\n <section class="py-12 bg-gray-50">\n <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">\n <div class="lg:text-center">\n <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>\n <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">\n A better way to do business\n </p>\n <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">\n Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.\n </p>\n </div>\n <div class="mt-10">\n <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">\n <div class="relative">\n <dt>\n <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">\n <!-- Heroicon name: outline/globe-alt -->\n <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">\n <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />\n </svg>\n </div>\n <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Global Scale</p>\n </dt>\n <dd class="mt-2 ml-16 text-base text-gray-500">\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.\n </dd>\n </div>\n <!-- Add more feature items as needed -->\n </dl>\n </div>\n </div>\n </section>\n ',attributes:{class:"fa fa-star"}}),e.BlockManager.add("tailwind-cta-section",{label:"Call to Action",category:"Tailwind Layouts",content:'\n <section class="bg-indigo-700">\n <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">\n <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
1\n <span class="block">Boost your productivity.</span>\n <span class="block">Start using our app today.</span>\n </h2>\n <p class="mt-4 text-lg leading-6 text-indigo-200">\n Ac euismod vel sit maecenas id pellentesque eu sed consectetur. Malesuada adipiscing sagittis vel nulla nec.\n </p>\n <a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">\n Sign up for free\n </a>\n </div>\n </section>\n ',attributes:{class:"fa fa-bullhorn"}}),e.BlockManager.add("tailwind-testimonial",{label:"Testimonial",category:"Tailwind Components",content:'\n <div class="bg-white pt-16 lg:py-24">\n <div class="pb-16 bg-indigo-600 lg:pb-0 lg:z-10 lg:relative">\n <div class="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-3 lg:gap-8">\n <div class="relative lg:-my-8">\n <div aria-hidden="true" class="absolute inset-x-0 top-0 h-1/2 bg-white lg:hidden"></div>\n <div class="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:p-0 lg:h-full">\n <div class="aspect-w-10 aspect-h-6 rounded-xl shadow-xl overflow-hidden sm:aspect-w-16 sm:aspect-h-7 lg:aspect-none lg:h-full">\n <img class="object-cover lg:h-full lg:w-full" src="https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="">\n </div>\n </div>\n </div>\n <div class="mt-12 lg:m-0 lg:col-span-2 lg:pl-8">\n <div class="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:px-0 lg:py-20 lg:max-w-none">\n <blockquote>\n <div>\n <svg class="h-12 w-12 text-white opacity-25" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">\n <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />\n </svg>\n <p class="mt-6 text-2xl font-medium text-white">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed urna nulla vitae laoreet augue. Amet feugiat est integer dolor auctor adipiscing nunc urna, sit.\n </p>\n </div>\n <footer class="mt-6">\n <p class="text-base font-medium text-white">Judith Black</p>\n <p class="text-base font-medium text-indigo-100">CEO at PureInsights</p>\n </footer>\n </blockquote>\n </div>\n </div>\n </div>\n </div>\n </div>\n ',attributes:{class:"fa fa-comment"}}),e.BlockManager.add("tailwind-container",{label:"Container",category:"Tailwind Layouts",content:'<div class="container mx-auto px-4 sm:px-6 lg:px-8"></div>',attributes:{class:"fa fa-square-o"}}),e.BlockManager.add("tailwind-responsive-grid",{label:"Responsive Grid",category:"Tailwind Layouts",content:'\n <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">\n <div class="bg-gray-200 p-4">Grid Item 1</div>\n <div class="bg-gray-200 p-4">Grid Item 2</div>\n <div class="bg-gray-200 p-4">Grid Item 3</div>\n <div class="bg-gray-200 p-4">Grid Item 4</div>\n </div>\n ',attributes:{class:"fa fa-th"}}),e.BlockManager.add("tailwind-reading-container",{label:"Reading Container",category:"Tailwind Layouts",content:'\n <div class="max-w-prose mx-auto px-4 sm:px-6 lg:px-8">\n <p class="mt-2 text-lg text-gray-600">\n This container is optimized for comfortable reading with a maximum width suitable for prose content.\n </p>\n </div>\n ',attributes:{class:"fa fa-align-left"}}),e.BlockManager.add("tailwind-card-grid",{label:"Card Grid",category:"Tailwind Layouts",content:'\n <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">\n <div class="bg-white shadow-md rounded-lg overflow-hidden">\n <img class="w-full h-48 object-cover" src="https://via.placeholder.com/300x200" alt="Card image">\n <div class="p-4">\n <h3 class="font-bold text-xl mb-2">Card Title</h3>\n <p class="text-gray-700">Card content goes here.</p>\n </div>\n </div>\n <div class="bg-white shadow-md rounded-lg overflow-hidden">\n <img class="w-full h-48 object-cover" src="https://via.placeholder.com/300x200" alt="Card image">\n <div class="p-4">\n <h3 class="font-bold text-xl mb-2">Card Title</h3>\n <p class="text-gray-700">Card content goes here.</p>\n </div>\n </div>\n <div class="bg-white shadow-md rounded-lg overflow-hidden">\n <img class="w-full h-48 object-cover" src="https://via.placeholder.com/300x200" alt="Card image">\n <div class="p-4">\n <h3 class="font-bold text-xl mb-2">Card Title</h3>\n <p class="text-gray-700">Card content goes here.</p>\n </div>\n </div>\n </div>\n ',attributes:{class:"fa fa-th-large"}}),e.BlockManager.add("tailwind-hero-section",{label:"Hero Section",category:"Tailwind Layouts",content:'\n <div class="bg-gray-100">\n <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">\n <div class="lg:text-center">\n <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Announcement</h2>\n <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">\n A better way to send money\n </p>\n <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">\n Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.\n </p>\n </div>\n </div>\n </div>\n ',attributes:{class:"fa fa-header"}}),e.BlockManager.add("tailwind-pricing-section",{label:"Pricing Section",category:"Tailwind Layouts",content:'\n <div class="bg-gray-100">\n <div class="pt-12 sm:pt-16 lg:pt-20">\n <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">\n <div class="text-center">\n <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl lg:text-5xl">Simple no-tricks pricing</h2>\n <p class="mt-4 text-xl text-gray-600">If you\'re not satisfied, contact us within the first 14 days and we\'ll send you a full refund.</p>\n </div>\n </div>\n </div>\n <div class="mt-8 bg-white pb-16 sm:mt-12 sm:pb-20 lg:pb-28">\n <div class="relative">\n <div class="absolute inset-0 h-1/2 bg-gray-100"></div>\n <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">\n <div class="max-w-lg mx-auto rounded-lg shadow-lg overflow-hidden lg:max-w-none lg:flex">\n <div class="flex-1 bg-white px-6 py-8 lg:p-12">\n <h3 class="text-2xl font-extrabold text-gray-900 sm:text-3xl">Lifetime Membership</h3>\n <p class="mt-6 text-base text-gray-500">Lorem ipsum dolor sit amet consect etur adipisicing elit. Itaque amet indis perferendis blanditiis repellendus etur quidem assumenda.</p>\n <div class="mt-8">\n <div class="flex items-center">\n <h4 class="flex-shrink-0 pr-4 bg-white text-sm tracking-wider font-semibold uppercase text-indigo-600">What\'s included</h4>\n <div class="flex-1 border-t-2 border-gray-200"></div>\n </div>\n <ul class="mt-8 space-y-5 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-5">\n <li class="flex items-start lg:col-span-1">\n <div class="flex-shrink-0">\n <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">\n <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />\n </svg>\n </div>\n <p class="ml-3 text-sm text-gray-700">Private forum access</p>\n </li>\n <li class="flex items-start lg:col-span-1">\n <div class="flex-shrink-0">\n <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">\n <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />\n </svg>\n </div>\n <p class="ml-3 text-sm text-gray-700">Member resources</p>\n </li>\n <!-- Add more list items for features -->\n </ul>\n </div>\n </div>\n <div class="py-8 px-6 text-center bg-gray-50 lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center lg:p-12">\n <p class="text-lg leading-6 font-medium text-gray-900">Pay once, own it forever</p>\n <div class="mt-4 flex items-center justify-center text-5xl font-extrabold text-gray-900">
1\n <span>$349</span>\n <span class="ml-3 text-xl font-medium text-gray-500">USD</span>\n </div>\n <p class="mt-4 text-sm">\n <a href="#" class="font-medium text-gray-500 underline">Learn about our membership policy</a>\n </p>\n <div class="mt-6">\n <div class="rounded-md shadow">\n <a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 hover:bg-gray-900">Get Access</a>\n </div>\n </div>\n </div>\n</div>\n</div>\n</div>\n</div>\n',attributes:{class:"fa fa-usd"}}),e.BlockManager.add("tailwind-faq-section",{label:"FAQ Section",category:"Tailwind Layouts",content:'\n<div class="bg-white">\n<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">\n<h2 class="text-3xl font-extrabold text-gray-900 text-center">\nFrequently asked questions\n</h2>\n<div class="mt-12">\n<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3">\n<div>\n <dt class="text-lg leading-6 font-medium text-gray-900">\n What\'s the best thing about Switzerland?\n </dt>\n <dd class="mt-2 text-base text-gray-500">\n I don\'t know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.\n </dd>\n</div>\n<!-- Add more FAQ items here -->\n</dl>\n</div>\n</div>\n</div>\n',attributes:{class:"fa fa-question-circle"}}),e.BlockManager.add("tailwind-team-section",{label:"Team Section",category:"Tailwind Layouts",content:'\n<div class="bg-white">\n<div class="max-w-7xl mx-auto py-12 px-4 text-center sm:px-6 lg:px-8 lg:py-24">\n<div class="space-y-12">\n<div class="space-y-5 sm:mx-auto sm:max-w-xl sm:space-y-4 lg:max-w-5xl">\n<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">Meet our team</h2>\n<p class="text-xl text-gray-500">Ornare sagittis, suspendisse in hendrerit quis. Sed dui aliquet lectus sit pretium egestas vel mattis neque.</p>\n</div>\n<ul class="mx-auto space-y-16 sm:grid sm:grid-cols-2 sm:gap-16 sm:space-y-0 lg:grid-cols-3 lg:max-w-5xl">\n<li>\n <div class="space-y-6">\n <img class="mx-auto h-40 w-40 rounded-full xl:w-56 xl:h-56" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">\n <div class="space-y-2">\n <div class="text-lg leading-6 font-medium space-y-1">\n <h3>Whitney Francis</h3>\n <p class="text-indigo-600">Copywriter</p>\n </div>\n <ul class="flex justify-center space-x-5">\n <li>\n <a href="#" class="text-gray-400 hover:text-gray-500">\n <span class="sr-only">Twitter</span>\n <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">\n <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />\n </svg>\n </a>\n </li>\n <li>\n <a href="#" class="text-gray-400 hover:text-gray-500">\n <span class="sr-only">LinkedIn</span>\n <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">\n <path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd" />\n </svg>\n </a>\n </li>\n </ul>\n </div>\n </div>\n</li>\n<!-- Add more team members here -->\n</ul>\n</div>\n</div>\n</div>\n',attributes:{class:"fa fa-users"}}),e.Commands.add("save-as-global",{run:async(e,t)=>{let a=e.getSelected();if(a){let t={html:a.toHTML(),css:e.getCss({component:a}),name:prompt("Enter a name for this global component:"),user_id:Z.id};if(t.name)try{await c(t),alert("Component saved successfully!")}catch(e){console.error("Error saving component:",e),alert("Failed to save component. Please try again.")}}else alert("Please select a component to save.")}}),(async()=>
1{try{(await d(null==Z?void 0:Z.id)).forEach(t=>{e.BlockManager.add("global-".concat(t.id),{label:t.name,category:"Global Components",content:t.html,attributes:{class:"fa fa-puzzle-piece"}})})}catch(e){console.error("Error loading global components:",e)}})(),e.DomComponents.addType("global-component",{model:{defaults:{globalComponentId:"",traits:[{type:"button",text:"Update Global Component",command:"save-as-global",attributes:{style:"margin-top: 10px;"}}]},init(){this.on("change:globalComponentId",this.onGlobalComponentIdChange)},async onGlobalComponentIdChange(){let t=this.get("globalComponentId");if(t)try{let a=await m(t);this.set("content",a.html),e.addStyle(a.css)}catch(e){console.error("Error fetching global component:",e)}}},view:{onRender(t){let{el:a,model:n}=t,s=document.createElement("button");s.textContent="Update Global Component",s.style.marginTop="10px",s.addEventListener("click",()=>{e.runCommand("save-as-global")}),a.appendChild(s),console.log("updateButton",s)}}})}],pluginsOpts:{"gjs-blocks-basic":{flexGrid:!0},"grapesjs-tui-image-editor":{script:["https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js","https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js","https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js"],style:["https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css","https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css"]},"grapesjs-typed":{block:{category:"Extra",content:{type:"typed","type-speed":40,strings:["Text row one","Text row two","Text row three"]}}},"grapesjs-preset-webpage":{modalImportTitle:"Import Template",modalImportLabel:'<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',modalImportContent:function(e){return e.getHtml()+"<style>"+e.getCss()+"</style>"}},"gjs-preset-newsletter":{inlineCss:!0}}});P.I18n.addMessages({en:{styleManager:{properties:{"background-repeat":"Repeat","background-position":"Position","background-attachment":"Attachment","background-size":"Size"}}}});var s=P.Panels,o=P.Modal,p=P.Commands;s.addButton("options",{id:"convert-to-dynamic",className:"fa fa-magic",command:"convert-to-dynamic",attributes:{title:"Convert to Dynamic Content"}}),p.add("canvas-clear",function(){confirm("Are you sure to clean the canvas?")&&(P.runCommand("core:canvas-clear"),setTimeout(function(){localStorage.clear()},0))});var u="gjs-mdl-dialog-sm",x=document.getElementById("info-panel");p.add("open-info",function(){var e=document.querySelector(".gjs-mdl-dialog");e.className+=" "+u,x.style.display="block",o.setTitle("About this demo"),o.setContent(x),o.open(),o.getModel().once("change:open",function(){e.className=e.className.replace(u,"")})}),s.addButton("options",{id:"open-info",className:"fa fa-question-circle",command:function(){P.runCommand("open-info")},attributes:{title:"About","data-tooltip-pos":"bottom"}});var y=s.getButton("views","open-tm");y&&y.set("active",1);var k=s.getButton("views","open-sm");k&&k.set("active",1),s.removeButton("views","open-tm");var T=$('<div class="gjs-sm-sector no-select"><div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></div><div class="gjs-sm-properties" style="display: none;"></div></div>'),N=T.find(".gjs-sm-properties");N.append($(".gjs-traits-cs")),$(".gjs-sm-sectors").before(T),T.find(".gjs-sm-sector-title").on("click",function(){var e=N.get(0).style;"none"==e.display?e.display="block":e.display="none"}),v&&v.length>0?P.setComponents(v):t&&P.setComponents(t),a&&P.setStyle(a),l&&P.addComponents('<script type="text/javascript">\n '.concat(l,"\n </script>"));var B=P.Panels.getButton("views","open-blocks");B&&B.set("active",1),P.on("load",()=>{let e=P.CssComposer;e.clear(),e.addCollection(a),V(P.Canvas.getFrameEl());let t=P.Panels.getPanelsEl();console.log("Panels element:",t),console.log("Panels element style:",window.getComputedStyle(t)),console.log("Panels:",P.Panels.getPanels())}),P.on("update",async e=>{let t=P.getHtml(),a=P.getCss({avoidProtected:!0}),n=P.getJs();await i({html:t,css:a,componentsJs:n,components:P.getComponents()})});let _=()=>"element-"+Math.random().toString(36).substr(2,9);P.on("component:selected",e=>{if(e){let a=_();e.addAttributes({"data-edit-id":a}),console.log("uniqueId",a);let n=e.getSelectorsString(),s=P.runCommand("gjs-get-inlined-html");console.log("whole page inline",s);
1let l=document.createElement("div");l.innerHTML=s;let i=l.querySelector('[data-edit-id="'.concat(a,'"]'));if(i){let e=i.outerHTML;console.log("elementWithDataEditId inline",e),j({uniqueId:a,selector:n,html:e}),g({uniqueId:a,selector:n,html:e});var t=P.Panels.getButton("views","open-sm");t&&t.set("active",1)}}else j(null),g(null)}),s.addButton("options",{id:"rerender-canvas",className:"fa fa-refresh",command:"rerender-canvas",attributes:{title:"Rerender Canvas"}}),p.add("rerender-canvas",{run:function(e){window.location.reload()}}),w.current=P}},[t,a,l,i,g,r]);let Y=(0,s.useCallback)(()=>{if(J){let e=J.getBoundingClientRect();R({top:e.top,left:e.left,width:e.width,height:e.height})}},[J]);return(0,s.useEffect)(()=>{if(w.current){let e=w.current;return e.on("canvas:update",Y),e.on("component:update",Y),e.on("component:resize",Y),Y(),()=>{e.off("canvas:update",Y),e.off("component:update",Y),e.off("component:resize",Y)}}},[Y]),(0,n.jsxs)("div",{style:{height:"100vh",position:"relative",overflow:"hidden"},children:[(0,n.jsx)(o.ZP,{steps:[{target:"#gjs",content:"Welcome to the Visual Editor! This is where you can visually design and edit your content.",placement:"center",disableBeacon:!0},{target:".gjs-pn-buttons",content:"These are your editing tools. You can add elements, style them, and more.",placement:"bottom"},{target:".gjs-blocks-c",content:"Drag and drop these blocks to build your page. You'll find various components like text, images, and layouts.",placement:"right"},{target:".prompt-input",content:"This is your AI assistant! Type in what you want to create or modify, and it will help you generate content.",placement:"top"},{target:".prompt-badges",content:"These badges provide quick prompts for common tasks. Click them to quickly generate specific types of content.",placement:"bottom"}],run:U,continuous:!0,showProgress:!0,showSkipButton:!0,callback:e=>{let{status:t}=e;[o.Q_.FINISHED,o.Q_.SKIPPED].includes(t)&&(X(!1),localStorage.setItem("hasVisitedGrapesEditor","true"))},styles:{options:{primaryColor:"#4F46E5",zIndex:1e4}}}),(0,n.jsx)(u(),{src:"https://code.jquery.com/jquery-3.6.0.min.js",strategy:"beforeInteractive"}),(0,n.jsx)("div",{id:"gjs",style:{height:"calc(100% - 40px)"}}),J&&(0,n.jsx)(p.Z,{appId:x,width:T,height:N,isMobile:B,selectedElement:k,setSelectedElement:j,editorBounds:P,frameElement:J,html:t,editor:null==w?void 0:w.current})]})};a(9008),a(52522);var J=!0;
1function V(e){let[t,a]=(0,s.useState)(e),i=(0,F.useSupabaseClient)();(0,l.useRouter)();let{width:o,height:r}=(0,O.n)(),[c,d]=(0,s.useState)(null),[m,p]=(0,s.useState)();(0,s.useEffect)(()=>{p((0,_.s2)())},[]);let g=async t=>{let{html:a,css:n,componentsJs:s,components:l}=t,o=document.createElement("div");o.innerHTML=a;let r=o.getElementsByTagName("script"),c="";for(let e=0;e<r.length;e++)""!==r[e].innerHTML.trim()&&(c+=r[e].innerHTML+"\n"),r[e].remove();o.querySelectorAll("[data-edit-id]").forEach(e=>{e.removeAttribute("data-edit-id")});let d=l.map(e=>"script"===e.type||"script"===e.tagName?null:e).filter(Boolean),m=c;s&&(m+="\n"+s),console.log("combinedJs",m);let{data:p,error:g}=await i.from("apps").update({html:o.innerHTML,css:n,js:m,components:d,updated_at:new Date().toISOString()}).eq("id",e.id);g?console.error("Error updating app:",g):console.log("App updated successfully")};return(0,n.jsxs)("div",{id:"editorStyle",style:{height:"100vh",padding:"0px",zIndex:1e3},children:[console.log("appContent.js",t),(0,n.jsx)(R,{html:t.html,components:t.components,setAppContent:a,cssString:t.css,js:t.js,data:t.data,onSave:g,onSelectElement:e=>d(e),appId:e.id})]})}V.getLayout=function(e){return(0,n.jsx)(i.Z,{children:e})}}},function(e){e.O(0,[3033,1450,2618,9586,959,6252,1214,9037,7318,5117,4913,1396,1194,9972,1977,9967,8074,8395,553,4013,7317,671,2888,9774,179],function(){return e(e.s=78825)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.