@chaibuilder/sdk 1.2.57 → 1.2.58

package/dist/CanvasArea-7nhpzTI-.cjs

@@ -0,0 +1,59 @@
+"use strict";var re=Object.defineProperty;var ie=(o,s,e)=>s in o?re(o,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[s]=e;var D=(o,s,e)=>(ie(o,typeof s!="symbol"?s+"":s,e),e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./jsx-runtime-Z_BpKhVy.cjs"),x=require("react"),c=require("lodash-es"),R=require("@radix-ui/react-icons"),i=require("./index-0FIxW0gR.cjs"),F=require("./index-5IJnVFyU.cjs"),U=require("react-i18next"),$=require("jotai"),le=require("lucide-react"),Y=require("react-dom"),w=require("prop-types"),ce=require("react-quill"),q=require("./atoms-a0H_593V.cjs"),ae=require("@floating-ui/dom"),G=require("@floating-ui/react-dom"),de=require("@react-hookz/web"),ue=require("flagged"),pe=require("@tailwindcss/typography"),xe=require("@tailwindcss/forms"),he=require("@tailwindcss/aspect-ratio"),me=require("tailwindcss-palette-generator"),ge=require("tailwind-merge"),L=require("./MODIFIERS-mVmfEGgo.cjs"),fe=require("@chaibuilder/runtime"),X=require("lodash"),ve=require("react-wrap-balancer"),je=require("re-resizable");require("./_commonjsHelpers-wDK0ZLPo.cjs");require("@radix-ui/react-toggle");require("class-variance-authority");require("./utils-D_vtk3zK.cjs");require("clsx");require("@radix-ui/react-switch");require("@radix-ui/react-slot");require("@radix-ui/react-accordion");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-dialog");require("@radix-ui/react-label");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-tooltip");require("@radix-ui/react-popover");require("@radix-ui/react-menubar");require("@radix-ui/react-hover-card");require("@radix-ui/react-select");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-separator");require("@radix-ui/react-toast");require("cmdk");require("@radix-ui/react-context-menu");require("react-icons-picker");require("./Functions-N3yhPYKY.cjs");require("tree-model");require("i18next");require("react-hotkeys-hook");require("./index--mLLy7QQ.cjs");const ye=()=>{const{hasUndo:o,hasRedo:s,undo:e,redo:t}=i.useUndoManager();return r.jsxRuntimeExports.jsxs("div",{className:"flex items-center",children:[r.jsxRuntimeExports.jsx(i.Button,{disabled:!o(),size:"sm",onClick:e,className:"rounded-full",variant:"ghost",children:r.jsxRuntimeExports.jsx(R.ResetIcon,{})}),r.jsxRuntimeExports.jsx(i.Button,{disabled:!s(),onClick:t,size:"sm",className:"rounded-full",variant:"ghost",children:r.jsxRuntimeExports.jsx(R.ResetIcon,{className:"rotate-180 scale-y-[-1] transform"})})]})};function be(){const[o,s]=i.useDarkMode();return r.jsxRuntimeExports.jsxs("div",{className:"flex items-center",children:[r.jsxRuntimeExports.jsx(R.SunIcon,{className:"size-4 shrink-0"}),r.jsxRuntimeExports.jsx(i.Switch,{id:"dark-mode-switch",checked:o,onCheckedChange:()=>{s(!o)},className:`${o?"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:r.jsxRuntimeExports.jsx("span",{"aria-hidden":"true",className:`${o?"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`})}),r.jsxRuntimeExports.jsx(F.FaMoon,{className:"size-4 ml-3 shrink-0"})]})}const Z=({landscape:o=!1})=>r.jsxRuntimeExports.jsxs("svg",{className:o?"rotate-90":"",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 13 13",xmlSpace:"preserve",width:13,height:13,children:[r.jsxRuntimeExports.jsx("g",{strokeWidth:0}),r.jsxRuntimeExports.jsx("g",{strokeLinecap:"round",strokeLinejoin:"round"}),r.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_title",content:"mobile_xs_content",breakpoint:"xs",icon:r.jsxRuntimeExports.jsx(R.MobileIcon,{}),width:400},{title:"mobile_sm_title",content:"mobile_sm_content",breakpoint:"sm",icon:r.jsxRuntimeExports.jsx(R.MobileIcon,{className:"rotate-90"}),width:640},{title:"tablet_md_title",content:"tablet_md_content",breakpoint:"md",icon:r.jsxRuntimeExports.jsx(Z,{}),width:800},{title:"tablet_lg_title",content:"tablet_lg_content",breakpoint:"lg",icon:r.jsxRuntimeExports.jsx(Z,{landscape:!0}),width:1024},{title:"desktop_xl_title",content:"desktop_xl_content",breakpoint:"xl",icon:r.jsxRuntimeExports.jsx(R.LaptopIcon,{}),width:1420},{title:"large_desktop_2xl_title",content:"large_desktop_2xl_content",breakpoint:"2xl",icon:r.jsxRuntimeExports.jsx(R.DesktopIcon,{}),width:1920}],Q=({title:o,content:s,currentBreakpoint:e,breakpoint:t,width:n,icon:d,onClick:a})=>{const{t:l}=U.useTranslation();return r.jsxRuntimeExports.jsxs(i.HoverCard,{children:[r.jsxRuntimeExports.jsx(i.HoverCardTrigger,{asChild:!0,children:r.jsxRuntimeExports.jsx(i.Button,{onClick:()=>a(n),size:"sm",variant:t===e?"secondary":"ghost",children:d})}),r.jsxRuntimeExports.jsx(i.HoverCardContent,{className:"w-52 border-border",children:r.jsxRuntimeExports.jsx("div",{className:"flex justify-between space-x-4",children:r.jsxRuntimeExports.jsxs("div",{className:"space-y-1",children:[r.jsxRuntimeExports.jsx("h4",{className:"text-sm font-semibold",children:l(o)}),r.jsxRuntimeExports.jsx("p",{className:"text-xs",children:l(s)})]})})})]})},ke=()=>{const[,o,s]=i.useCanvasWidth(),[e,t]=i.useSelectedBreakpoints(),{t:n}=U.useTranslation(),d=i.useBuilderProp("breakpoints",$e),a=l=>{e.includes(l)?e.length>2&&t(e.filter(u=>u!==l)):t(u=>[...u,l])};return d.length<4?r.jsxRuntimeExports.jsx("div",{className:"flex items-center rounded-md",children:c.map(d,l=>x.createElement(Q,{...l,onClick:s,key:l.breakpoint,currentBreakpoint:o}))}):r.jsxRuntimeExports.jsxs("div",{className:"flex items-center rounded-md",children:[c.map(d.filter(l=>c.includes(e,c.toUpper(l.breakpoint))),l=>x.createElement(Q,{...l,onClick:s,key:l.breakpoint,currentBreakpoint:o})),r.jsxRuntimeExports.jsxs(i.DropdownMenu,{children:[r.jsxRuntimeExports.jsx(i.DropdownMenuTrigger,{asChild:!0,children:r.jsxRuntimeExports.jsx("span",{className:"cursor-pointer px-2.5 hover:opacity-80",children:r.jsxRuntimeExports.jsx(R.DotsVerticalIcon,{className:"scale-90 transform"})})}),r.jsxRuntimeExports.jsxs(i.DropdownMenuContent,{className:"w-56 border-border text-xs",children:[r.jsxRuntimeExports.jsx(i.DropdownMenuLabel,{children:n("Breakpoints")}),r.jsxRuntimeExports.jsx(i.DropdownMenuSeparator,{}),c.map(d,l=>r.jsxRuntimeExports.jsx(i.DropdownMenuCheckboxItem,{disabled:l.breakpoint==="xs",onCheckedChange:()=>a(c.toUpper(l.breakpoint)),checked:c.includes(e,c.toUpper(l.breakpoint)),children:n(l.title)},l.breakpoint))]})]})]})},Ee=()=>{const{t:o}=U.useTranslation(),{setNewBlocks:s}=i.useBlocksStoreUndoableActions(),[,e]=i.useSelectedBlockIds(),[,t]=i.useSelectedStylingBlocks(),n=x.useCallback(()=>{s([]),e([]),t([])},[s]);return r.jsxRuntimeExports.jsx("div",{className:"flex items-center",children:r.jsxRuntimeExports.jsxs(i.AlertDialog,{children:[r.jsxRuntimeExports.jsx(i.AlertDialogTrigger,{asChild:!0,children:r.jsxRuntimeExports.jsxs(i.Button,{size:"sm",variant:"ghost",className:"flex items-center gap-x-1",children:[r.jsxRuntimeExports.jsx(R.EraserIcon,{})," ",o("clear")]})}),r.jsxRuntimeExports.jsxs(i.AlertDialogContent,{className:"border-border",children:[r.jsxRuntimeExports.jsxs(i.AlertDialogHeader,{children:[r.jsxRuntimeExports.jsx(i.AlertDialogTitle,{children:o("clear_canvas_title")}),r.jsxRuntimeExports.jsx(i.AlertDialogDescription,{children:o("clear_canvas_description")})]}),r.jsxRuntimeExports.jsxs(i.AlertDialogFooter,{children:[r.jsxRuntimeExports.jsx(i.AlertDialogCancel,{children:o("cancel")}),r.jsxRuntimeExports.jsx(i.AlertDialogAction,{onClick:n,children:o("yes")})]})]})]})})},Re=()=>{const[o,s]=$.useAtom(i.aiAssistantActiveAtom);return i.useBuilderProp("askAiCallBack",null)?r.jsxRuntimeExports.jsxs("div",{className:"flex items-center space-x-2",children:[r.jsxRuntimeExports.jsxs(i.Label,{htmlFor:"ai-assistant",className:"flex items-center gap-x-1 text-sm text-yellow-600",children:[r.jsxRuntimeExports.jsx(le.SparklesIcon,{className:"w-4"}),"AI Assistant"]}),r.jsxRuntimeExports.jsx(i.Switch,{className:"scale-90",checked:o,onCheckedChange:t=>{s(t)},id:"ai-assitantt"})]}):null},we=()=>{const o=i.useBuilderProp("darkMode",!0),[s]=i.useCanvasZoom();return r.jsxRuntimeExports.jsxs("div",{className:"flex h-10 items-center justify-between border-b bg-background/70 px-2",children:[r.jsxRuntimeExports.jsxs("div",{className:"flex h-full space-x-2",children:[r.jsxRuntimeExports.jsx(ke,{}),r.jsxRuntimeExports.jsx(i.Separator,{orientation:"vertical"}),o?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(be,{}),r.jsxRuntimeExports.jsx(i.Separator,{orientation:"vertical"})]}):null,r.jsxRuntimeExports.jsxs("div",{className:"flex w-12 cursor-not-allowed items-center justify-center gap-x-1 space-x-0 font-medium text-gray-400",children:[r.jsxRuntimeExports.jsx(R.ZoomInIcon,{className:"h-3.5 w-3.5 flex-shrink-0"})," ",r.jsxRuntimeExports.jsxs("div",{className:"text-xs leading-3",children:[c.round(s,0),"%"]})]}),r.jsxRuntimeExports.jsx(i.Separator,{orientation:"vertical"}),r.jsxRuntimeExports.jsx(ye,{})]}),r.jsxRuntimeExports.jsxs("div",{className:"flex h-full items-center space-x-2",children:[r.jsxRuntimeExports.jsx(Ee,{}),r.jsxRuntimeExports.jsx(i.Separator,{orientation:"vertical"}),r.jsxRuntimeExports.jsx(Re,{})]})]})},Se=`<!doctype html>
+<html lang="en" dir="__HTML_DIR__" class="scroll-smooth h-full overflow-y-auto">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"><\/script>
+    <style>
+    html { height: 100%; overflow:auto; }
+    body { height: 100%; }
+    .air-highlight{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}
+    .air-highlight-multi{ outline: 1px solid #29e503 !important; outline-offset: -1px;}
+    body{   -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;
+            -moz-user-select: none;-ms-user-select: none; user-select: none; }
+    html{
+      -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+    }
+    /** IMPORTANT: Make fields content editable in SAFARI */
+    [contenteditable] {-webkit-user-select: text;user-select: text;}
+
+    html::-webkit-scrollbar { width: 0 !important }
+    .aspect-auto{aspect-ratio: auto;}
+    .aspect-square{aspect-ratio: 1/1;}
+    .aspect-video{aspect-ratio: 16/9;}
+    .dragging [data-dnd="leaf"] { pointer-events: none; } .dragging [data-dnd="leaf"] * { pointer-events: none; }
+    .dragging [data-dnd="ignore"], .dragging [data-dnd="ignore"] * { pointer-events: none; }
+    a{ pointer-events: none !important; }
+    [contenteditable="true"], [contenteditable="true"] * { cursor: text !important; }
+    [contenteditable="true"] {
+        outline: none;
+        box-shadow: 0 0 0px 4px rgba(36, 150, 255, 0.2);
+        -webkit-user-select: text;
+        -moz-user-select: text;
+        user-select: text;
+    }
+    .frame-root .frame-content { height: 100%; }
+    [data-drop="yes"] { outline: 2px dashed orange !important; outline-offset: -2px }
+    [data-dnd="yes"] { pointer-events: auto !important}
+    [data-dnd="no"] { pointer-events: none !important; }
+    [data-dnd-dragged="yes"] { opacity: 0.6; pointer-events: none; }
+    [data-dnd-dragged="no"] { opacity: 1; pointer-events: auto !important; }
+    [force-show] { display: block !important; }
+    </style>    
+    <style id="hidden-blocks"></style>
+    <style id="selected-block"></style>
+    <style id="selected-styling-block"></style>
+    <style id="highlighted-block"></style>
+    <style id="dragged-block"></style>
+
+  </head>
+  <body class="font-body antialiased h-full">
+    <div class="frame-root h-full"></div>
+    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"><\/script>
+  </body>
+</html>`,Be=o=>{const[s]=i.useCanvasWidth(),[,e]=i.useCanvasZoom(),[t,n]=x.useState({}),d=x.useCallback(()=>{const{width:a,height:l}=o;if(a<s){const u=parseFloat((a/s).toFixed(2).toString());let m={};const f=l*u;l&&(m={height:100+(l-f)/f*100+"%"}),n({position:"relative",top:0,transform:`scale(${u})`,transformOrigin:"top left",...m,maxWidth:"none"}),e(u*100)}else n({}),e(100)},[s,o,e]);return x.useEffect(()=>{d()},[s,o,e,d]),t};let ee,te;typeof document<"u"&&(ee=document);typeof window<"u"&&(te=window);const se=x.createContext({document:ee,window:te}),H=()=>x.useContext(se),{Provider:Ae,Consumer:lt}=se;class ne extends x.Component{componentDidMount(){this.props.contentDidMount()}componentDidUpdate(){this.props.contentDidUpdate()}render(){return x.Children.only(this.props.children)}}D(ne,"propTypes",{children:w.element.isRequired,contentDidMount:w.func.isRequired,contentDidUpdate:w.func.isRequired});class O extends x.Component{constructor(e,t){super(e,t);D(this,"setRef",e=>{this.nodeRef.current=e;const{forwardedRef:t}=this.props;typeof t=="function"?t(e):t&&(t.current=e)});D(this,"handleLoad",()=>{clearInterval(this.loadCheck),this.state.iframeLoaded||this.setState({iframeLoaded:!0})});D(this,"loadCheck",()=>setInterval(()=>{this.handleLoad()},500));this._isMounted=!1,this.nodeRef=x.createRef(),this.state={iframeLoaded:!1}}componentDidMount(){this._isMounted=!0,this.getDoc()&&this.nodeRef.current.contentWindow.addEventListener("DOMContentLoaded",this.handleLoad)}componentWillUnmount(){this._isMounted=!1,this.nodeRef.current.removeEventListener("DOMContentLoaded",this.handleLoad)}getDoc(){return this.nodeRef.current?this.nodeRef.current.contentDocument:null}getMountTarget(){const e=this.getDoc();return this.props.mountTarget?e.querySelector(this.props.mountTarget):e.body.children[0]}renderFrameContents(){if(!this._isMounted)return null;const e=this.getDoc();if(!e)return null;const t=this.props.contentDidMount,n=this.props.contentDidUpdate,d=e.defaultView||e.parentView,a=r.jsxRuntimeExports.jsx(ne,{contentDidMount:t,contentDidUpdate:n,children:r.jsxRuntimeExports.jsx(Ae,{value:{document:e,window:d},children:r.jsxRuntimeExports.jsx("div",{className:"frame-content",children:this.props.children})})}),l=this.getMountTarget();return[Y.createPortal(this.props.head,this.getDoc().head),Y.createPortal(a,l)]}render(){const e={...this.props,srcDoc:this.props.initialContent,children:void 0};return delete e.head,delete e.initialContent,delete e.mountTarget,delete e.contentDidMount,delete e.contentDidUpdate,delete e.forwardedRef,r.jsxRuntimeExports.jsx("iframe",{...e,ref:this.setRef,onLoad:this.handleLoad,children:this.state.iframeLoaded&&this.renderFrameContents()})}}D(O,"propTypes",{style:w.object,head:w.node,initialContent:w.string,mountTarget:w.string,contentDidMount:w.func,contentDidUpdate:w.func,children:w.oneOfType([w.element,w.arrayOf(w.element)])}),D(O,"defaultProps",{style:{},head:null,children:void 0,mountTarget:void 0,contentDidMount:()=>{},contentDidUpdate:()=>{},initialContent:'<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'});const Ce=x.forwardRef((o,s)=>r.jsxRuntimeExports.jsx(O,{...o,forwardedRef:s}));function W(o){const s=window.getComputedStyle(o),e=s.display;if(e==="flex"||e==="inline-flex"){const t=s.flexDirection;return t==="column"||t==="column-reverse"?"vertical":"horizontal"}else if(e==="grid"){const t=s.gridAutoFlow,n=s.gridTemplateRows,d=s.gridTemplateColumns;return t.includes("column")||n.split(" ").length>d.split(" ").length?"vertical":"horizontal"}else if(e==="block"||e==="inline-block")return"vertical";return"horizontal"}let k=null,B=[],T=null,P=null;const J=(o,s,e)=>{if(!k||!o)return;const t=k==null?void 0:k.getElementById("placeholder"),n=B.map(([u])=>u),d=n.reduce((u,m)=>Math.abs(m-e)<Math.abs(u-e)?m:u,0),a=n.indexOf(d);if(!B[a])return;const l=B[a];t.style.width=s==="vertical"?l[2]+"px":"2px",t.style.height=s==="vertical"?"2px":l[2]+"px",t.style.display="block",s==="vertical"?(t.style.top=l[0]+"px",t.style.left=l[1]+"px"):(t.style.top=l[1]+"px",t.style.left=l[0]+"px")};function Ie(o,s){let e=0,t=1/0;return s.forEach((n,d)=>{const a=Math.abs(n[0]-o);a<t&&(t=a,e=d)}),e}const _e=o=>{const e=W(o)==="horizontal";B=[],Array.from(o.children).forEach((t,n)=>{if(t.classList.contains("pointer-events-none"))return;const d=e?t.offsetLeft:t.offsetTop,a=e?[t.offsetTop,t.clientHeight]:[t.offsetLeft,t.clientWidth];if(B.push([d,a[0],a[1]]),n===o.children.length-1){const l=e?t.offsetLeft+t.clientWidth:t.offsetTop+t.clientHeight;B.push([l,a[0],a[1]])}})},De=c.throttle(o=>{var n;const s=o.target,e=W(s),t=(n=k==null?void 0:k.defaultView)==null?void 0:n.scrollY;e==="vertical"?J(s,e,o.clientY+t):J(s,e,o.clientX)},0);function V(){const o=k==null?void 0:k.getElementById("placeholder");o.style.display="none",Me("pointer-none"),Te()}function Me(o){(k==null?void 0:k.querySelectorAll(`.${o}`)).forEach(e=>{e.classList.remove(o)})}function Te(){const o=k==null?void 0:k.querySelector('[data-drop="yes"]');o&&o.removeAttribute("data-drop")}const Ne=()=>{const{document:o}=H(),[s,e]=$.useAtom(i.draggingFlagAtom),{addCoreBlock:t}=i.useAddBlock(),[,n]=i.useHighlightBlockId(),[,d]=i.useSelectedBlockIds(),{moveBlocks:a}=i.useBlocksStoreUndoableActions(),[,l]=$.useAtom(i.draggedBlockIdAtom),[u,m]=$.useAtom(q.draggedBlockAtom),[,f]=$.useAtom(q.dropTargetAtom),p=()=>{V(),e(!1),l(""),m(null),f(null),B=[]};return k=o,{isDragging:s,onDragOver:g=>{g.preventDefault(),g.stopPropagation(),De(g)},onDrop:g=>{var A;T==null||T.classList.remove("drop-target");const j=T,v=W(j)==="vertical"?g.clientY+((A=k==null?void 0:k.defaultView)==null?void 0:A.scrollY):g.clientX;P=Ie(v,B);const h=u,E=j.getAttribute("data-block-id");if(h===T){p();return}if(!c.has(h,"_id")){t(h,E==="canvas"?null:E,P),setTimeout(p,300);return}let S=j.getAttribute("data-block-id");S===null&&(S=g.target.parentElement.getAttribute("data-block-id")),a([h._id],S,P),p(),setTimeout(V,300)},onDragEnter:g=>{const j=g,b=j.target;T=b;const v=b.getAttribute("data-block-id");f(v),j.stopPropagation(),j.preventDefault(),B=[],_e(b),b.classList.add("drop-target"),e(!0),n(""),d([])}}};function K(o){return o.getAttribute("data-block-id")?o:o.closest("[data-block-id]")}function qe(o){o.container.innerHTML="",o.container.parentNode.removeChild(o.container);var s=document.querySelector(".ql-toolbar");s&&s.parentNode.removeChild(s),o=null}const Le=()=>{const o=["Heading","Paragraph","Text","Link","Span","Button"],s=i.useUpdateBlocksProps(),[,e]=i.useHighlightBlockId(),[t,n]=$.useAtom(i.inlineEditingActiveAtom);return d=>{var p;if(t)return;const a=K(d.target),l=a.getAttribute("data-block-type");if(!l||!o.includes(l))return;const u=a.cloneNode(!0);a.style.display="none",Array.from(u.attributes).forEach(g=>{g.name!=="class"&&u.removeAttribute(g.name)}),l==="Text"&&(u.style.display="inline-block"),a.parentNode.insertBefore(u,a.nextSibling);const m=new ce.Quill(u,{placeholder:"Type here..."});function f(){const g=m.getText(0,m.getLength());s([a.getAttribute("data-block-id")],{content:g}),a.removeAttribute("style"),u.removeEventListener("blur",f,!0),qe(m),n(""),e("")}u.addEventListener("blur",f,!0),u.addEventListener("keydown",g=>{(g.key==="Enter"||g.key==="Escape")&&f()}),m.focus(),(p=u.querySelector(".ql-clipboard"))==null||p.remove(),n(a.getAttribute("data-block-id"))}},Fe=()=>{const[,o]=i.useSelectedStylingBlocks(),[s,e]=i.useSelectedBlockIds(),[,t]=i.useHighlightBlockId(),[n]=$.useAtom(i.inlineEditingActiveAtom),[d]=$.useAtom(i.treeRefAtom);return a=>{if(n)return;a.stopPropagation();const l=K(a.target);if(l!=null&&l.getAttribute("data-block-id")&&(l==null?void 0:l.getAttribute("data-block-id"))==="container"){e([]),o([]),t("");return}if(l!=null&&l.getAttribute("data-block-parent")){const u=l.getAttribute("data-style-prop"),m=l.getAttribute("data-style-id"),f=l.getAttribute("data-block-parent");s.includes(f)||d==null||d.closeAll(),o([{id:m,prop:u,blockId:f}]),e([f])}else if(l!=null&&l.getAttribute("data-block-id")){let u=l.getAttribute("data-block-id");s.includes(u)||d==null||d.closeAll(),e([u])}t("")}},He=c.throttle((o,s)=>{const e=K(o.target);e!=null&&e.getAttribute("data-style-id")&&s(e.getAttribute("data-style-id"))},100),Pe=()=>{const[,o]=i.useHighlightBlockId(),[s]=$.useAtom(i.inlineEditingActiveAtom);return e=>{s||He(e,o)}},Oe=({children:o})=>{const{document:s}=H(),[e]=i.useSelectedBlockIds(),[t,n]=i.useSelectedStylingBlocks();x.useEffect(()=>{setTimeout(()=>{if(!c.isEmpty(t))return;const m=oe(s,c.first(e));if(m){const f=m.getAttribute("data-style-prop");if(f){const p=m.getAttribute("data-style-id"),g=m.getAttribute("data-block-parent");n([{id:p,prop:f,blockId:g}])}}},100)},[s,e,n,t]);const d=Le(),a=Fe(),l=Pe(),u=Ne();return r.jsxRuntimeExports.jsx("div",{"data-block-id":"canvas",id:"canvas",onClick:a,onDoubleClick:d,onMouseMove:l,...c.omit(u,"isDragging"),className:"relative mb-5 h-full max-w-full "+(u.isDragging?"dragging":""),children:o})},oe=(o,s)=>o.querySelector(`[data-block-id="${s}"]`),ze=()=>{const{window:o}=H(),[s,e]=i.useSelectedBlockIds(),[t]=i.useBlocksStore(),[,n]=i.useSelectedStylingBlocks(),{undo:d,redo:a}=i.useUndoManager(),l=i.useDuplicateBlocks(),[,u]=i.usePreviewMode(),m=i.useRemoveBlocks(),{savePage:f}=i.useSavePage(),[p]=$.useAtom(i.inlineEditingActiveAtom),[,g]=$.useAtom(i.editLayerNameAtom),j=v=>{v.key==="Enter"&&(v.preventDefault(),s.length===1&&g(c.first(s)))},b=v=>{const h=t.find(E=>E._id===v);return h?h._parent:null};return x.useEffect(()=>{const v=h=>{if(h.key==="Escape"){e([]),n([]);return}if(j(h),!p&&(h.key==="Delete"||h.key==="Backspace")&&(h.preventDefault(),m(s)),h.ctrlKey||h.metaKey){if(h.key==="ArrowUp"){h.preventDefault();const E=s.length>0?b(s[0]):null;E&&e([E])}if(["z","y","d","x","c","p","s","v"].includes(h.key)){if(p&&["x","z","v"].includes(h.key))return!0;h.preventDefault()}h.key==="s"&&(h.stopPropagation(),h.preventDefault(),f()),h.key==="z"&&d(),h.key==="y"&&a(),h.key==="d"&&l(s)}};return o.removeEventListener("keydown",v),o.addEventListener("keydown",v),()=>{o.removeEventListener("keydown",v)}},[s,e,d,m,u,a,l,p,f,o]),null},Ue=({block:o,label:s})=>{const[,e]=i.useSelectedBlockIds(),[,t]=i.useHighlightBlockId(),[,n]=$.useAtom(q.draggedBlockAtom),d=ue.useFeature("dnd");return r.jsxRuntimeExports.jsxs("div",{className:"mr-10 flex cursor-grab items-center space-x-1 px-1",draggable:d?"true":"false",onDragStart:a=>{a.dataTransfer.setData("text/plain",JSON.stringify(c.pick(o,["_id","_type","_name"]))),n(o),setTimeout(()=>{e([]),t(null)},200)},children:[r.jsxRuntimeExports.jsx(R.DragHandleDots2Icon,{}),s]})},We=({selectedBlockElement:o,block:s})=>{const e=i.useRemoveBlocks(),t=i.useDuplicateBlocks(),[,n]=i.useSelectedBlockIds(),[,d]=i.useSelectedStylingBlocks(),[a]=$.useAtom(i.inlineEditingActiveAtom),{floatingStyles:l,refs:u,update:m}=G.useFloating({placement:"top-start",middleware:[G.shift(),ae.flip()],elements:{reference:o}});de.useResizeObserver(o,()=>m(),o!==null);const f=c.get(s,"_parent",null),p=c.isEmpty(c.get(s,"_name",""))?c.get(s,"_type",""):c.get(s,"_name","");return!o||!s||a?null:r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:r.jsxRuntimeExports.jsxs("div",{role:"button",tabIndex:0,ref:u.setFloating,style:l,onClick:g=>{g.stopPropagation(),g.preventDefault()},onKeyDown:g=>g.stopPropagation(),className:"z-[99999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",children:[r.jsxRuntimeExports.jsx(Ue,{label:p,block:s}),r.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 px-1",children:[f&&r.jsxRuntimeExports.jsx(R.ArrowUpIcon,{className:"hover:scale-105",onClick:()=>{d([]),n([f])}}),i.canDuplicateBlock(c.get(s,"_type",""))?r.jsxRuntimeExports.jsx(R.CopyIcon,{className:"hover:scale-105",onClick:()=>t([s==null?void 0:s._id])}):null,i.canDeleteBlock(c.get(s,"_type",""))?r.jsxRuntimeExports.jsx(R.TrashIcon,{className:"hover:scale-105",onClick:()=>e([s==null?void 0:s._id])}):null]})]})})},Ke=({addVariant:o,e:s})=>{o("hs-dropdown-open",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-dropdown.open > .${s(`hs-dropdown-open${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-dropdown.open .hs-dropdown-toggle .${s(`hs-dropdown-open${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-dropdown.open > .hs-dropdown-menu > .${s(`hs-dropdown-open${t}${n}`)}`)}]),o("hs-removing",({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-removing.${s(`hs-removing${t}${n}`)}`)}),o("hs-tooltip-shown",({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-tooltip.show .${s(`hs-tooltip-shown${t}${n}`)}`)}),o("hs-accordion-active",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-accordion.active.${s(`hs-accordion-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-accordion.active > .${s(`hs-accordion-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-accordion.active > .hs-accordion-toggle .${s(`hs-accordion-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-accordion.active > .hs-accordion-heading > .hs-accordion-toggle .${s(`hs-accordion-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-accordion.active > .hs-accordion-toggle.${s(`hs-accordion-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-accordion.active > .hs-accordion-heading > .hs-accordion-toggle.${s(`hs-accordion-active${t}${n}`)}`)}]),o("hs-accordion-selected",({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-accordion .selected.${s(`hs-accordion-selected${t}${n}`)}`)}),o("hs-collapse-open",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-collapse.open .${s(`hs-collapse-open${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-collapse.open.${s(`hs-collapse-open${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-collapse-toggle.open .${s(`hs-collapse-open${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-collapse-toggle.open.${s(`hs-collapse-open${t}${n}`)}`)}]),o("hs-tab-active",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`[data-hs-tab].active.${s(`hs-tab-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`[data-hs-tab].active .${s(`hs-tab-active${t}${n}`)}`)}]),o("hs-overlay-open",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.open.${s(`hs-overlay-open${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.open .${s(`hs-overlay-open${t}${n}`)}`)}]),o("hs-overlay-layout-open",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-overlay-body-open.${s(`hs-overlay-layout-open${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-overlay-body-open .${s(`hs-overlay-layout-open${t}${n}`)}`)}]),o("hs-overlay-backdrop-open",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-overlay-backdrop.${s(`hs-overlay-backdrop-open${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.hs-overlay-backdrop .${s(`hs-overlay-backdrop-open${t}${n}`)}`)}]),o("hs-scrollspy-active",({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active.${s(`hs-scrollspy-active${t}${n}`)}`)}),o("hs-carousel-active",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active.${s(`hs-carousel-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active .${s(`hs-carousel-active${t}${n}`)}`)}]),o("hs-carousel-disabled",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.disabled.${s(`hs-carousel${t}disabled${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.disabled .${s(`hs-carousel${t}disabled${t}${n}`)}`)}]),o("hs-selected",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.selected.${s(`hs-selected${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.selected .${s(`hs-selected${t}${n}`)}`)}]),o("hs-select-disabled",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.disabled.${s(`hs-select-disabled${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.disabled .${s(`hs-select-disabled${t}${n}`)}`)}]),o("hs-select-active",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active.${s(`hs-select-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active .${s(`hs-select-active${t}${n}`)}`)}]),o("hs-input-number-disabled",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.disabled.${s(`hs-input-number-disabled${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.disabled .${s(`hs-input-number-disabled${t}${n}`)}`)}]),o("hs-pin-input-active",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active.${s(`hs-pin-input-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active .${s(`hs-pin-input-active${t}${n}`)}`)}]),o("hs-select-opened",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.opened.${s(`hs-select-opened${t}${n}`)}`)}]),o("hs-password-active",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active.${s(`hs-password-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active .${s(`hs-password-active${t}${n}`)}`)}]),o("hs-stepper-active",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active.${s(`hs-stepper-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active .${s(`hs-stepper-active${t}${n}`)}`)}]),o("hs-stepper-success",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.success.${s(`hs-stepper-success${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.success .${s(`hs-stepper-success${t}${n}`)}`)}]),o("hs-stepper-completed",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.completed.${s(`hs-stepper-completed${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.completed .${s(`hs-stepper-completed${t}${n}`)}`)}]),o("hs-stepper-error",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.error.${s(`hs-stepper-error${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.error .${s(`hs-stepper-error${t}${n}`)}`)}]),o("hs-stepper-processed",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.processed.${s(`hs-stepper-processed${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.processed .${s(`hs-stepper-processed${t}${n}`)}`)}]),o("hs-stepper-disabled",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.disabled.${s(`hs-stepper-disabled${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.disabled .${s(`hs-stepper-disabled${t}${n}`)}`)}]),o("hs-stepper-skipped",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.skipped.${s(`hs-stepper-skipped${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.skipped .${s(`hs-stepper-skipped${t}${n}`)}`)}]),o("hs-strong-password",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.passed.${s(`hs-strong-password${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.passed .${s(`hs-strong-password${t}${n}`)}`)}]),o("hs-strong-password-accepted",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.accepted.${s(`hs-strong-password-accepted${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.accepted .${s(`hs-strong-password-accepted${t}${n}`)}`)}]),o("hs-strong-password-active",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active.${s(`hs-strong-password-active${t}${n}`)}`)}]),o("hs-combo-box-active",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active .${s(`hs-combo-box-active${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active.${s(`hs-combo-box-active${t}${n}`)}`)}]),o("hs-combo-box-selected",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.selected .${s(`hs-combo-box-selected${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.selected.${s(`hs-combo-box-selected${t}${n}`)}`)}]),o("hs-combo-box-tab-active",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.active.${s(`hs-combo-box-tab-active${t}${n}`)}`)}]),o("hs-apexcharts-tooltip-dark",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.dark.${s(`hs-apexcharts-tooltip-dark${t}${n}`)}`)}]),o("hs-success",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.success .${s(`hs-success${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.success.${s(`hs-success${t}${n}`)}`)}]),o("hs-error",[({modifySelectors:e,separator:t})=>{e(({className:n})=>`.error .${s(`hs-error${t}${n}`)}`)},({modifySelectors:e,separator:t})=>{e(({className:n})=>`.error.${s(`hs-error${t}${n}`)}`)}]),o("hs-default-mode-active",({modifySelectors:e,separator:t})=>{e(({className:n})=>`.default .${s(`hs-default-mode-active${t}${n}`)}`)}),o("hs-dark-mode-active",({modifySelectors:e,separator:t})=>{e(({className:n})=>`.dark .${s(`hs-dark-mode-active${t}${n}`)}`)}),o("hs-auto-mode-active",({modifySelectors:e,separator:t})=>{e(({className:n})=>`.auto .${s(`hs-auto-mode-active${t}${n}`)}`)})},Ye=({model:o})=>{const[s]=i.useBrandingOptions(),[e]=i.useSelectedBlockIds(),[t]=i.useDarkMode(),[n]=i.useHighlightBlockId(),[d]=i.useSelectedStylingBlocks(),[a]=$.useAtom(i.draggedBlockIdAtom),{document:l,window:u}=H(),[m]=x.useState(l==null?void 0:l.getElementById("highlighted-block")),[f]=x.useState(l==null?void 0:l.getElementById("selected-block")),[p]=x.useState(l==null?void 0:l.getElementById("selected-styling-block")),[g]=x.useState(l==null?void 0:l.getElementById("dragged-block"));x.useEffect(()=>{t?l==null||l.documentElement.classList.add("dark"):l==null||l.documentElement.classList.remove("dark")},[t,l]);const j=c.get(s,"headingFont","DM Sans"),b=c.get(s,"bodyFont","DM Sans");return x.useEffect(()=>{const v=c.get(s,"primaryColor","#000"),h=c.get(s,"secondaryColor","#FFF"),E=c.get(s,"bodyBgLightColor","#fff"),S=c.get(s,"bodyBgDarkColor","#000"),A=c.get(s,"bodyTextDarkColor","#000"),C=c.get(s,"bodyTextLightColor","#fff"),M=me([{color:v,name:"primary"},{color:h,name:"secondary"}]),N={"bg-light":E,"bg-dark":S,"text-dark":A,"text-light":C},y=c.get(s,"roundedCorners","0");!u||!u.tailwind||(u.tailwind.config={darkMode:"class",theme:{extend:{container:{center:!0,padding:"1rem",screens:{"2xl":"1400px"}},fontFamily:{heading:[j],body:[b]},borderRadius:{DEFAULT:`${y||"0"}px`},colors:{...N,...M}}},plugins:[pe,xe,he,u.tailwind.plugin.withOptions(()=>Ke)]})},[s,u,j,b]),x.useEffect(()=>{f&&(f.textContent=`${c.map(e,v=>`[data-block-id="${v}"]`).join(",")}{
+                outline: 1px solid ${e.length===1?"#42a1fc":"orange"} !important; outline-offset: -1px;
+            }`)},[e,f]),x.useEffect(()=>{if(!a){g.textContent="";return}g.textContent=`[data-block-id="${a}"]{ pointer-events: none !important; opacity: 0.2 !important}`},[a]),x.useEffect(()=>{m&&(m.textContent=n?`[data-style-id="${n}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}`:"")},[n,e,m]),x.useEffect(()=>{p&&(p.textContent=`${c.map(d,({id:v})=>`[data-style-id="${v}"]`).join(",")}{
+                outline: 1px solid #42a1fc !important; outline-offset: -1px;
+            }`)},[d,p]),x.useEffect(()=>{const v=c.get(s,"bodyTextLightColor","#64748b"),h=c.get(s,"bodyTextDarkColor","#94a3b8"),E=c.get(s,"bodyBgLightColor","#FFFFFF"),S=c.get(s,"bodyBgDarkColor","#0f172a");l.body.className=`font-body antialiased text-[${v}] bg-[${E}] dark:text-[${h}] dark:bg-[${S}]`},[s,l,o]),o==="page"?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[j&&r.jsxRuntimeExports.jsx("link",{id:"heading-font",rel:"stylesheet",type:"text/css",href:`https://fonts.googleapis.com/css2?family=${j.replace(/ /g,"+")}:wght@300;400;500;600;700;800;900&display=swap`,media:"all"}),b&&j!==b&&r.jsxRuntimeExports.jsx("link",{id:"body-font",rel:"stylesheet",type:"text/css",href:`https://fonts.googleapis.com/css2?family=${b.replace(/ /g,"+")}:wght@300;400;500;600;700;800;900&display=swap`,media:"all"}),j&&r.jsxRuntimeExports.jsx("style",{children:`h1,h2,h3,h4,h5,h6{font-family: "${j}",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},Ge=()=>$.useAtom(i.canvasSettingsAtom),Xe=(o,s)=>{const e=["xs","sm","md","lg","xl","2xl"],t=e.indexOf(s),n=o.split(" ");let d=new Array(e.length).fill(!1);for(const a of n){let[l,u]=a.split(":");u||(u=l,l="xs");const m=e.indexOf(l);if(m<=t){const f=["block","flex","inline","inline-block","inline-flex","grid","table"].includes(u);for(let p=m;p<e.length;p++)d[p]=f}}return d[t]},Ze=o=>{const s={};return Object.keys(o).forEach(e=>{c.isString(o[e])&&o[e].startsWith(L.SLOT_KEY)&&(s[e]=o[e].replace(L.SLOT_KEY,"").split(","))}),s},Qe=c.memoize(o=>{const s=o.replace(L.STYLES_KEY,"").split(",");return ge.twMerge(s[0],s[1])});function Je(o,s){return c.get(o,`${s}_attrs`,{})}function Ve(o,s){const e={};return Object.keys(o).forEach(t=>{if(c.isString(o[t])&&o[t].startsWith(L.STYLES_KEY)){const n=Qe(o[t]),d=Je(o,t);e[t]={className:n,"data-style-prop":t,"data-block-parent":o._id,"data-style-id":`${t}-${o._id}`,...d};const a=c.has(d,"x-show")||c.has(d,"x-if");a&&(e.__isHidden=a&&!Xe(n,s))}}),e}function et(o,s){const e=c.get(o,"_bindings",{});return c.isEmpty(e)?{...o}:(c.each(e,(t,n)=>{c.isString(t)&&c.get(s,t,null)&&(o[n]=c.get(s,t,null))}),o)}function z({blocks:o}){const[s]=i.useBlocksStore(),[e]=$.useAtom(i.xShowBlocksAtom),[t]=$.useAtom(q.draggedBlockAtom),[n]=$.useAtom(q.dropTargetAtom),[,d]=i.useCanvasWidth(),[a]=Ge(),l=x.useCallback(p=>Ve(p,d),[d]),[u]=F.useChaiExternalData(),[m]=$.useAtom(i.inlineEditingActiveAtom),f=x.useCallback(p=>p.reduce((g,j)=>{const b=c.get(a,j,{});return{...g,...b}},{}),[a,s]);return r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:x.Children.toArray(o.map((p,g)=>{if(m===p._id)return null;const j=Ze(p),b={};c.isEmpty(j)||Object.keys(j).forEach(M=>{b[M]=x.Children.toArray(j[M].map(N=>r.jsxRuntimeExports.jsx(z,{blocks:[c.find(s,{_id:N})]})))});const v=c.filter(s,{_parent:p._id});b.children=v.length?r.jsxRuntimeExports.jsx(z,{blocks:v}):null;const h=fe.getBlockComponent(p._type),E=c.get(h,"builderComponent",c.get(h,"component",null));if(c.isNull(E))return r.jsxRuntimeExports.jsx("noscript",{children:`<!-- ${p==null?void 0:p._type} not registered -->`});const S=c.has(h,"getBlockStateFrom")?h==null?void 0:h.getBlockStateFrom(p,s):[],A=f(S),C=l(p);return c.get(C,"__isHidden",!1)&&!X.includes(e,p._id)?null:r.jsxRuntimeExports.jsx(x.Suspense,{children:x.createElement(E,{blockProps:{...X.includes(e,p._id)?{"force-show":""}:{},"data-block-id":p._id,"data-block-type":p._type,...t?{"data-dnd":i.canAcceptChildBlock(p._type,t==null?void 0:t._type)?"yes":"no","data-dnd-dragged":t._id===p._id?"yes":"no"}:{},...n===p._id?{"data-drop":"yes"}:{}},index:g,...et(p,u),...c.omit(C,["__isHidden"]),...b,inBuilder:!0,blockState:A})})}))})}const tt=()=>{const[o]=i.useBlocksStore(),s=c.isEmpty(o)?null:r.jsxRuntimeExports.jsx(F.BlocksExternalDataProvider,{children:r.jsxRuntimeExports.jsx(z,{blocks:c.filter(o,e=>c.isEmpty(e._parent))})});return r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:s})},st=(o,s)=>o.querySelector(`[data-style-id="${s}"]`),nt=()=>{const[o]=$.useAtom(i.networkModeAtom),[s]=i.usePreviewMode(),[e]=i.useCanvasWidth(),[,t]=i.useSelectedBlockIds(),n=i.useSelectedBlock(),[,d]=i.useHighlightBlockId(),a=x.useRef(null),l=x.useRef(null),[u,m]=x.useState({width:0,height:0}),f=Be(u),[p,g]=x.useState(0),[j,b]=x.useState([]),[,v]=x.useState([]),[,h]=$.useAtom(i.canvasIframeAtom),[E,S]=i.useSelectedStylingBlocks(),A=i.useBuilderProp("loading",!1),C=i.useBuilderProp("htmlDir","ltr");x.useEffect(()=>{const{clientWidth:y,clientHeight:I}=l.current;m({width:y,height:I}),p===0&&g(y)},[l,e,p]);const M=(y,I=0)=>{const{top:_}=y.getBoundingClientRect();return _+I>=0&&_-I<=window.innerHeight};x.useEffect(()=>{var y,I;if(n&&n.type!=="Multiple"&&a.current){const _=oe(a.current.contentDocument,n._id);_&&(M(_)||(I=(y=a.current)==null?void 0:y.contentWindow)==null||I.scrollTo({top:_.offsetTop,behavior:"smooth"}),b([_]))}},[n]),x.useEffect(()=>{if(!c.isEmpty(E)&&a.current){const y=st(a.current.contentDocument,c.first(E).id);v(y?[y]:[null])}else v([null])},[E]);const N=x.useMemo(()=>{let y=Se;return y=y.replace("__HTML_DIR__",C),o==="offline"&&(y=y.replace("https://old.chaibuilder.com/offline/tailwind.cdn.js","/offline/tailwind.cdn.js"),y=y.replace("https://unpkg.com/aos@next/dist/aos.css","/offline/aos.css"),y=y.replace("https://unpkg.com/aos@next/dist/aos.js","/offline/aos.js")),y},[o]);return r.jsxRuntimeExports.jsx("div",{onClick:()=>{t([]),S([])},onMouseLeave:()=>setTimeout(()=>d(""),300),className:"relative mx-auto h-full w-full overflow-hidden",style:p>0&&!c.isEmpty(f)?{width:s?"100%":p}:{},ref:l,children:r.jsxRuntimeExports.jsxs(Ce,{contentDidMount:()=>h(a.current),ref:a,id:"canvas-iframe",style:{width:`${e}px`,...f},className:"relative mx-auto box-content h-full max-w-full shadow-lg transition-all duration-300 ease-linear",initialContent:N,children:[r.jsxRuntimeExports.jsx(ze,{}),r.jsxRuntimeExports.jsx(We,{block:n,selectedBlockElement:c.first(j)}),r.jsxRuntimeExports.jsx(Ye,{model:"page"}),r.jsxRuntimeExports.jsx(ve.Provider,{children:r.jsxRuntimeExports.jsx(Oe,{children:A?r.jsxRuntimeExports.jsx("div",{className:"h-full p-4",children:r.jsxRuntimeExports.jsx(i.Skeleton,{className:"h-full"})}):r.jsxRuntimeExports.jsx(tt,{})})}),r.jsxRuntimeExports.jsx("br",{}),r.jsxRuntimeExports.jsx("div",{id:"placeholder",className:"pointer-events-none absolute z-[99999] max-w-full bg-green-500 transition-transform"})]})})},ot=x.lazy(()=>Promise.resolve().then(()=>require("./CodeEditor-vECReGwz.cjs"))),rt=()=>{const[o]=i.useCodeEditor();return r.jsxRuntimeExports.jsxs("div",{className:"flex h-full w-full flex-col",children:[r.jsxRuntimeExports.jsx(we,{}),r.jsxRuntimeExports.jsxs("div",{className:"relative flex h-full flex-col overflow-hidden bg-slate-800/90 bg-[linear-gradient(to_right,#222_0.5px,transparent_0.5px),linear-gradient(to_bottom,#222_0.5px,transparent_0.5px)] bg-[size:12px_12px] px-2",children:[r.jsxRuntimeExports.jsx(x.Suspense,{fallback:r.jsxRuntimeExports.jsx(i.Skeleton,{className:"h-full"}),children:r.jsxRuntimeExports.jsx(F.ErrorBoundary,{children:r.jsxRuntimeExports.jsx(nt,{})})}),o?r.jsxRuntimeExports.jsx(x.Suspense,{fallback:r.jsxRuntimeExports.jsx(i.Skeleton,{className:"h-full"}),children:r.jsxRuntimeExports.jsx(je.Resizable,{enable:{top:!0,bottom:!1},className:"max-h-[400px] min-h-[200px]",children:r.jsxRuntimeExports.jsx(ot,{})})}):null]})]})};exports.default=rt;