@chaibuilder/sdk 0.1.4 → 0.1.5

package/dist/{CanvasArea-f5d27245.cjs → CanvasArea-9287e1bd.cjs}

@@ -1,4 +1,4 @@
-"use strict";var Ke=Object.defineProperty;var Ve=(e,r,n)=>r in e?Ke(e,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[r]=n;var J=(e,r,n)=>(Ve(e,typeof r!="symbol"?r+"":r,n),n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./jsx-runtime-5c3ac4f7.cjs"),g=require("react"),v=require("lodash"),W=require("@radix-ui/react-icons"),X=require("./useBuilderProp-5e57d0c8.cjs"),h=require("./index-133d90a5.cjs"),Ne=require("react-i18next"),se=require("./separator-a597dba7.cjs"),V=require("./dropdown-menu-84b2439e.cjs"),Ge=require("./label-167415e5.cjs"),G=require("./alert-dialog-4ce6ed22.cjs"),ee=require("jotai"),Xe=require("@floating-ui/dom"),ke=require("@floating-ui/react-dom"),Ze=require("react-dnd"),Je=require("@react-hookz/web"),Qe=require("@bobthered/tailwindcss-palette-generator"),et=require("react-wrap-balancer"),tt=require("tailwind-merge"),ie=require("./CONTROLS-031e1de3.cjs"),rt=require("@chaibuilder/blocks"),Ce=require("react-dom"),nt=require("./_commonjsHelpers-5a53b418.cjs");require("@radix-ui/react-slot");require("class-variance-authority");require("./utils-3c452dd0.cjs");require("clsx");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");require("i18next");require("flagged");require("@minoru/react-dnd-treeview");require("react-hotkeys-hook");require("flat-to-nested");require("./Class-7d6aadbc.cjs");require("redux-undo");require("@radix-ui/react-separator");require("@radix-ui/react-switch");require("@radix-ui/react-hover-card");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-label");require("@radix-ui/react-alert-dialog");const st=()=>{const{undoCount:e,redoCount:r,undo:n,redo:a}=h.useCanvasHistory();return t.jsxRuntimeExports.jsxs("div",{className:"flex items-center",children:[t.jsxRuntimeExports.jsx(X.Button,{disabled:!e,size:"sm",onClick:n,className:"rounded-full",variant:"ghost",children:t.jsxRuntimeExports.jsx(W.ResetIcon,{})}),t.jsxRuntimeExports.jsx(X.Button,{disabled:!r,onClick:a,size:"sm",className:"rounded-full",variant:"ghost",children:t.jsxRuntimeExports.jsx(W.ResetIcon,{className:"rotate-180 scale-y-[-1] transform"})})]})};function ot(){const[e,r]=h.useDarkMode(),{t:n}=Ne.useTranslation();return t.jsxRuntimeExports.jsxs("div",{className:"flex items-center",children:[t.jsxRuntimeExports.jsx(Ge.Label,{htmlFor:"dark-mode-switch",children:n("dark_mode")}),t.jsxRuntimeExports.jsxs(V.Switch,{id:"dark-mode-switch",checked:e,onCheckedChange:()=>{r(!e)},className:`${e?"bg-violet-600":"bg-violet-300"}
+"use strict";var Ke=Object.defineProperty;var Ve=(e,r,n)=>r in e?Ke(e,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[r]=n;var J=(e,r,n)=>(Ve(e,typeof r!="symbol"?r+"":r,n),n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./jsx-runtime-5c3ac4f7.cjs"),g=require("react"),v=require("lodash"),W=require("@radix-ui/react-icons"),X=require("./useBuilderProp-5e57d0c8.cjs"),h=require("./index-89fce4e7.cjs"),Ne=require("react-i18next"),se=require("./separator-a597dba7.cjs"),V=require("./dropdown-menu-84b2439e.cjs"),Ge=require("./label-167415e5.cjs"),G=require("./alert-dialog-4ce6ed22.cjs"),ee=require("jotai"),Xe=require("@floating-ui/dom"),ke=require("@floating-ui/react-dom"),Ze=require("react-dnd"),Je=require("@react-hookz/web"),Qe=require("@bobthered/tailwindcss-palette-generator"),et=require("react-wrap-balancer"),tt=require("tailwind-merge"),ie=require("./MODIFIERS-70fef873.cjs"),rt=require("@chaibuilder/blocks"),Ce=require("react-dom"),nt=require("./_commonjsHelpers-5a53b418.cjs");require("@radix-ui/react-slot");require("class-variance-authority");require("./utils-3c452dd0.cjs");require("clsx");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");require("i18next");require("flagged");require("@minoru/react-dnd-treeview");require("react-hotkeys-hook");require("flat-to-nested");require("./Class-6c695ccb.cjs");require("redux-undo");require("lucide-react");require("sonner");require("@radix-ui/react-separator");require("@radix-ui/react-switch");require("@radix-ui/react-hover-card");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-label");require("@radix-ui/react-alert-dialog");const st=()=>{const{undoCount:e,redoCount:r,undo:n,redo:a}=h.useCanvasHistory();return t.jsxRuntimeExports.jsxs("div",{className:"flex items-center",children:[t.jsxRuntimeExports.jsx(X.Button,{disabled:!e,size:"sm",onClick:n,className:"rounded-full",variant:"ghost",children:t.jsxRuntimeExports.jsx(W.ResetIcon,{})}),t.jsxRuntimeExports.jsx(X.Button,{disabled:!r,onClick:a,size:"sm",className:"rounded-full",variant:"ghost",children:t.jsxRuntimeExports.jsx(W.ResetIcon,{className:"rotate-180 scale-y-[-1] transform"})})]})};function ot(){const[e,r]=h.useDarkMode(),{t:n}=Ne.useTranslation();return t.jsxRuntimeExports.jsxs("div",{className:"flex items-center",children:[t.jsxRuntimeExports.jsx(Ge.Label,{htmlFor:"dark-mode-switch",children:n("dark_mode")}),t.jsxRuntimeExports.jsxs(V.Switch,{id:"dark-mode-switch",checked:e,onCheckedChange:()=>{r(!e)},className:`${e?"bg-violet-600":"bg-violet-300"}
           relative ml-2 inline-flex h-[20px] w-[40px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`,children:[t.jsxRuntimeExports.jsx("span",{className:"sr-only",children:"Use setting"}),t.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",className:`${e?"translate-x-5":"translate-x-0"}
             pointer-events-none -mt-px inline-block h-[18px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`})]})]})}const Te=({landscape:e=!1})=>t.jsxRuntimeExports.jsxs("svg",{className:e?"rotate-90":"",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 13 13",xmlSpace:"preserve",width:13,height:13,children:[t.jsxRuntimeExports.jsx("g",{strokeWidth:0}),t.jsxRuntimeExports.jsx("g",{strokeLinecap:"round",strokeLinejoin:"round"}),t.jsxRuntimeExports.jsx("path",{d:"M10.65 0H2.349a.851.851 0 0 0-.851.852v11.299c0 .47.382.852.851.852h8.3a.851.851 0 0 0 .851-.852V.852A.851.851 0 0 0 10.65 0zM6.599 12.466a.367.367 0 1 1 0-.735.367.367 0 0 1 0 .735zm3.9-1.267H2.5V1h8.001v10.199z",style:{fill:"#000"}})]}),_e=[{title:"Mobile (XS)",content:"Styles set here are applied to all screen unless edited at higher breakpoint",breakpoint:"xs",icon:t.jsxRuntimeExports.jsx(W.MobileIcon,{}),width:400},{title:"Mobile landscape (SM)",content:"Styles set here are applied at 640px and up unless edited at higher breakpoint",breakpoint:"sm",icon:t.jsxRuntimeExports.jsx(W.MobileIcon,{className:"rotate-90"}),width:640},{title:"Tablet (MD)",content:"Styles set here are applied at 768px and up",breakpoint:"md",icon:t.jsxRuntimeExports.jsx(Te,{}),width:800},{title:"Tablet Landscape (LG)",content:"Styles set here are applied at 1024px and up unless edited at higher breakpoint",breakpoint:"lg",icon:t.jsxRuntimeExports.jsx(Te,{landscape:!0}),width:1024},{title:"Desktop (XL)",content:"Styles set here are applied at 1280px and up unless edited at higher breakpoint",breakpoint:"xl",icon:t.jsxRuntimeExports.jsx(W.LaptopIcon,{}),width:1420},{title:"Large Desktop (2XL)",content:"Styles set here are applied at 1536px and up",breakpoint:"2xl",icon:t.jsxRuntimeExports.jsx(W.DesktopIcon,{}),width:1920}],it=({title:e,content:r,currentBreakpoint:n,breakpoint:a,width:u,icon:o,onClick:i})=>t.jsxRuntimeExports.jsxs(V.HoverCard,{children:[t.jsxRuntimeExports.jsx(V.HoverCardTrigger,{asChild:!0,children:t.jsxRuntimeExports.jsx(X.Button,{onClick:()=>i(u),size:"sm",variant:a===n?"secondary":"ghost",children:o})}),t.jsxRuntimeExports.jsx(V.HoverCardContent,{className:"w-52 border-border",children:t.jsxRuntimeExports.jsx("div",{className:"flex justify-between space-x-4",children:t.jsxRuntimeExports.jsxs("div",{className:"space-y-1",children:[t.jsxRuntimeExports.jsx("h4",{className:"text-sm font-semibold",children:e}),t.jsxRuntimeExports.jsx("p",{className:"text-xs",children:r})]})})})]}),at=()=>{const[,e,r]=h.useCanvasWidth(),[n,a]=h.useSelectedBreakpoints(),u=o=>{n.includes(o)?n.length>2&&a(n.filter(i=>i!==o)):a(i=>[...i,o])};return t.jsxRuntimeExports.jsxs("div",{className:"flex items-center rounded-md",children:[v.map(_e.filter(o=>v.includes(n,v.toUpper(o.breakpoint))),o=>g.createElement(it,{...o,onClick:r,key:o.breakpoint,currentBreakpoint:e})),t.jsxRuntimeExports.jsxs(V.DropdownMenu,{children:[t.jsxRuntimeExports.jsx(V.DropdownMenuTrigger,{asChild:!0,children:t.jsxRuntimeExports.jsx("span",{className:"cursor-pointer px-2.5 hover:opacity-80",children:t.jsxRuntimeExports.jsx(W.DotsVerticalIcon,{className:"scale-90 transform"})})}),t.jsxRuntimeExports.jsxs(V.DropdownMenuContent,{className:"w-56 border-border text-xs",children:[t.jsxRuntimeExports.jsx(V.DropdownMenuLabel,{children:"Breakpoints"}),t.jsxRuntimeExports.jsx(V.DropdownMenuSeparator,{}),v.map(_e,o=>t.jsxRuntimeExports.jsx(V.DropdownMenuCheckboxItem,{disabled:o.breakpoint==="xs",onCheckedChange:()=>u(v.toUpper(o.breakpoint)),checked:v.includes(n,v.toUpper(o.breakpoint)),children:o.title},o.breakpoint))]})]})]})},ct=()=>{const[e]=h.useSetAllBlocks(),{createSnapshot:r}=h.useCanvasHistory(),[,n]=h.useSelectedBlockIds(),[,a]=h.useSelectedStylingBlocks(),u=g.useCallback(()=>{e([]),n([]),a([]),r()},[e,r]);return t.jsxRuntimeExports.jsx("div",{className:"flex items-center",children:t.jsxRuntimeExports.jsxs(G.AlertDialog,{children:[t.jsxRuntimeExports.jsx(G.AlertDialogTrigger,{asChild:!0,children:t.jsxRuntimeExports.jsxs(X.Button,{size:"sm",variant:"ghost",className:"flex items-center gap-x-1",children:[t.jsxRuntimeExports.jsx(W.EraserIcon,{})," Clear"]})}),t.jsxRuntimeExports.jsxs(G.AlertDialogContent,{className:"border-border",children:[t.jsxRuntimeExports.jsxs(G.AlertDialogHeader,{children:[t.jsxRuntimeExports.jsx(G.AlertDialogTitle,{children:"Clear whole canvas?"}),t.jsxRuntimeExports.jsx(G.AlertDialogDescription,{children:"Are you sure you want to clear the whole canvas?"})]}),t.jsxRuntimeExports.jsxs(G.AlertDialogFooter,{children:[t.jsxRuntimeExports.jsx(G.AlertDialogCancel,{children:"Cancel"}),t.jsxRuntimeExports.jsx(G.AlertDialogAction,{onClick:u,children:"Yes"})]})]})]})})},lt=()=>{const e=h.useFeatureSupport("darkMode",!1),[r]=h.useCanvasZoom();return t.jsxRuntimeExports.jsxs("div",{className:"flex h-10 items-center justify-between border-b bg-background/70 px-2",children:[t.jsxRuntimeExports.jsxs("div",{className:"flex h-full space-x-2",children:[e?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(ot,{}),t.jsxRuntimeExports.jsx(se.Separator,{orientation:"vertical"})]}):null,t.jsxRuntimeExports.jsx(at,{}),t.jsxRuntimeExports.jsx(se.Separator,{orientation:"vertical"}),t.jsxRuntimeExports.jsxs("div",{className:"flex w-12 items-center justify-center gap-x-1 space-x-0 font-medium",children:[t.jsxRuntimeExports.jsx(W.ZoomInIcon,{className:"h-3.5 w-3.5 flex-shrink-0"})," ",t.jsxRuntimeExports.jsxs("div",{className:"text-xs leading-3",children:[v.round(r,0),"%"]})]}),t.jsxRuntimeExports.jsx(se.Separator,{orientation:"vertical"}),t.jsxRuntimeExports.jsx(st,{})]}),t.jsxRuntimeExports.jsxs("div",{className:"flex h-full items-center space-x-2",children:[t.jsxRuntimeExports.jsx(se.Separator,{orientation:"vertical"}),t.jsxRuntimeExports.jsx(ct,{})]})]})},fe={FRAMEWORK:"FRAMEWORK",STATIC:"STATIC",EMAIL:"EMAIL",PRESENTATION:"PRESENTATION",GRAPHIC:"GRAPHIC"},ut=`<!doctype html>
 <html class="scroll-smooth h-full overflow-y-auto">
@@ -57,4 +57,4 @@ Valid keys: `+JSON.stringify(Object.keys(s),null,"  "));var c=L(C,P,b,A,S+"."+P,
                 outline: 1px solid ${n.length===1?"#42a1fc":"orange"} !important; outline-offset: -1px;
             }`)},[n,f]),g.useEffect(()=>{y&&(y.textContent=u?`[data-style-id="${u}"]{ outline: 1px solid orange !important; outline-offset: -1px;}`:"")},[u,n,y]),g.useEffect(()=>{m&&(m.textContent=`${v.map(o,({id:E})=>`[data-style-id="${E}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
-            }`)},[o,m]),g.useEffect(()=>{if(e==="section")return;const E=v.get(r,"_bodyTextLightColor","#64748b"),B=v.get(r,"_bodyTextDarkColor","#94a3b8"),w=v.get(r,"_bodyBgLightColor","#FFFFFF"),_=v.get(r,"_bodyBgDarkColor","#0f172a");i.body.className=`font-body antialiased text-[${E}] bg-[${w}] dark:text-[${B}] dark:bg-[${_}]`},[r,i,e]),e==="page"?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[x&&t.jsxRuntimeExports.jsx("link",{id:"heading-font",rel:"stylesheet",type:"text/css",href:`https://fonts.googleapis.com/css2?family=${x.replace(/ /g,"+")}:wght@300;400;500;600;700;800;900&display=swap`,media:"all"}),R&&x!==R&&t.jsxRuntimeExports.jsx("link",{id:"body-font",rel:"stylesheet",type:"text/css",href:`https://fonts.googleapis.com/css2?family=${R.replace(/ /g,"+")}:wght@300;400;500;600;700;800;900&display=swap`,media:"all"}),x&&t.jsxRuntimeExports.jsx("style",{children:`h1,h2,h3,h4,h5,h6{font-family: "${x}",ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}`})]}):null},Tt=()=>{const{t:e}=Ne.useTranslation();return t.jsxRuntimeExports.jsx("div",{className:"my-auto py-24 text-center text-gray-600 dark:text-white",children:t.jsxRuntimeExports.jsx("h1",{className:"mb-10 text-4xl ",children:e("canvas_empty")})})},_t=e=>{const r={};return Object.keys(e).forEach(n=>{v.isString(e[n])&&e[n].startsWith(ie.SLOT_KEY)&&(r[n]=e[n].replace(ie.SLOT_KEY,"").split(","))}),r},At=v.memoize(e=>{const r=e.replace(ie.STYLES_KEY,"").split(",");return tt.twMerge(r[0],r[1])});function It(e,r){return v.get(e,`${r}_attrs`,{})}function Pt(e,r,n,a){const u={};return Object.keys(e).forEach(o=>{if(v.isString(e[o])&&e[o].startsWith(ie.STYLES_KEY)){const i=At(e[o]);u[o]={className:i,"data-style-prop":o,"data-block-parent":e._id,"data-style-id":`${o}-${e._id}`,onMouseEnter:r,onMouseLeave:n,onClick:a,...It(e,o)}}}),u}function be({blocks:e}){const r=h.useAllBlocks(),[,n]=h.useHighlightBlockId(),[,a]=h.useSelectedStylingBlocks(),[,u]=h.useSelectedBlockIds(),o=g.useCallback(f=>{var x;const m=(x=f.currentTarget)==null?void 0:x.getAttribute("data-style-id");n(m||""),f.stopPropagation()},[n]),i=g.useCallback(f=>{n(""),f.stopPropagation()},[n]),p=g.useCallback(f=>{f.stopPropagation();const m=f.currentTarget;if(m.getAttribute("data-block-parent")){const x=m.getAttribute("data-style-prop"),R=m.getAttribute("data-style-id"),E=m.getAttribute("data-block-parent");a([{id:R,prop:x,blockId:E}]),u([E])}else if(m.getAttribute("data-block-id")&&(u([m.getAttribute("data-block-id")]),m.getAttribute("data-block-parent"))){const x=m.getAttribute("data-style-prop"),R=m.getAttribute("data-style-id"),E=m.getAttribute("data-block-parent");a([{id:R,prop:x,blockId:E}])}},[a,u]),y=g.useCallback(f=>Pt(f,o,i,p),[o,i]);return t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:g.Children.toArray(e.map((f,m)=>{const x=_t(f),R={};v.isEmpty(x)||Object.keys(x).forEach(_=>{R[_]=g.Children.toArray(x[_].map(j=>t.jsxRuntimeExports.jsx(be,{blocks:[v.find(r,{_id:j})]})))});const E=v.filter(r,{_parent:f._id});R.children=E.length?t.jsxRuntimeExports.jsx(be,{blocks:E}):null;const B=rt.getBlockComponent(f._type),w=(B==null?void 0:B.component)||null;return g.createElement(w,{blockProps:{onClick:p,"data-block-id":f._id,"data-block-type":f._type},...f,index:m,...y(f),...R,inBuilder:!0})}))})}const Ot=()=>{const e=h.useAllBlocks();return t.jsxRuntimeExports.jsx(et.Provider,{children:e.length?t.jsxRuntimeExports.jsx(be,{blocks:v.filter(e,r=>v.isEmpty(r._parent))}):t.jsxRuntimeExports.jsx(Tt,{})})},Mt=(e,r)=>e.querySelector(`[data-style-id="${r}"]`),Dt=()=>{const[e]=ee.useAtom(h.networkModeAtom),[r]=h.usePreviewMode(),[n]=h.useCanvasWidth(),[,a]=h.useSelectedBlockIds(),u=h.useSelectedBlock(),[,o]=h.useHighlightBlockId(),i=g.useRef(null),p=g.useRef(null),[y,f]=g.useState({width:0,height:0}),m=dt(y),[x,R]=g.useState(0),[E,B]=g.useState([]),[,w]=g.useState([]),[,_]=ee.useAtom(h.canvasIframeAtom),[j,z]=h.useSelectedStylingBlocks(),q=X.useBuilderProp("loadingCanvas",!1);g.useEffect(()=>{const{clientWidth:$,clientHeight:Y}=p.current;f({width:$,height:Y}),x===0&&R($)},[p,n,x]);const N=($,Y=0)=>{const{top:U}=$.getBoundingClientRect();return U+Y>=0&&U-Y<=window.innerHeight};g.useEffect(()=>{var $,Y;if(u&&u.type!=="Multiple"&&i.current){const U=He(i.current.contentDocument,u._id);U&&(N(U)||(Y=($=i.current)==null?void 0:$.contentWindow)==null||Y.scrollTo({top:U.offsetTop,behavior:"smooth"}),B([U]))}},[u]),g.useEffect(()=>{if(!v.isEmpty(j)&&i.current){const $=Mt(i.current.contentDocument,v.first(j).id);w($?[$]:[null])}else w([null])},[j]);const l=g.useMemo(()=>{let $=ut;return e==="offline"&&($=$.replace("https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio","/offline/tailwind.cdn.js"),$=$.replace("https://unpkg.com/aos@next/dist/aos.css","/offline/aos.css"),$=$.replace("https://unpkg.com/aos@next/dist/aos.js","/offline/aos.js")),$},[e]);return t.jsxRuntimeExports.jsx("div",{onClick:()=>{a([]),z([])},onMouseLeave:()=>setTimeout(()=>o(""),300),className:"relative mx-auto h-full w-full bg-black/80",style:x>0&&!v.isEmpty(m)?{width:r?"100%":x}:{},ref:p,children:t.jsxRuntimeExports.jsxs(bt,{contentDidMount:()=>_(i.current),ref:i,id:"canvas-iframe",style:{width:`${n}px`,...m},className:"relative mx-auto box-content h-full max-w-full shadow-md transition-all duration-300 ease-linear",initialContent:l,children:[t.jsxRuntimeExports.jsx(St,{}),t.jsxRuntimeExports.jsx(kt,{block:u,selectedBlockElement:v.first(E)}),t.jsxRuntimeExports.jsx(Ct,{model:"page"}),t.jsxRuntimeExports.jsxs(Rt,{children:[q?t.jsxRuntimeExports.jsx("div",{className:"h-full p-4",children:t.jsxRuntimeExports.jsx(X.Skeleton,{className:"h-full"})}):t.jsxRuntimeExports.jsx(Ot,{}),t.jsxRuntimeExports.jsx("div",{className:"h-60"})]})]})})},Bt=g.lazy(()=>Promise.resolve().then(()=>require("./AddBlocks-1f683caa.cjs"))),qt=()=>{const e=X.useBuilderProp("mode",fe.STATIC),[r,n]=ee.useAtom(h.addBlocksModalAtom),a={[fe.STATIC]:t.jsxRuntimeExports.jsx(Dt,{}),[fe.FRAMEWORK]:null}[e];return t.jsxRuntimeExports.jsxs("div",{className:"flex h-full w-full flex-col",children:[t.jsxRuntimeExports.jsx(lt,{}),t.jsxRuntimeExports.jsxs("div",{className:"relative flex-1 overflow-hidden bg-slate-800/20 bg-[linear-gradient(to_right,#EEE_0.5px,transparent_0.5px),linear-gradient(to_bottom,#EEE_0.5px,transparent_0.5px)] bg-[size:12px_12px]",children:[t.jsxRuntimeExports.jsx(g.Suspense,{fallback:t.jsxRuntimeExports.jsx(X.Skeleton,{className:"h-full"}),children:t.jsxRuntimeExports.jsx(h.ErrorBoundary,{children:a})}),r?t.jsxRuntimeExports.jsx("div",{onClick:()=>n(!1),className:"absolute inset-0 z-50 flex items-center bg-black/30 backdrop-blur-sm",children:t.jsxRuntimeExports.jsx("div",{onClick:u=>u.stopPropagation(),className:"mx-auto h-[90%] w-[90%] max-w-3xl rounded-md bg-white p-4 shadow-lg shadow-black/10 xl:w-[65%]",children:t.jsxRuntimeExports.jsx(Bt,{})})}):null]})]})};exports.default=qt;
+            }`)},[o,m]),g.useEffect(()=>{if(e==="section")return;const E=v.get(r,"_bodyTextLightColor","#64748b"),B=v.get(r,"_bodyTextDarkColor","#94a3b8"),w=v.get(r,"_bodyBgLightColor","#FFFFFF"),_=v.get(r,"_bodyBgDarkColor","#0f172a");i.body.className=`font-body antialiased text-[${E}] bg-[${w}] dark:text-[${B}] dark:bg-[${_}]`},[r,i,e]),e==="page"?t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[x&&t.jsxRuntimeExports.jsx("link",{id:"heading-font",rel:"stylesheet",type:"text/css",href:`https://fonts.googleapis.com/css2?family=${x.replace(/ /g,"+")}:wght@300;400;500;600;700;800;900&display=swap`,media:"all"}),R&&x!==R&&t.jsxRuntimeExports.jsx("link",{id:"body-font",rel:"stylesheet",type:"text/css",href:`https://fonts.googleapis.com/css2?family=${R.replace(/ /g,"+")}:wght@300;400;500;600;700;800;900&display=swap`,media:"all"}),x&&t.jsxRuntimeExports.jsx("style",{children:`h1,h2,h3,h4,h5,h6{font-family: "${x}",ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}`})]}):null},Tt=()=>{const{t:e}=Ne.useTranslation();return t.jsxRuntimeExports.jsx("div",{className:"my-auto py-24 text-center text-gray-600 dark:text-white",children:t.jsxRuntimeExports.jsx("h1",{className:"mb-10 text-4xl ",children:e("canvas_empty")})})},_t=e=>{const r={};return Object.keys(e).forEach(n=>{v.isString(e[n])&&e[n].startsWith(ie.SLOT_KEY)&&(r[n]=e[n].replace(ie.SLOT_KEY,"").split(","))}),r},At=v.memoize(e=>{const r=e.replace(ie.STYLES_KEY,"").split(",");return tt.twMerge(r[0],r[1])});function It(e,r){return v.get(e,`${r}_attrs`,{})}function Pt(e,r,n,a){const u={};return Object.keys(e).forEach(o=>{if(v.isString(e[o])&&e[o].startsWith(ie.STYLES_KEY)){const i=At(e[o]);u[o]={className:i,"data-style-prop":o,"data-block-parent":e._id,"data-style-id":`${o}-${e._id}`,onMouseEnter:r,onMouseLeave:n,onClick:a,...It(e,o)}}}),u}function be({blocks:e}){const r=h.useAllBlocks(),[,n]=h.useHighlightBlockId(),[,a]=h.useSelectedStylingBlocks(),[,u]=h.useSelectedBlockIds(),o=g.useCallback(f=>{var x;const m=(x=f.currentTarget)==null?void 0:x.getAttribute("data-style-id");n(m||""),f.stopPropagation()},[n]),i=g.useCallback(f=>{n(""),f.stopPropagation()},[n]),p=g.useCallback(f=>{f.stopPropagation();const m=f.currentTarget;if(m.getAttribute("data-block-parent")){const x=m.getAttribute("data-style-prop"),R=m.getAttribute("data-style-id"),E=m.getAttribute("data-block-parent");a([{id:R,prop:x,blockId:E}]),u([E])}else if(m.getAttribute("data-block-id")&&(u([m.getAttribute("data-block-id")]),m.getAttribute("data-block-parent"))){const x=m.getAttribute("data-style-prop"),R=m.getAttribute("data-style-id"),E=m.getAttribute("data-block-parent");a([{id:R,prop:x,blockId:E}])}},[a,u]),y=g.useCallback(f=>Pt(f,o,i,p),[o,i]);return t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:g.Children.toArray(e.map((f,m)=>{const x=_t(f),R={};v.isEmpty(x)||Object.keys(x).forEach(_=>{R[_]=g.Children.toArray(x[_].map(j=>t.jsxRuntimeExports.jsx(be,{blocks:[v.find(r,{_id:j})]})))});const E=v.filter(r,{_parent:f._id});R.children=E.length?t.jsxRuntimeExports.jsx(be,{blocks:E}):null;const B=rt.getBlockComponent(f._type),w=(B==null?void 0:B.component)||null;return g.createElement(w,{blockProps:{onClick:p,"data-block-id":f._id,"data-block-type":f._type},...f,index:m,...y(f),...R,inBuilder:!0})}))})}const Ot=()=>{const e=h.useAllBlocks();return t.jsxRuntimeExports.jsx(et.Provider,{children:e.length?t.jsxRuntimeExports.jsx(be,{blocks:v.filter(e,r=>v.isEmpty(r._parent))}):t.jsxRuntimeExports.jsx(Tt,{})})},Mt=(e,r)=>e.querySelector(`[data-style-id="${r}"]`),Dt=()=>{const[e]=ee.useAtom(h.networkModeAtom),[r]=h.usePreviewMode(),[n]=h.useCanvasWidth(),[,a]=h.useSelectedBlockIds(),u=h.useSelectedBlock(),[,o]=h.useHighlightBlockId(),i=g.useRef(null),p=g.useRef(null),[y,f]=g.useState({width:0,height:0}),m=dt(y),[x,R]=g.useState(0),[E,B]=g.useState([]),[,w]=g.useState([]),[,_]=ee.useAtom(h.canvasIframeAtom),[j,z]=h.useSelectedStylingBlocks(),q=X.useBuilderProp("loadingCanvas",!1);g.useEffect(()=>{const{clientWidth:$,clientHeight:Y}=p.current;f({width:$,height:Y}),x===0&&R($)},[p,n,x]);const N=($,Y=0)=>{const{top:U}=$.getBoundingClientRect();return U+Y>=0&&U-Y<=window.innerHeight};g.useEffect(()=>{var $,Y;if(u&&u.type!=="Multiple"&&i.current){const U=He(i.current.contentDocument,u._id);U&&(N(U)||(Y=($=i.current)==null?void 0:$.contentWindow)==null||Y.scrollTo({top:U.offsetTop,behavior:"smooth"}),B([U]))}},[u]),g.useEffect(()=>{if(!v.isEmpty(j)&&i.current){const $=Mt(i.current.contentDocument,v.first(j).id);w($?[$]:[null])}else w([null])},[j]);const l=g.useMemo(()=>{let $=ut;return e==="offline"&&($=$.replace("https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio","/offline/tailwind.cdn.js"),$=$.replace("https://unpkg.com/aos@next/dist/aos.css","/offline/aos.css"),$=$.replace("https://unpkg.com/aos@next/dist/aos.js","/offline/aos.js")),$},[e]);return t.jsxRuntimeExports.jsx("div",{onClick:()=>{a([]),z([])},onMouseLeave:()=>setTimeout(()=>o(""),300),className:"relative mx-auto h-full w-full bg-black/80",style:x>0&&!v.isEmpty(m)?{width:r?"100%":x}:{},ref:p,children:t.jsxRuntimeExports.jsxs(bt,{contentDidMount:()=>_(i.current),ref:i,id:"canvas-iframe",style:{width:`${n}px`,...m},className:"relative mx-auto box-content h-full max-w-full shadow-md transition-all duration-300 ease-linear",initialContent:l,children:[t.jsxRuntimeExports.jsx(St,{}),t.jsxRuntimeExports.jsx(kt,{block:u,selectedBlockElement:v.first(E)}),t.jsxRuntimeExports.jsx(Ct,{model:"page"}),t.jsxRuntimeExports.jsxs(Rt,{children:[q?t.jsxRuntimeExports.jsx("div",{className:"h-full p-4",children:t.jsxRuntimeExports.jsx(X.Skeleton,{className:"h-full"})}):t.jsxRuntimeExports.jsx(Ot,{}),t.jsxRuntimeExports.jsx("div",{className:"h-60"})]})]})})},Bt=g.lazy(()=>Promise.resolve().then(()=>require("./AddBlocks-df0ea47a.cjs"))),qt=()=>{const e=X.useBuilderProp("mode",fe.STATIC),[r,n]=ee.useAtom(h.addBlocksModalAtom),a={[fe.STATIC]:t.jsxRuntimeExports.jsx(Dt,{}),[fe.FRAMEWORK]:null}[e];return t.jsxRuntimeExports.jsxs("div",{className:"flex h-full w-full flex-col",children:[t.jsxRuntimeExports.jsx(lt,{}),t.jsxRuntimeExports.jsxs("div",{className:"relative flex-1 overflow-hidden bg-slate-800/20 bg-[linear-gradient(to_right,#EEE_0.5px,transparent_0.5px),linear-gradient(to_bottom,#EEE_0.5px,transparent_0.5px)] bg-[size:12px_12px]",children:[t.jsxRuntimeExports.jsx(g.Suspense,{fallback:t.jsxRuntimeExports.jsx(X.Skeleton,{className:"h-full"}),children:t.jsxRuntimeExports.jsx(h.ErrorBoundary,{children:a})}),r?t.jsxRuntimeExports.jsx("div",{onClick:()=>n(!1),className:"absolute inset-0 z-50 flex items-center bg-black/30 backdrop-blur-sm",children:t.jsxRuntimeExports.jsx("div",{onClick:u=>u.stopPropagation(),className:"mx-auto h-[90%] w-[90%] max-w-3xl rounded-md bg-white p-4 shadow-lg shadow-black/10 xl:w-[65%]",children:t.jsxRuntimeExports.jsx(Bt,{})})}):null]})]})};exports.default=qt;