@chaibuilder/sdk 0.1.2 → 0.1.4

package/dist/{AddBlocks-e23baf9a.cjs → AddBlocks-1f683caa.cjs}

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-5c3ac4f7.cjs"),n=require("react"),s=require("lodash"),b=require("jotai"),w=require("./accordion-0afd8143.cjs"),q=require("./scroll-area-088530b9.cjs"),k=require("./tabs-860e37aa.cjs"),y=require("./useBuilderProp-5e57d0c8.cjs"),v=require("react-dnd"),C=require("@radix-ui/react-icons"),l=require("./index-73cf645f.cjs");require("react-i18next");const T=require("@chaibuilder/blocks"),I=require("lucide-react"),L=require("./utils-3c452dd0.cjs"),f=require("./textarea-a338ede6.cjs"),P=require("./label-167415e5.cjs"),S=require("./html-to-json-7eba915f.cjs");require("@radix-ui/react-accordion");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-slot");require("class-variance-authority");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-0801d193.cjs");require("redux-undo");require("@react-hookz/web");require("./CONTROLS-031e1de3.cjs");require("clsx");require("tailwind-merge");require("@radix-ui/react-label");require("himalaya");const M=({block:t})=>{const{type:r,icon:o,label:c}=t,{addCoreBlock:x,addPredefinedBlock:m}=l.useAddBlock(),[p]=l.useSelectedBlockIds(),[,u]=b.useAtom(l.activePanelAtom),[,i]=b.useAtom(l.addBlocksModalAtom),E=()=>{s.has(t,"blocks")?m(T.syncBlocksWithDefaults(t.blocks),s.first(p)):x(t,s.first(p)),i(!1),u("layers")},[,g,j]=v.useDrag(()=>({type:"CHAI_BLOCK",item:t}));return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(v.DragPreviewImage,{connect:j,src:"https://placehold.co/100x30/000000/FFF?text="+(c||r).replace(/ /g,"+")}),e.jsxRuntimeExports.jsxs(y.Tooltip,{children:[e.jsxRuntimeExports.jsx(y.TooltipTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{onClick:E,type:"button",ref:g,className:"cursor-grab space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50",children:[n.createElement(o||C.BoxIcon,{className:"w-4 h-4 mx-auto"}),e.jsxRuntimeExports.jsx("p",{className:"truncate text-xs",children:c||r})]})}),e.jsxRuntimeExports.jsx(y.TooltipContent,{children:e.jsxRuntimeExports.jsx("p",{children:c||r})})]})]})},F=({block:t,closePopover:r})=>{var j;const[o,c]=n.useState(!1),x=y.useBuilderProp("getExternalPredefinedBlock"),{addCoreBlock:m,addPredefinedBlock:p}=l.useAddBlock(),[u]=l.useSelectedBlockIds(),[,i,E]=v.useDrag(()=>({type:"CHAI_BLOCK",item:t}),[t]),g=n.useCallback(async R=>{if(R.stopPropagation(),s.has(t,"component")){m(t,s.first(u)),r();return}c(!0);const a=await x(t);s.isEmpty(a)||p(T.syncBlocksWithDefaults(a),s.first(u)),r()},[t]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(v.DragPreviewImage,{connect:E,src:"https://placehold.co/100x30/000000/FFF?text="+((j=t.name||t.label)==null?void 0:j.replace(" ","+"))}),e.jsxRuntimeExports.jsxs("div",{ref:i,onClick:o?()=>{}:g,className:"relative cursor-grab overflow-hidden rounded-md border border-transparent duration-200 hover:scale-x-105 hover:border-foreground/20 hover:shadow-2xl",children:[o&&e.jsxRuntimeExports.jsxs("div",{className:"absolute flex h-full w-full items-center justify-center bg-black bg-opacity-70",children:[e.jsxRuntimeExports.jsx(I.Loader,{className:"animate-spin",size:15,color:"white"})," ",e.jsxRuntimeExports.jsx("span",{className:"pl-2 text-sm text-white",children:"Adding..."})]}),t.preview?e.jsxRuntimeExports.jsx("img",{src:t.preview,className:"min-h-[50px] w-full rounded-md border border-gray-300",alt:t.name}):e.jsxRuntimeExports.jsx("div",{className:"flex h-20 items-center justify-center rounded-md border border-border border-gray-300 bg-gray-200",children:e.jsxRuntimeExports.jsx("p",{className:"max-w-xs text-center text-sm text-gray-700",children:t.name})})]})]})},H=()=>{const{data:t,isLoading:r}=l.useUILibraryBlocks(),o=T.useChaiBlocks(),c=s.filter(s.values(o),{category:"custom"}),x=s.groupBy(c,"group"),m=s.groupBy(t,"group"),[p,u]=n.useState(null),i=n.useMemo(()=>s.mergeWith(x,m,(a,h)=>{if(s.isArray(a)&&s.isArray(h))return[...a,...h]}),[x,m]),[,E]=b.useAtom(l.addBlocksModalAtom),[g,j]=n.useState("Navbar"),R=s.get(i,g,[]);return e.jsxRuntimeExports.jsxs("div",{className:"relative flex h-full max-h-full overflow-hidden py-2",children:[e.jsxRuntimeExports.jsx("ul",{className:"sticky top-0 h-full w-48 space-y-1 overflow-y-auto border-r px-2",children:r?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("li",{className:"h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"})]}):n.Children.toArray(s.map(i,(a,h)=>e.jsxRuntimeExports.jsx("li",{onMouseOut:()=>{clearTimeout(p),u(null)},onMouseEnter:()=>{const B=setTimeout(()=>{j(h)},300);u(B)},onClick:()=>j(h),className:L.cn("-mx-2 cursor-default rounded-md rounded-r-none px-2 py-1 text-sm font-medium capitalize",g===h?"bg-blue-500 text-white":" text-gray-700 hover:bg-foreground/10"),children:h})))}),e.jsxRuntimeExports.jsx("div",{className:"h-full w-full space-y-2 overflow-y-auto px-8",children:n.Children.toArray(R.map(a=>e.jsxRuntimeExports.jsx(F,{block:a,closePopover:()=>E(!1)})))})]})},D=()=>{const[t,r]=n.useState(""),{addPredefinedBlock:o}=l.useAddBlock(),[c]=l.useSelectedBlockIds(),[,x]=b.useAtom(l.addBlockOffCanvasAtom),[,m]=b.useAtom(l.activePanelAtom),[,p]=b.useAtom(l.addBlocksModalAtom),u=()=>{const i=S.getBlocksFromHTML(t);o([...i],s.first(c)||null),r(""),x(!1),m("layers"),p(!1)};return e.jsxRuntimeExports.jsxs(f.Card,{className:"border-border/0 p-0 shadow-none",children:[e.jsxRuntimeExports.jsxs(f.CardHeader,{className:"p-3",children:[e.jsxRuntimeExports.jsx(f.CardTitle,{children:"Import HTML"}),e.jsxRuntimeExports.jsx(f.CardDescription,{children:"Use HTML snippets from component libraries like Tailwind UI, Flowbite, Preline, Kitwind, Tailblocks etc. or just copy paste your own HTML code. Only Tailwind CSS markup is supported."})]}),e.jsxRuntimeExports.jsx(f.CardContent,{className:"space-y-2 px-3 py-0",children:e.jsxRuntimeExports.jsxs("div",{className:"space-y-1",children:[e.jsxRuntimeExports.jsx(P.Label,{htmlFor:"current",className:"text-sm",children:"Enter HTML Code:"}),e.jsxRuntimeExports.jsx(f.Textarea,{autoFocus:!0,tabIndex:1,ref:i=>i&&i.focus(),defaultValue:t,onChange:i=>r(i.target.value),rows:12,placeholder:`<div>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-5c3ac4f7.cjs"),n=require("react"),s=require("lodash"),b=require("jotai"),w=require("./accordion-0afd8143.cjs"),q=require("./scroll-area-088530b9.cjs"),k=require("./tabs-860e37aa.cjs"),y=require("./useBuilderProp-5e57d0c8.cjs"),v=require("react-dnd"),C=require("@radix-ui/react-icons"),l=require("./index-133d90a5.cjs");require("react-i18next");const T=require("@chaibuilder/blocks"),I=require("lucide-react"),L=require("./utils-3c452dd0.cjs"),f=require("./textarea-a338ede6.cjs"),P=require("./label-167415e5.cjs"),S=require("./html-to-json-9c9961da.cjs");require("@radix-ui/react-accordion");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-slot");require("class-variance-authority");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("@react-hookz/web");require("./CONTROLS-031e1de3.cjs");require("clsx");require("tailwind-merge");require("@radix-ui/react-label");require("himalaya");const M=({block:t})=>{const{type:r,icon:o,label:c}=t,{addCoreBlock:x,addPredefinedBlock:m}=l.useAddBlock(),[p]=l.useSelectedBlockIds(),[,u]=b.useAtom(l.activePanelAtom),[,i]=b.useAtom(l.addBlocksModalAtom),E=()=>{s.has(t,"blocks")?m(T.syncBlocksWithDefaults(t.blocks),s.first(p)):x(t,s.first(p)),i(!1),u("layers")},[,g,j]=v.useDrag(()=>({type:"CHAI_BLOCK",item:t}));return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(v.DragPreviewImage,{connect:j,src:"https://placehold.co/100x30/000000/FFF?text="+(c||r).replace(/ /g,"+")}),e.jsxRuntimeExports.jsxs(y.Tooltip,{children:[e.jsxRuntimeExports.jsx(y.TooltipTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{onClick:E,type:"button",ref:g,className:"cursor-grab space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50",children:[n.createElement(o||C.BoxIcon,{className:"w-4 h-4 mx-auto"}),e.jsxRuntimeExports.jsx("p",{className:"truncate text-xs",children:c||r})]})}),e.jsxRuntimeExports.jsx(y.TooltipContent,{children:e.jsxRuntimeExports.jsx("p",{children:c||r})})]})]})},F=({block:t,closePopover:r})=>{var j;const[o,c]=n.useState(!1),x=y.useBuilderProp("getExternalPredefinedBlock"),{addCoreBlock:m,addPredefinedBlock:p}=l.useAddBlock(),[u]=l.useSelectedBlockIds(),[,i,E]=v.useDrag(()=>({type:"CHAI_BLOCK",item:t}),[t]),g=n.useCallback(async R=>{if(R.stopPropagation(),s.has(t,"component")){m(t,s.first(u)),r();return}c(!0);const a=await x(t);s.isEmpty(a)||p(T.syncBlocksWithDefaults(a),s.first(u)),r()},[t]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(v.DragPreviewImage,{connect:E,src:"https://placehold.co/100x30/000000/FFF?text="+((j=t.name||t.label)==null?void 0:j.replace(" ","+"))}),e.jsxRuntimeExports.jsxs("div",{ref:i,onClick:o?()=>{}:g,className:"relative cursor-grab overflow-hidden rounded-md border border-transparent duration-200 hover:scale-x-105 hover:border-foreground/20 hover:shadow-2xl",children:[o&&e.jsxRuntimeExports.jsxs("div",{className:"absolute flex h-full w-full items-center justify-center bg-black bg-opacity-70",children:[e.jsxRuntimeExports.jsx(I.Loader,{className:"animate-spin",size:15,color:"white"})," ",e.jsxRuntimeExports.jsx("span",{className:"pl-2 text-sm text-white",children:"Adding..."})]}),t.preview?e.jsxRuntimeExports.jsx("img",{src:t.preview,className:"min-h-[50px] w-full rounded-md border border-gray-300",alt:t.name}):e.jsxRuntimeExports.jsx("div",{className:"flex h-20 items-center justify-center rounded-md border border-border border-gray-300 bg-gray-200",children:e.jsxRuntimeExports.jsx("p",{className:"max-w-xs text-center text-sm text-gray-700",children:t.name})})]})]})},H=()=>{const{data:t,isLoading:r}=l.useUILibraryBlocks(),o=T.useChaiBlocks(),c=s.filter(s.values(o),{category:"custom"}),x=s.groupBy(c,"group"),m=s.groupBy(t,"group"),[p,u]=n.useState(null),i=n.useMemo(()=>s.mergeWith(x,m,(a,h)=>{if(s.isArray(a)&&s.isArray(h))return[...a,...h]}),[x,m]),[,E]=b.useAtom(l.addBlocksModalAtom),[g,j]=n.useState("Navbar"),R=s.get(i,g,[]);return e.jsxRuntimeExports.jsxs("div",{className:"relative flex h-full max-h-full overflow-hidden py-2",children:[e.jsxRuntimeExports.jsx("ul",{className:"sticky top-0 h-full w-48 space-y-1 overflow-y-auto border-r px-2",children:r?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("li",{className:"h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"})]}):n.Children.toArray(s.map(i,(a,h)=>e.jsxRuntimeExports.jsx("li",{onMouseOut:()=>{clearTimeout(p),u(null)},onMouseEnter:()=>{const B=setTimeout(()=>{j(h)},300);u(B)},onClick:()=>j(h),className:L.cn("-mx-2 cursor-default rounded-md rounded-r-none px-2 py-1 text-sm font-medium capitalize",g===h?"bg-blue-500 text-white":" text-gray-700 hover:bg-foreground/10"),children:h})))}),e.jsxRuntimeExports.jsx("div",{className:"h-full w-full space-y-2 overflow-y-auto px-8",children:n.Children.toArray(R.map(a=>e.jsxRuntimeExports.jsx(F,{block:a,closePopover:()=>E(!1)})))})]})},D=()=>{const[t,r]=n.useState(""),{addPredefinedBlock:o}=l.useAddBlock(),[c]=l.useSelectedBlockIds(),[,x]=b.useAtom(l.addBlockOffCanvasAtom),[,m]=b.useAtom(l.activePanelAtom),[,p]=b.useAtom(l.addBlocksModalAtom),u=()=>{const i=S.getBlocksFromHTML(t);o([...i],s.first(c)||null),r(""),x(!1),m("layers"),p(!1)};return e.jsxRuntimeExports.jsxs(f.Card,{className:"border-border/0 p-0 shadow-none",children:[e.jsxRuntimeExports.jsxs(f.CardHeader,{className:"p-3",children:[e.jsxRuntimeExports.jsx(f.CardTitle,{children:"Import HTML"}),e.jsxRuntimeExports.jsx(f.CardDescription,{children:"Use HTML snippets from component libraries like Tailwind UI, Flowbite, Preline, Kitwind, Tailblocks etc. or just copy paste your own HTML code. Only Tailwind CSS markup is supported."})]}),e.jsxRuntimeExports.jsx(f.CardContent,{className:"space-y-2 px-3 py-0",children:e.jsxRuntimeExports.jsxs("div",{className:"space-y-1",children:[e.jsxRuntimeExports.jsx(P.Label,{htmlFor:"current",className:"text-sm",children:"Enter HTML Code:"}),e.jsxRuntimeExports.jsx(f.Textarea,{autoFocus:!0,tabIndex:1,ref:i=>i&&i.focus(),defaultValue:t,onChange:i=>r(i.target.value),rows:12,placeholder:`<div>
     <h1>Enter code here</h1>
 </div>`,className:"resize-none overflow-x-auto whitespace-pre font-mono font-normal"})]})}),e.jsxRuntimeExports.jsxs(f.CardFooter,{className:"flex flex-col justify-end p-3",children:[e.jsxRuntimeExports.jsx(y.Button,{disabled:t.trim()==="",onClick:()=>u(),size:"sm",className:"w-full",children:"Import"}),e.jsxRuntimeExports.jsxs(f.Alert,{variant:"default",className:"mt-2 p-1 text-blue-400",children:[e.jsxRuntimeExports.jsx(C.ExclamationTriangleIcon,{className:"h-4 w-4"}),e.jsxRuntimeExports.jsx(f.AlertTitle,{className:"text-sm leading-4",children:"Imported html will be added to the currently selected block. If no block is selected, the html will be added to the page."})]})]})]})},O=D,N=["ListItem","TableHead","TableBody","TableRow","TableCell","Column"],U=(t,r)=>{if(!t)return!s.includes(N,r);const o=t._type;return o==="List"?r==="ListItem":o==="Table"?r==="TableHead"||r==="TableBody":o==="TableHead"||o==="TableBody"?r==="TableRow":o==="TableRow"?r==="TableCell":o==="Row"?r==="Column":!s.includes(N,r)},z=()=>{const[t,r]=n.useState("core"),[o,c]=n.useState("basic"),x=T.useChaiBlocks(),[,m]=b.useAtom(l.showPredefinedBlockCategoryAtom),[,p]=b.useAtom(l.addBlocksModalAtom),[u]=l.useSelectedBlockIds(),i=l.useAllBlocks(),E=s.find(i,{_id:s.first(u)}),{data:g,isLoading:j}=l.useUILibraryBlocks(),R=s.groupBy(s.filter(x,d=>U(E,d.type)),"category"),a=s.uniq(s.map(R.core,"group"));n.useEffect(()=>{!s.includes(a,o)&&!s.isEmpty(a)&&!s.isEmpty(o)&&c(s.first(a))},[a,o]);const h=d=>c(A=>A===d?"":d),B=!j&&!s.isEmpty(g);return e.jsxRuntimeExports.jsxs("div",{className:"flex h-full flex-col overflow-hidden",children:[e.jsxRuntimeExports.jsxs("div",{className:"mb-2 flex justify-between rounded-md bg-background/30 p-1",children:[e.jsxRuntimeExports.jsxs("h1",{className:"flex flex-col items-baseline px-1 text-2xl font-semibold xl:flex-row",children:["Add block",e.jsxRuntimeExports.jsx("span",{className:"p-0 text-xs font-light leading-3 opacity-80 xl:pl-1",children:t==="html"?"(Enter or paste your own HTML code)":"(Drag & drop into tree view or click to add)"})]}),e.jsxRuntimeExports.jsxs("button",{onClick:()=>p(!1),className:"flex h-max items-center gap-x-1 rounded-full border p-px text-xs text-gray-800 hover:bg-gray-100 md:p-2",children:[e.jsxRuntimeExports.jsx(C.Cross1Icon,{width:12})," Close"]})]}),e.jsxRuntimeExports.jsx(k.Tabs,{onValueChange:d=>{m(""),r(d)},value:t,className:"h-max",children:e.jsxRuntimeExports.jsxs(k.TabsList,{className:"grid w-full "+(B?"grid-cols-3":"grid-cols-2"),children:[e.jsxRuntimeExports.jsx(k.TabsTrigger,{value:"core",children:"Core"}),B?e.jsxRuntimeExports.jsx(k.TabsTrigger,{value:"ui-blocks",children:"UI Blocks"}):null,e.jsxRuntimeExports.jsx(k.TabsTrigger,{value:"html",children:"Import"})]})}),t==="core"&&e.jsxRuntimeExports.jsx(q.ScrollArea,{className:"-mx-1.5 h-full",children:e.jsxRuntimeExports.jsx(w.Accordion,{type:"single",value:o,className:"w-full px-3",children:n.Children.toArray(s.map(a,d=>s.reject(s.filter(s.values(R.core),{group:d}),{hidden:!0}).length?e.jsxRuntimeExports.jsxs(w.AccordionItem,{value:d,className:"border-border",children:[e.jsxRuntimeExports.jsx(w.AccordionTrigger,{onClick:()=>h(d),className:"py-2 capitalize",children:d}),e.jsxRuntimeExports.jsx(w.AccordionContent,{children:e.jsxRuntimeExports.jsx("div",{className:"grid grid-cols-4 gap-2",children:n.Children.toArray(s.reject(s.filter(s.values(R.core),{group:d}),{hidden:!0}).map(A=>e.jsxRuntimeExports.jsx(M,{block:A})))})})]}):null))})}),t==="ui-blocks"&&e.jsxRuntimeExports.jsx(n.Suspense,{fallback:e.jsxRuntimeExports.jsx(y.Skeleton,{className:"h-32 w-full"}),children:e.jsxRuntimeExports.jsx(H,{})}),t==="html"&&e.jsxRuntimeExports.jsx(O,{})]})};exports.default=z;

package/dist/{AddBlocks-b5f37f2f.js → AddBlocks-b6a12d50.js}

@@ -1,21 +1,21 @@
 import { j as e } from "./jsx-runtime-944c88e2.js";
-import B, { createElement as U, useState as j, useMemo as K, useCallback as q, useEffect as V, Suspense as W } from "react";
-import { has as S, first as b, filter as w, values as A, groupBy as I, mergeWith as $, isArray as H, get as J, map as L, isEmpty as k, find as Q, uniq as X, includes as P, reject as M } from "lodash";
+import B, { createElement as G, useState as j, useMemo as K, useCallback as V, useEffect as q, Suspense as W } from "react";
+import { has as S, first as b, filter as w, values as A, groupBy as I, mergeWith as Q, isArray as H, get as $, map as L, isEmpty as k, find as J, uniq as X, includes as P, reject as M } from "lodash";
 import { useAtom as h } from "jotai";
 import { A as Y, a as Z, b as ee, c as se } from "./accordion-c0176dc5.js";
 import { S as re } from "./scroll-area-9f64a082.js";
 import { T as oe, a as te, b as N } from "./tabs-85caa1e8.js";
 import { d as le, e as ae, f as ce, u as ne, B as ie, S as de } from "./useBuilderProp-81a14920.js";
-import { useDrag as R, DragPreviewImage as O } from "react-dnd";
+import { useDrag as R, DragPreviewImage as _ } from "react-dnd";
 import { BoxIcon as me, ExclamationTriangleIcon as ue, Cross1Icon as pe } from "@radix-ui/react-icons";
-import { O as F, h as T, a as _, b as C, R as z, S as xe, T as he, y as fe } from "./index-7e212fbc.js";
+import { Q as F, h as T, a as O, b as C, T as U, U as xe, V as he, y as fe } from "./index-3f65447f.js";
 import "react-i18next";
-import { syncBlocksWithDefaults as D, useChaiBlocks as G } from "@chaibuilder/blocks";
+import { syncBlocksWithDefaults as z, useChaiBlocks as D } from "@chaibuilder/blocks";
 import { Loader as ge } from "lucide-react";
 import { c as be } from "./utils-ac68b2c8.js";
 import { C as je, c as ye, e as we, f as ke, g as Be, T as Te, d as Ce, A as ve, a as Ne } from "./textarea-0750bcd2.js";
 import { L as Ae } from "./label-e770a087.js";
-import { g as Ie } from "./html-to-json-7510f587.js";
+import { g as Ie } from "./html-to-json-9304dbda.js";
 import "@radix-ui/react-accordion";
 import "@radix-ui/react-scroll-area";
 import "@radix-ui/react-tabs";
@@ -28,7 +28,7 @@ import "flagged";
 import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
 import "flat-to-nested";
-import "./Class-e6b07b79.js";
+import "./Class-e34b2337.js";
 import "redux-undo";
 import "@react-hookz/web";
 import "./CONTROLS-442caee5.js";
@@ -37,15 +37,15 @@ import "tailwind-merge";
 import "@radix-ui/react-label";
 import "himalaya";
 const Le = ({ block: s }) => {
-  const { type: r, icon: o, label: a } = s, { addCoreBlock: i, addPredefinedBlock: d } = F(), [m] = T(), [, n] = h(_), [, t] = h(C), f = () => {
-    S(s, "blocks") ? d(D(s.blocks), b(m)) : i(s, b(m)), t(!1), n("layers");
+  const { type: r, icon: o, label: a } = s, { addCoreBlock: i, addPredefinedBlock: d } = F(), [m] = T(), [, n] = h(O), [, t] = h(C), f = () => {
+    S(s, "blocks") ? d(z(s.blocks), b(m)) : i(s, b(m)), t(!1), n("layers");
   }, [, x, u] = R(() => ({
     type: "CHAI_BLOCK",
     item: s
   }));
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
-      O,
+      _,
       {
         connect: u,
         src: "https://placehold.co/100x30/000000/FFF?text=" + (a || r).replace(/ /g, "+")
@@ -60,7 +60,7 @@ const Le = ({ block: s }) => {
           ref: x,
           className: "cursor-grab space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50",
           children: [
-            U(o || me, { className: "w-4 h-4 mx-auto" }),
+            G(o || me, { className: "w-4 h-4 mx-auto" }),
             /* @__PURE__ */ e.jsx("p", { className: "truncate text-xs", children: a || r })
           ]
         }
@@ -76,7 +76,7 @@ const Le = ({ block: s }) => {
       item: s
     }),
     [s]
-  ), x = q(
+  ), x = V(
     async (g) => {
       if (g.stopPropagation(), S(s, "component")) {
         d(s, b(n)), r();
@@ -84,13 +84,13 @@ const Le = ({ block: s }) => {
       }
       a(!0);
       const l = await i(s);
-      k(l) || m(D(l), b(n)), r();
+      k(l) || m(z(l), b(n)), r();
     },
     [s]
   );
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
-      O,
+      _,
       {
         connect: f,
         src: "https://placehold.co/100x30/000000/FFF?text=" + ((u = s.name || s.label) == null ? void 0 : u.replace(" ", "+"))
@@ -115,10 +115,10 @@ const Le = ({ block: s }) => {
     )
   ] });
 }, Fe = () => {
-  const { data: s, isLoading: r } = z(), o = G(), a = w(A(o), { category: "custom" }), i = I(a, "group"), d = I(s, "group"), [m, n] = j(null), t = K(() => $(i, d, (l, p) => {
+  const { data: s, isLoading: r } = U(), o = D(), a = w(A(o), { category: "custom" }), i = I(a, "group"), d = I(s, "group"), [m, n] = j(null), t = K(() => Q(i, d, (l, p) => {
     if (H(l) && H(p))
       return [...l, ...p];
-  }), [i, d]), [, f] = h(C), [x, u] = j("Navbar"), g = J(t, x, []);
+  }), [i, d]), [, f] = h(C), [x, u] = j("Navbar"), g = $(t, x, []);
   return /* @__PURE__ */ e.jsxs("div", { className: "relative flex h-full max-h-full overflow-hidden py-2", children: [
     /* @__PURE__ */ e.jsx("ul", { className: "sticky top-0 h-full w-48 space-y-1 overflow-y-auto border-r px-2", children: r ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx("li", { className: "h-8 w-full animate-pulse bg-gray-200" }),
@@ -154,7 +154,7 @@ const Le = ({ block: s }) => {
     ) })
   ] });
 }, He = () => {
-  const [s, r] = j(""), { addPredefinedBlock: o } = F(), [a] = T(), [, i] = h(xe), [, d] = h(_), [, m] = h(C), n = () => {
+  const [s, r] = j(""), { addPredefinedBlock: o } = F(), [a] = T(), [, i] = h(xe), [, d] = h(O), [, m] = h(C), n = () => {
     const t = Ie(s);
     o([...t], b(a) || null), r(""), i(!1), d("layers"), m(!1);
   };
@@ -195,11 +195,11 @@ const Le = ({ block: s }) => {
   const o = s._type;
   return o === "List" ? r === "ListItem" : o === "Table" ? r === "TableHead" || r === "TableBody" : o === "TableHead" || o === "TableBody" ? r === "TableRow" : o === "TableRow" ? r === "TableCell" : o === "Row" ? r === "Column" : !P(E, r);
 }, ys = () => {
-  const [s, r] = j("core"), [o, a] = j("basic"), i = G(), [, d] = h(he), [, m] = h(C), [n] = T(), t = fe(), f = Q(t, { _id: b(n) }), { data: x, isLoading: u } = z(), g = I(
+  const [s, r] = j("core"), [o, a] = j("basic"), i = D(), [, d] = h(he), [, m] = h(C), [n] = T(), t = fe(), f = J(t, { _id: b(n) }), { data: x, isLoading: u } = U(), g = I(
     w(i, (c) => Ee(f, c.type)),
     "category"
   ), l = X(L(g.core, "group"));
-  V(() => {
+  q(() => {
     !P(l, o) && !k(l) && !k(o) && a(b(l));
   }, [l, o]);
   const p = (c) => a((v) => v === c ? "" : c), y = !u && !k(x);

package/dist/{BrandingOptions-3d1bd24a.cjs → BrandingOptions-02e4ebcf.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./jsx-runtime-5c3ac4f7.cjs"),C=require("react"),q=require("@rjsf/validator-ajv8"),B=require("@rjsf/core"),_=require("./index-73cf645f.cjs");require("react-i18next");const j=require("./useBuilderProp-5e57d0c8.cjs"),e=require("@chaibuilder/blocks");require("i18next");require("flagged");require("react-dnd");require("lodash");require("@minoru/react-dnd-treeview");require("jotai");require("./utils-3c452dd0.cjs");require("clsx");require("tailwind-merge");require("react-hotkeys-hook");require("flat-to-nested");require("./Class-0801d193.cjs");require("redux-undo");require("@react-hookz/web");require("./CONTROLS-031e1de3.cjs");require("@radix-ui/react-slot");require("class-variance-authority");require("@radix-ui/react-tooltip");require("@radix-ui/react-icons");require("@radix-ui/react-toast");function R(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(a,i,r.get?r:{enumerable:!0,get:()=>t[i]})}}return a.default=t,Object.freeze(a)}const c=R(C),v=[{title:"Roboto",value:"Roboto"},{title:"Open Sans",value:"Open Sans"},{title:"Montserrat",value:"Montserrat"},{title:"Lato",value:"Lato"},{title:"Poppins",value:"Poppins"},{title:"Oswald",value:"Oswald"},{title:"Raleway",value:"Raleway"},{title:"Ubuntu",value:"Ubuntu"},{title:"Nunito",value:"Nunito"},{title:"Merriweather",value:"Merriweather"},{title:"Nunito Sans",value:"Nunito Sans"},{title:"Playfair Display",value:"Playfair Display"},{title:"Rubik",value:"Rubik"},{title:"Inter",value:"Inter"},{title:"Lora",value:"Lora"},{title:"Kanit",value:"Kanit"},{title:"Fira Sans",value:"Fira Sans"},{title:"Hind",value:"Hind"},{title:"Quicksand",value:"Quicksand"},{title:"Mulish",value:"Mulish"},{title:"Barlow",value:"Barlow"},{title:"Inconsolata",value:"Inconsolata"},{title:"Titillium Web",value:"Titillium Web"},{title:"Heebo",value:"Heebo"},{title:"IBM Plex Sans",value:"IBM Plex Sans"},{title:"DM Sans",value:"DM Sans"},{title:"Nanum Gothic",value:"Nanum Gothic"},{title:"Karla",value:"Karla"},{title:"Arimo",value:"Arimo"},{title:"Cabin",value:"Cabin"},{title:"Oxygen",value:"Oxygen"},{title:"Overpass",value:"Overpass"},{title:"Assistant",value:"Assistant"},{title:"Tajawal",value:"Tajawal"},{title:"Play",value:"Play"},{title:"Exo",value:"Exo"},{title:"Cinzel",value:"Cinzel"},{title:"Faustina",value:"Faustina"},{title:"Philosopher",value:"Philosopher"},{title:"Gelasio",value:"Gelasio"},{title:"Sofia Sans Condensed",value:"Sofia Sans Condensed"},{title:"Noto Sans Devanagari",value:"Noto Sans Devanagari"},{title:"Actor",value:"Actor"},{title:"Epilogue",value:"Epilogue"},{title:"Glegoo",value:"Glegoo"},{title:"Overlock",value:"Overlock"},{title:"Lustria",value:"Lustria"},{title:"Ovo",value:"Ovo"},{title:"Suranna",value:"Suranna"}],P=()=>{const t=j.useBuilderProp("onSaveBrandingOptions",async()=>{}),[a,i]=_.useBrandingOptions(),r=c.useRef(a);c.useEffect(()=>()=>t(r.current),[r]);const p=({formData:l},u)=>{u&&(i(l),r.current=l)},{_bodyFont:g,_headingFont:b,_primaryColor:f,_bodyTextDarkColor:m,_bodyTextLightColor:y,_bodyBgDarkColor:x,_secondaryColor:S,_bodyBgLightColor:h,_roundedCorners:O}=a,s={_headingFont:e.SelectOption({title:"Heading font",default:b,options:v}),_bodyFont:e.SelectOption({title:"Body font",default:g,options:v}),_roundedCorners:e.Numeric({title:"Rounded Corner",default:parseInt(O||5,10)}),_primaryColor:e.Color({title:"Primary",default:f}),_secondaryColor:e.Color({title:"Secondary",default:S}),_bodyBgLightColor:e.Color({title:"Body Background (Light)",default:h}),_bodyBgDarkColor:e.Color({title:"Body Background (Dark)",default:x}),_bodyTextLightColor:e.Color({title:"Body Text (Light)",default:m}),_bodyTextDarkColor:e.Color({title:"Body Text (Dark)",default:y})},n={type:"object",properties:{}},d={};return Object.keys(s).forEach(l=>{const u=s[l];return n.properties||(n.properties={}),n.properties[l]=u.schema,d[l]=u.uiSchema,!0}),o.jsxRuntimeExports.jsxs("div",{className:"flex h-full select-none flex-col",children:[o.jsxRuntimeExports.jsx("div",{className:"rounded-md bg-background/30 p-1",children:o.jsxRuntimeExports.jsx("h1",{className:"px-1 font-semibold",children:"Branding Options"})}),o.jsxRuntimeExports.jsx("div",{className:"-mx-2",children:o.jsxRuntimeExports.jsx(B,{idSeparator:".",autoComplete:"off",omitExtraData:!0,liveOmit:!0,liveValidate:!0,uiSchema:d,schema:n,formData:a,validator:q,onChange:p})})]})};exports.default=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./jsx-runtime-5c3ac4f7.cjs"),C=require("react"),q=require("@rjsf/validator-ajv8"),B=require("@rjsf/core"),j=require("./index-133d90a5.cjs");require("react-i18next");const R=require("./useBuilderProp-5e57d0c8.cjs"),e=require("@chaibuilder/blocks");require("i18next");require("flagged");require("react-dnd");require("lodash");require("@minoru/react-dnd-treeview");require("jotai");require("./utils-3c452dd0.cjs");require("clsx");require("tailwind-merge");require("react-hotkeys-hook");require("flat-to-nested");require("./Class-7d6aadbc.cjs");require("redux-undo");require("@react-hookz/web");require("@radix-ui/react-icons");require("./CONTROLS-031e1de3.cjs");require("@radix-ui/react-slot");require("class-variance-authority");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");function P(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(a,i,r.get?r:{enumerable:!0,get:()=>t[i]})}}return a.default=t,Object.freeze(a)}const c=P(C),v=[{title:"Roboto",value:"Roboto"},{title:"Open Sans",value:"Open Sans"},{title:"Montserrat",value:"Montserrat"},{title:"Lato",value:"Lato"},{title:"Poppins",value:"Poppins"},{title:"Oswald",value:"Oswald"},{title:"Raleway",value:"Raleway"},{title:"Ubuntu",value:"Ubuntu"},{title:"Nunito",value:"Nunito"},{title:"Merriweather",value:"Merriweather"},{title:"Nunito Sans",value:"Nunito Sans"},{title:"Playfair Display",value:"Playfair Display"},{title:"Rubik",value:"Rubik"},{title:"Inter",value:"Inter"},{title:"Lora",value:"Lora"},{title:"Kanit",value:"Kanit"},{title:"Fira Sans",value:"Fira Sans"},{title:"Hind",value:"Hind"},{title:"Quicksand",value:"Quicksand"},{title:"Mulish",value:"Mulish"},{title:"Barlow",value:"Barlow"},{title:"Inconsolata",value:"Inconsolata"},{title:"Titillium Web",value:"Titillium Web"},{title:"Heebo",value:"Heebo"},{title:"IBM Plex Sans",value:"IBM Plex Sans"},{title:"DM Sans",value:"DM Sans"},{title:"Nanum Gothic",value:"Nanum Gothic"},{title:"Karla",value:"Karla"},{title:"Arimo",value:"Arimo"},{title:"Cabin",value:"Cabin"},{title:"Oxygen",value:"Oxygen"},{title:"Overpass",value:"Overpass"},{title:"Assistant",value:"Assistant"},{title:"Tajawal",value:"Tajawal"},{title:"Play",value:"Play"},{title:"Exo",value:"Exo"},{title:"Cinzel",value:"Cinzel"},{title:"Faustina",value:"Faustina"},{title:"Philosopher",value:"Philosopher"},{title:"Gelasio",value:"Gelasio"},{title:"Sofia Sans Condensed",value:"Sofia Sans Condensed"},{title:"Noto Sans Devanagari",value:"Noto Sans Devanagari"},{title:"Actor",value:"Actor"},{title:"Epilogue",value:"Epilogue"},{title:"Glegoo",value:"Glegoo"},{title:"Overlock",value:"Overlock"},{title:"Lustria",value:"Lustria"},{title:"Ovo",value:"Ovo"},{title:"Suranna",value:"Suranna"}],k=()=>{const t=R.useBuilderProp("onSaveBrandingOptions",async()=>{}),[a,i]=j.useBrandingOptions(),r=c.useRef(a);c.useEffect(()=>()=>t(r.current),[r]);const p=({formData:l},u)=>{u&&(i(l),r.current=l)},{bodyFont:g,headingFont:b,primaryColor:f,bodyTextDarkColor:m,bodyTextLightColor:y,bodyBgDarkColor:x,secondaryColor:S,bodyBgLightColor:h,roundedCorners:O}=a,s={headingFont:e.SelectOption({title:"Heading font",default:b,options:v}),bodyFont:e.SelectOption({title:"Body font",default:g,options:v}),roundedCorners:e.Numeric({title:"Rounded Corner",default:parseInt(O||5,10)}),primaryColor:e.Color({title:"Primary",default:f}),secondaryColor:e.Color({title:"Secondary",default:S}),bodyBgLightColor:e.Color({title:"Body Background (Light)",default:h}),bodyBgDarkColor:e.Color({title:"Body Background (Dark)",default:x}),bodyTextLightColor:e.Color({title:"Body Text (Light)",default:m}),bodyTextDarkColor:e.Color({title:"Body Text (Dark)",default:y})},n={type:"object",properties:{}},d={};return Object.keys(s).forEach(l=>{const u=s[l];return n.properties||(n.properties={}),n.properties[l]=u.schema,d[l]=u.uiSchema,!0}),o.jsxRuntimeExports.jsxs("div",{className:"flex h-full select-none flex-col",children:[o.jsxRuntimeExports.jsx("div",{className:"rounded-md bg-background/30 p-1",children:o.jsxRuntimeExports.jsx("h1",{className:"px-1 font-semibold",children:"Branding Options"})}),o.jsxRuntimeExports.jsx("div",{className:"-mx-2",children:o.jsxRuntimeExports.jsx(B,{idSeparator:".",autoComplete:"off",omitExtraData:!0,liveOmit:!0,liveValidate:!0,uiSchema:d,schema:n,formData:a,validator:q,onChange:p})})]})};exports.default=k;

package/dist/{BrandingOptions-cfd1b740.js → BrandingOptions-1190723a.js}

@@ -1,11 +1,11 @@
 import { j as a } from "./jsx-runtime-944c88e2.js";
 import * as s from "react";
 import B from "@rjsf/validator-ajv8";
-import _ from "@rjsf/core";
-import { w as k } from "./index-7e212fbc.js";
+import k from "@rjsf/core";
+import { w as N } from "./index-3f65447f.js";
 import "react-i18next";
-import { u as N } from "./useBuilderProp-81a14920.js";
-import { SelectOption as p, Numeric as D, Color as e } from "@chaibuilder/blocks";
+import { u as D } from "./useBuilderProp-81a14920.js";
+import { SelectOption as p, Numeric as P, Color as e } from "@chaibuilder/blocks";
 import "i18next";
 import "flagged";
 import "react-dnd";
@@ -17,14 +17,14 @@ import "clsx";
 import "tailwind-merge";
 import "react-hotkeys-hook";
 import "flat-to-nested";
-import "./Class-e6b07b79.js";
+import "./Class-e34b2337.js";
 import "redux-undo";
 import "@react-hookz/web";
+import "@radix-ui/react-icons";
 import "./CONTROLS-442caee5.js";
 import "@radix-ui/react-slot";
 import "class-variance-authority";
 import "@radix-ui/react-tooltip";
-import "@radix-ui/react-icons";
 import "@radix-ui/react-toast";
 const d = [
   { title: "Roboto", value: "Roboto" },
@@ -77,51 +77,51 @@ const d = [
   { title: "Ovo", value: "Ovo" },
   { title: "Suranna", value: "Suranna" }
 ], at = () => {
-  const v = N("onSaveBrandingOptions", async () => {
-  }), [l, m] = k(), r = s.useRef(l);
+  const v = D("onSaveBrandingOptions", async () => {
+  }), [l, m] = N(), r = s.useRef(l);
   s.useEffect(() => () => v(r.current), [r]);
   const c = ({ formData: t }, i) => {
     i && (m(t), r.current = t);
   }, {
-    _bodyFont: f,
-    _headingFont: g,
-    _primaryColor: y,
-    _bodyTextDarkColor: h,
-    _bodyTextLightColor: b,
-    _bodyBgDarkColor: S,
-    _secondaryColor: x,
-    _bodyBgLightColor: C,
-    _roundedCorners: O
+    bodyFont: f,
+    headingFont: g,
+    primaryColor: y,
+    bodyTextDarkColor: h,
+    bodyTextLightColor: b,
+    bodyBgDarkColor: S,
+    secondaryColor: x,
+    bodyBgLightColor: C,
+    roundedCorners: O
   } = l, n = {
-    _headingFont: p({
+    headingFont: p({
       title: "Heading font",
       default: g,
       options: d
     }),
-    _bodyFont: p({
+    bodyFont: p({
       title: "Body font",
       default: f,
       options: d
     }),
-    _roundedCorners: D({
+    roundedCorners: P({
       title: "Rounded Corner",
       default: parseInt(O || 5, 10)
     }),
-    _primaryColor: e({ title: "Primary", default: y }),
-    _secondaryColor: e({ title: "Secondary", default: x }),
-    _bodyBgLightColor: e({
+    primaryColor: e({ title: "Primary", default: y }),
+    secondaryColor: e({ title: "Secondary", default: x }),
+    bodyBgLightColor: e({
       title: "Body Background (Light)",
       default: C
     }),
-    _bodyBgDarkColor: e({
+    bodyBgDarkColor: e({
       title: "Body Background (Dark)",
       default: S
     }),
-    _bodyTextLightColor: e({
+    bodyTextLightColor: e({
       title: "Body Text (Light)",
       default: h
     }),
-    _bodyTextDarkColor: e({
+    bodyTextDarkColor: e({
       title: "Body Text (Dark)",
       default: b
     })
@@ -136,7 +136,7 @@ const d = [
   }), /* @__PURE__ */ a.jsxs("div", { className: "flex h-full select-none flex-col", children: [
     /* @__PURE__ */ a.jsx("div", { className: "rounded-md bg-background/30 p-1", children: /* @__PURE__ */ a.jsx("h1", { className: "px-1 font-semibold", children: "Branding Options" }) }),
     /* @__PURE__ */ a.jsx("div", { className: "-mx-2", children: /* @__PURE__ */ a.jsx(
-      _,
+      k,
       {
         idSeparator: ".",
         autoComplete: "off",

package/dist/{CanvasArea-a065a586.js → CanvasArea-15458836.js}

@@ -6,11 +6,12 @@ import G, { createElement as gt, useCallback as Q, useState as H, useEffect as F
 import { map as ie, includes as Me, toUpper as ye, round as St, isEmpty as ee, first as ce, get as $, memoize as Tt, find as jt, filter as Ze, isString as Je } from "lodash";
 import { ResetIcon as De, DotsVerticalIcon as Ct, MobileIcon as Be, LaptopIcon as kt, DesktopIcon as _t, EraserIcon as Rt, ZoomInIcon as At, ArrowUpIcon as Pt, CopyIcon as It, TrashIcon as Ot, DragHandleDots2Icon as Mt } from "@radix-ui/react-icons";
 import { B as le, u as Qe, S as et } from "./useBuilderProp-81a14920.js";
-import { c as ke, d as tt, e as _e, f as Dt, g as Bt, h as X, i as Z, j as $t, k as nt, l as rt, m as Nt, n as Lt, o as Ft, p as ot, q as st, u as Wt, r as qt, s as Ut, t as Yt, v as zt, w as Ht, x as Re, y as at, z as Kt, A as Vt, B as Gt, b as Xt, E as Zt } from "./index-7e212fbc.js";
+import { c as ke, d as tt, e as _e, f as Dt, g as Bt, h as X, i as Z, j as $t, k as nt, l as rt, m as Nt, n as Lt, o as Ft, p as ot, q as st, u as Wt, r as qt, s as Ut, t as Yt, v as zt, w as Ht, x as Re, y as at, z as Kt, A as Vt, B as Gt, b as Xt, E as Zt } from "./index-3f65447f.js";
 import { useTranslation as it } from "react-i18next";
 import { S as se } from "./separator-a80d065b.js";
-import { S as Jt, D as Qt, k as en, l as tn, p as nn, q as rn, n as on, H as sn, i as an, j as cn, A as ln, a as dn, b as un, c as fn, e as pn, f as hn, d as mn, h as yn, g as vn } from "./dropdown-menu-d912a52e.js";
-import { L as gn } from "./label-e770a087.js";
+import { S as Jt, D as Qt, c as en, d as tn, h as nn, i as rn, f as on, H as sn, a as an, b as cn } from "./dropdown-menu-ae3ed09b.js";
+import { L as ln } from "./label-e770a087.js";
+import { A as dn, a as un, b as fn, c as pn, e as hn, f as mn, d as yn, h as vn, g as gn } from "./alert-dialog-ee98f47e.js";
 import { useAtom as te } from "jotai";
 import { flip as xn } from "@floating-ui/dom";
 import { useFloating as bn, shift as wn } from "@floating-ui/react-dom";
@@ -34,14 +35,14 @@ import "flagged";
 import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
 import "flat-to-nested";
-import "./Class-e6b07b79.js";
+import "./Class-e34b2337.js";
 import "redux-undo";
 import "@radix-ui/react-separator";
 import "@radix-ui/react-switch";
-import "@radix-ui/react-alert-dialog";
 import "@radix-ui/react-hover-card";
 import "@radix-ui/react-dropdown-menu";
 import "@radix-ui/react-label";
+import "@radix-ui/react-alert-dialog";
 const Rn = () => {
   const { undoCount: e, redoCount: n, undo: r, redo: i } = ke();
   return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
@@ -52,7 +53,7 @@ const Rn = () => {
 function An() {
   const [e, n] = tt(), { t: r } = it();
   return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ t.jsx(gn, { htmlFor: "dark-mode-switch", children: r("dark_mode") }),
+    /* @__PURE__ */ t.jsx(ln, { htmlFor: "dark-mode-switch", children: r("dark_mode") }),
     /* @__PURE__ */ t.jsxs(
       Jt,
       {
@@ -197,19 +198,19 @@ const Le = ({ landscape: e = !1 }) => /* @__PURE__ */ t.jsxs(
   const [e] = Bt(), { createSnapshot: n } = ke(), [, r] = X(), [, i] = Z(), d = Q(() => {
     e([]), r([]), i([]), n();
   }, [e, n]);
-  return /* @__PURE__ */ t.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ t.jsxs(ln, { children: [
-    /* @__PURE__ */ t.jsx(dn, { asChild: !0, children: /* @__PURE__ */ t.jsxs(le, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
+  return /* @__PURE__ */ t.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ t.jsxs(dn, { children: [
+    /* @__PURE__ */ t.jsx(un, { asChild: !0, children: /* @__PURE__ */ t.jsxs(le, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1", children: [
       /* @__PURE__ */ t.jsx(Rt, {}),
       " Clear"
     ] }) }),
-    /* @__PURE__ */ t.jsxs(un, { className: "border-border", children: [
-      /* @__PURE__ */ t.jsxs(fn, { children: [
-        /* @__PURE__ */ t.jsx(pn, { children: "Clear whole canvas?" }),
-        /* @__PURE__ */ t.jsx(hn, { children: "Are you sure you want to clear the whole canvas?" })
+    /* @__PURE__ */ t.jsxs(fn, { className: "border-border", children: [
+      /* @__PURE__ */ t.jsxs(pn, { children: [
+        /* @__PURE__ */ t.jsx(hn, { children: "Clear whole canvas?" }),
+        /* @__PURE__ */ t.jsx(mn, { children: "Are you sure you want to clear the whole canvas?" })
       ] }),
-      /* @__PURE__ */ t.jsxs(mn, { children: [
-        /* @__PURE__ */ t.jsx(yn, { children: "Cancel" }),
-        /* @__PURE__ */ t.jsx(vn, { onClick: d, children: "Yes" })
+      /* @__PURE__ */ t.jsxs(yn, { children: [
+        /* @__PURE__ */ t.jsx(vn, { children: "Cancel" }),
+        /* @__PURE__ */ t.jsx(gn, { onClick: d, children: "Yes" })
       ] })
     ] })
   ] }) });
@@ -965,7 +966,7 @@ const L = /* @__PURE__ */ _n(zn);
 let ut, ft;
 typeof document < "u" && (ut = document);
 typeof window < "u" && (ft = window);
-const pt = G.createContext({ document: ut, window: ft }), Pe = () => G.useContext(pt), { Provider: Hn, Consumer: Xr } = pt;
+const pt = G.createContext({ document: ut, window: ft }), Pe = () => G.useContext(pt), { Provider: Hn, Consumer: Zr } = pt;
 class ht extends Xe {
   componentDidMount() {
     this.props.contentDidMount();
@@ -1423,7 +1424,7 @@ const or = () => {
       )
     }
   );
-}, ir = wt(() => import("./AddBlocks-b5f37f2f.js")), Zr = () => {
+}, ir = wt(() => import("./AddBlocks-b6a12d50.js")), Jr = () => {
   const e = Qe("mode", ve.STATIC), [n, r] = te(Xt), i = {
     [ve.STATIC]: /* @__PURE__ */ t.jsx(ar, {}),
     [ve.FRAMEWORK]: null
@@ -1451,5 +1452,5 @@ const or = () => {
   ] });
 };
 export {
-  Zr as default
+  Jr as default
 };

package/dist/CanvasArea-f5d27245.cjs

@@ -0,0 +1,60 @@
+"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"}
+          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">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://old.chaibuilder.com/offline/tailwind.cdn.js"><\/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;}
+    a{ pointer-events: none !important; }
+    </style>
+    <style id="hidden-blocks"></style>
+    <style id="selected-block"></style>
+    <style id="selected-styling-block"></style>
+    <style id="highlighted-block"></style>
+  </head>
+  <body class="font-body antialiased h-full">
+    <div class="frame-root"></div>
+  </body>
+</html>`,dt=e=>{const[r]=h.useCanvasWidth(),[,n]=h.useCanvasZoom(),[a,u]=g.useState({}),o=g.useCallback(()=>{const{width:i,height:p}=e;if(i<r){const y=parseFloat((i/r).toString());let f={};p&&(f={height:p+2*p*(1-y)}),u({transform:`scale(${y})`,transformOrigin:"top left",...f,maxWidth:"none"}),n(y*100)}else u({}),n(100)},[r,e,n]);return g.useEffect(()=>{o()},[r,e,n,o]),a};var Ee={exports:{}},oe={exports:{}},O={};/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Ae;function pt(){if(Ae)return O;Ae=1;var e=typeof Symbol=="function"&&Symbol.for,r=e?Symbol.for("react.element"):60103,n=e?Symbol.for("react.portal"):60106,a=e?Symbol.for("react.fragment"):60107,u=e?Symbol.for("react.strict_mode"):60108,o=e?Symbol.for("react.profiler"):60114,i=e?Symbol.for("react.provider"):60109,p=e?Symbol.for("react.context"):60110,y=e?Symbol.for("react.async_mode"):60111,f=e?Symbol.for("react.concurrent_mode"):60111,m=e?Symbol.for("react.forward_ref"):60112,x=e?Symbol.for("react.suspense"):60113,R=e?Symbol.for("react.suspense_list"):60120,E=e?Symbol.for("react.memo"):60115,B=e?Symbol.for("react.lazy"):60116,w=e?Symbol.for("react.block"):60121,_=e?Symbol.for("react.fundamental"):60117,j=e?Symbol.for("react.responder"):60118,z=e?Symbol.for("react.scope"):60119;function q(l){if(typeof l=="object"&&l!==null){var $=l.$$typeof;switch($){case r:switch(l=l.type,l){case y:case f:case a:case o:case u:case x:return l;default:switch(l=l&&l.$$typeof,l){case p:case m:case B:case E:case i:return l;default:return $}}case n:return $}}}function N(l){return q(l)===f}return O.AsyncMode=y,O.ConcurrentMode=f,O.ContextConsumer=p,O.ContextProvider=i,O.Element=r,O.ForwardRef=m,O.Fragment=a,O.Lazy=B,O.Memo=E,O.Portal=n,O.Profiler=o,O.StrictMode=u,O.Suspense=x,O.isAsyncMode=function(l){return N(l)||q(l)===y},O.isConcurrentMode=N,O.isContextConsumer=function(l){return q(l)===p},O.isContextProvider=function(l){return q(l)===i},O.isElement=function(l){return typeof l=="object"&&l!==null&&l.$$typeof===r},O.isForwardRef=function(l){return q(l)===m},O.isFragment=function(l){return q(l)===a},O.isLazy=function(l){return q(l)===B},O.isMemo=function(l){return q(l)===E},O.isPortal=function(l){return q(l)===n},O.isProfiler=function(l){return q(l)===o},O.isStrictMode=function(l){return q(l)===u},O.isSuspense=function(l){return q(l)===x},O.isValidElementType=function(l){return typeof l=="string"||typeof l=="function"||l===a||l===f||l===o||l===u||l===x||l===R||typeof l=="object"&&l!==null&&(l.$$typeof===B||l.$$typeof===E||l.$$typeof===i||l.$$typeof===p||l.$$typeof===m||l.$$typeof===_||l.$$typeof===j||l.$$typeof===z||l.$$typeof===w)},O.typeOf=q,O}var M={};/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Ie;function ft(){return Ie||(Ie=1,process.env.NODE_ENV!=="production"&&function(){var e=typeof Symbol=="function"&&Symbol.for,r=e?Symbol.for("react.element"):60103,n=e?Symbol.for("react.portal"):60106,a=e?Symbol.for("react.fragment"):60107,u=e?Symbol.for("react.strict_mode"):60108,o=e?Symbol.for("react.profiler"):60114,i=e?Symbol.for("react.provider"):60109,p=e?Symbol.for("react.context"):60110,y=e?Symbol.for("react.async_mode"):60111,f=e?Symbol.for("react.concurrent_mode"):60111,m=e?Symbol.for("react.forward_ref"):60112,x=e?Symbol.for("react.suspense"):60113,R=e?Symbol.for("react.suspense_list"):60120,E=e?Symbol.for("react.memo"):60115,B=e?Symbol.for("react.lazy"):60116,w=e?Symbol.for("react.block"):60121,_=e?Symbol.for("react.fundamental"):60117,j=e?Symbol.for("react.responder"):60118,z=e?Symbol.for("react.scope"):60119;function q(c){return typeof c=="string"||typeof c=="function"||c===a||c===f||c===o||c===u||c===x||c===R||typeof c=="object"&&c!==null&&(c.$$typeof===B||c.$$typeof===E||c.$$typeof===i||c.$$typeof===p||c.$$typeof===m||c.$$typeof===_||c.$$typeof===j||c.$$typeof===z||c.$$typeof===w)}function N(c){if(typeof c=="object"&&c!==null){var K=c.$$typeof;switch(K){case r:var ne=c.type;switch(ne){case y:case f:case a:case o:case u:case x:return ne;default:var we=ne&&ne.$$typeof;switch(we){case p:case m:case B:case E:case i:return we;default:return K}}case n:return K}}}var l=y,$=f,Y=p,U=i,ae=r,ce=m,te=a,le=B,ue=E,Q=n,de=o,H=u,Z=x,re=!1;function pe(c){return re||(re=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),s(c)||N(c)===y}function s(c){return N(c)===f}function d(c){return N(c)===p}function T(c){return N(c)===i}function k(c){return typeof c=="object"&&c!==null&&c.$$typeof===r}function b(c){return N(c)===m}function A(c){return N(c)===a}function S(c){return N(c)===B}function C(c){return N(c)===E}function I(c){return N(c)===n}function D(c){return N(c)===o}function P(c){return N(c)===u}function L(c){return N(c)===x}M.AsyncMode=l,M.ConcurrentMode=$,M.ContextConsumer=Y,M.ContextProvider=U,M.Element=ae,M.ForwardRef=ce,M.Fragment=te,M.Lazy=le,M.Memo=ue,M.Portal=Q,M.Profiler=de,M.StrictMode=H,M.Suspense=Z,M.isAsyncMode=pe,M.isConcurrentMode=s,M.isContextConsumer=d,M.isContextProvider=T,M.isElement=k,M.isForwardRef=b,M.isFragment=A,M.isLazy=S,M.isMemo=C,M.isPortal=I,M.isProfiler=D,M.isStrictMode=P,M.isSuspense=L,M.isValidElementType=q,M.typeOf=N}()),M}var Pe;function Le(){return Pe||(Pe=1,process.env.NODE_ENV==="production"?oe.exports=pt():oe.exports=ft()),oe.exports}/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/var xe,Oe;function xt(){if(Oe)return xe;Oe=1;var e=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable;function a(o){if(o==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(o)}function u(){try{if(!Object.assign)return!1;var o=new String("abc");if(o[5]="de",Object.getOwnPropertyNames(o)[0]==="5")return!1;for(var i={},p=0;p<10;p++)i["_"+String.fromCharCode(p)]=p;var y=Object.getOwnPropertyNames(i).map(function(m){return i[m]});if(y.join("")!=="0123456789")return!1;var f={};return"abcdefghijklmnopqrst".split("").forEach(function(m){f[m]=m}),Object.keys(Object.assign({},f)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}return xe=u()?Object.assign:function(o,i){for(var p,y=a(o),f,m=1;m<arguments.length;m++){p=Object(arguments[m]);for(var x in p)r.call(p,x)&&(y[x]=p[x]);if(e){f=e(p);for(var R=0;R<f.length;R++)n.call(p,f[R])&&(y[f[R]]=p[f[R]])}}return y},xe}var me,Me;function Re(){if(Me)return me;Me=1;var e="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";return me=e,me}var he,De;function Fe(){return De||(De=1,he=Function.call.bind(Object.prototype.hasOwnProperty)),he}var ye,Be;function mt(){if(Be)return ye;Be=1;var e=function(){};if(process.env.NODE_ENV!=="production"){var r=Re(),n={},a=Fe();e=function(o){var i="Warning: "+o;typeof console<"u"&&console.error(i);try{throw new Error(i)}catch{}}}function u(o,i,p,y,f){if(process.env.NODE_ENV!=="production"){for(var m in o)if(a(o,m)){var x;try{if(typeof o[m]!="function"){var R=Error((y||"React class")+": "+p+" type `"+m+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof o[m]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw R.name="Invariant Violation",R}x=o[m](i,m,y,p,null,r)}catch(B){x=B}if(x&&!(x instanceof Error)&&e((y||"React class")+": type specification of "+p+" `"+m+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof x+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),x instanceof Error&&!(x.message in n)){n[x.message]=!0;var E=f?f():"";e("Failed "+p+" type: "+x.message+(E??""))}}}}return u.resetWarningCache=function(){process.env.NODE_ENV!=="production"&&(n={})},ye=u,ye}var ve,qe;function ht(){if(qe)return ve;qe=1;var e=Le(),r=xt(),n=Re(),a=Fe(),u=mt(),o=function(){};process.env.NODE_ENV!=="production"&&(o=function(p){var y="Warning: "+p;typeof console<"u"&&console.error(y);try{throw new Error(y)}catch{}});function i(){return null}return ve=function(p,y){var f=typeof Symbol=="function"&&Symbol.iterator,m="@@iterator";function x(s){var d=s&&(f&&s[f]||s[m]);if(typeof d=="function")return d}var R="<<anonymous>>",E={array:j("array"),bigint:j("bigint"),bool:j("boolean"),func:j("function"),number:j("number"),object:j("object"),string:j("string"),symbol:j("symbol"),any:z(),arrayOf:q,element:N(),elementType:l(),instanceOf:$,node:ce(),objectOf:U,oneOf:Y,oneOfType:ae,shape:le,exact:ue};function B(s,d){return s===d?s!==0||1/s===1/d:s!==s&&d!==d}function w(s,d){this.message=s,this.data=d&&typeof d=="object"?d:{},this.stack=""}w.prototype=Error.prototype;function _(s){if(process.env.NODE_ENV!=="production")var d={},T=0;function k(A,S,C,I,D,P,L){if(I=I||R,P=P||C,L!==n){if(y){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}else if(process.env.NODE_ENV!=="production"&&typeof console<"u"){var K=I+":"+C;!d[K]&&T<3&&(o("You are manually calling a React.PropTypes validation function for the `"+P+"` prop on `"+I+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),d[K]=!0,T++)}}return S[C]==null?A?S[C]===null?new w("The "+D+" `"+P+"` is marked as required "+("in `"+I+"`, but its value is `null`.")):new w("The "+D+" `"+P+"` is marked as required in "+("`"+I+"`, but its value is `undefined`.")):null:s(S,C,I,D,P)}var b=k.bind(null,!1);return b.isRequired=k.bind(null,!0),b}function j(s){function d(T,k,b,A,S,C){var I=T[k],D=H(I);if(D!==s){var P=Z(I);return new w("Invalid "+A+" `"+S+"` of type "+("`"+P+"` supplied to `"+b+"`, expected ")+("`"+s+"`."),{expectedType:s})}return null}return _(d)}function z(){return _(i)}function q(s){function d(T,k,b,A,S){if(typeof s!="function")return new w("Property `"+S+"` of component `"+b+"` has invalid PropType notation inside arrayOf.");var C=T[k];if(!Array.isArray(C)){var I=H(C);return new w("Invalid "+A+" `"+S+"` of type "+("`"+I+"` supplied to `"+b+"`, expected an array."))}for(var D=0;D<C.length;D++){var P=s(C,D,b,A,S+"["+D+"]",n);if(P instanceof Error)return P}return null}return _(d)}function N(){function s(d,T,k,b,A){var S=d[T];if(!p(S)){var C=H(S);return new w("Invalid "+b+" `"+A+"` of type "+("`"+C+"` supplied to `"+k+"`, expected a single ReactElement."))}return null}return _(s)}function l(){function s(d,T,k,b,A){var S=d[T];if(!e.isValidElementType(S)){var C=H(S);return new w("Invalid "+b+" `"+A+"` of type "+("`"+C+"` supplied to `"+k+"`, expected a single ReactElement type."))}return null}return _(s)}function $(s){function d(T,k,b,A,S){if(!(T[k]instanceof s)){var C=s.name||R,I=pe(T[k]);return new w("Invalid "+A+" `"+S+"` of type "+("`"+I+"` supplied to `"+b+"`, expected ")+("instance of `"+C+"`."))}return null}return _(d)}function Y(s){if(!Array.isArray(s))return process.env.NODE_ENV!=="production"&&(arguments.length>1?o("Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z])."):o("Invalid argument supplied to oneOf, expected an array.")),i;function d(T,k,b,A,S){for(var C=T[k],I=0;I<s.length;I++)if(B(C,s[I]))return null;var D=JSON.stringify(s,function(L,c){var K=Z(c);return K==="symbol"?String(c):c});return new w("Invalid "+A+" `"+S+"` of value `"+String(C)+"` "+("supplied to `"+b+"`, expected one of "+D+"."))}return _(d)}function U(s){function d(T,k,b,A,S){if(typeof s!="function")return new w("Property `"+S+"` of component `"+b+"` has invalid PropType notation inside objectOf.");var C=T[k],I=H(C);if(I!=="object")return new w("Invalid "+A+" `"+S+"` of type "+("`"+I+"` supplied to `"+b+"`, expected an object."));for(var D in C)if(a(C,D)){var P=s(C,D,b,A,S+"."+D,n);if(P instanceof Error)return P}return null}return _(d)}function ae(s){if(!Array.isArray(s))return process.env.NODE_ENV!=="production"&&o("Invalid argument supplied to oneOfType, expected an instance of array."),i;for(var d=0;d<s.length;d++){var T=s[d];if(typeof T!="function")return o("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+re(T)+" at index "+d+"."),i}function k(b,A,S,C,I){for(var D=[],P=0;P<s.length;P++){var L=s[P],c=L(b,A,S,C,I,n);if(c==null)return null;c.data&&a(c.data,"expectedType")&&D.push(c.data.expectedType)}var K=D.length>0?", expected one of type ["+D.join(", ")+"]":"";return new w("Invalid "+C+" `"+I+"` supplied to "+("`"+S+"`"+K+"."))}return _(k)}function ce(){function s(d,T,k,b,A){return Q(d[T])?null:new w("Invalid "+b+" `"+A+"` supplied to "+("`"+k+"`, expected a ReactNode."))}return _(s)}function te(s,d,T,k,b){return new w((s||"React class")+": "+d+" type `"+T+"."+k+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+b+"`.")}function le(s){function d(T,k,b,A,S){var C=T[k],I=H(C);if(I!=="object")return new w("Invalid "+A+" `"+S+"` of type `"+I+"` "+("supplied to `"+b+"`, expected `object`."));for(var D in s){var P=s[D];if(typeof P!="function")return te(b,A,S,D,Z(P));var L=P(C,D,b,A,S+"."+D,n);if(L)return L}return null}return _(d)}function ue(s){function d(T,k,b,A,S){var C=T[k],I=H(C);if(I!=="object")return new w("Invalid "+A+" `"+S+"` of type `"+I+"` "+("supplied to `"+b+"`, expected `object`."));var D=r({},T[k],s);for(var P in D){var L=s[P];if(a(s,P)&&typeof L!="function")return te(b,A,S,P,Z(L));if(!L)return new w("Invalid "+A+" `"+S+"` key `"+P+"` supplied to `"+b+"`.\nBad object: "+JSON.stringify(T[k],null,"  ")+`
+Valid keys: `+JSON.stringify(Object.keys(s),null,"  "));var c=L(C,P,b,A,S+"."+P,n);if(c)return c}return null}return _(d)}function Q(s){switch(typeof s){case"number":case"string":case"undefined":return!0;case"boolean":return!s;case"object":if(Array.isArray(s))return s.every(Q);if(s===null||p(s))return!0;var d=x(s);if(d){var T=d.call(s),k;if(d!==s.entries){for(;!(k=T.next()).done;)if(!Q(k.value))return!1}else for(;!(k=T.next()).done;){var b=k.value;if(b&&!Q(b[1]))return!1}}else return!1;return!0;default:return!1}}function de(s,d){return s==="symbol"?!0:d?d["@@toStringTag"]==="Symbol"||typeof Symbol=="function"&&d instanceof Symbol:!1}function H(s){var d=typeof s;return Array.isArray(s)?"array":s instanceof RegExp?"object":de(d,s)?"symbol":d}function Z(s){if(typeof s>"u"||s===null)return""+s;var d=H(s);if(d==="object"){if(s instanceof Date)return"date";if(s instanceof RegExp)return"regexp"}return d}function re(s){var d=Z(s);switch(d){case"array":case"object":return"an "+d;case"boolean":case"date":case"regexp":return"a "+d;default:return d}}function pe(s){return!s.constructor||!s.constructor.name?R:s.constructor.name}return E.checkPropTypes=u,E.resetWarningCache=u.resetWarningCache,E.PropTypes=E,E},ve}var ge,$e;function yt(){if($e)return ge;$e=1;var e=Re();function r(){}function n(){}return n.resetWarningCache=r,ge=function(){function a(i,p,y,f,m,x){if(x!==e){var R=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw R.name="Invariant Violation",R}}a.isRequired=a;function u(){return a}var o={array:a,bigint:a,bool:a,func:a,number:a,object:a,string:a,symbol:a,any:a,arrayOf:u,element:a,elementType:a,instanceOf:u,node:a,objectOf:u,oneOf:u,oneOfType:u,shape:u,exact:u,checkPropTypes:n,resetWarningCache:r};return o.PropTypes=o,o},ge}if(process.env.NODE_ENV!=="production"){var vt=Le(),gt=!0;Ee.exports=ht()(vt.isElement,gt)}else Ee.exports=yt()();var Et=Ee.exports;const F=nt.getDefaultExportFromCjs(Et);let We,Ye;typeof document<"u"&&(We=document);typeof window<"u"&&(Ye=window);const Ue=g.createContext({document:We,window:Ye}),Se=()=>g.useContext(Ue),{Provider:jt,Consumer:Nt}=Ue;class ze extends g.Component{componentDidMount(){this.props.contentDidMount()}componentDidUpdate(){this.props.contentDidUpdate()}render(){return g.Children.only(this.props.children)}}J(ze,"propTypes",{children:F.element.isRequired,contentDidMount:F.func.isRequired,contentDidUpdate:F.func.isRequired});class je extends g.Component{constructor(n,a){super(n,a);J(this,"setRef",n=>{this.nodeRef.current=n;const{forwardedRef:a}=this.props;typeof a=="function"?a(n):a&&(a.current=n)});J(this,"handleLoad",()=>{clearInterval(this.loadCheck),this.state.iframeLoaded||this.setState({iframeLoaded:!0})});J(this,"loadCheck",()=>setInterval(()=>{this.handleLoad()},500));this._isMounted=!1,this.nodeRef=g.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 n=this.getDoc();return this.props.mountTarget?n.querySelector(this.props.mountTarget):n.body.children[0]}renderFrameContents(){if(!this._isMounted)return null;const n=this.getDoc();if(!n)return null;const a=this.props.contentDidMount,u=this.props.contentDidUpdate,o=n.defaultView||n.parentView,i=t.jsxRuntimeExports.jsx(ze,{contentDidMount:a,contentDidUpdate:u,children:t.jsxRuntimeExports.jsx(jt,{value:{document:n,window:o},children:t.jsxRuntimeExports.jsx("div",{className:"frame-content",children:this.props.children})})}),p=this.getMountTarget();return[Ce.createPortal(this.props.head,this.getDoc().head),Ce.createPortal(i,p)]}render(){const n={...this.props,srcDoc:this.props.initialContent,children:void 0};return delete n.head,delete n.initialContent,delete n.mountTarget,delete n.contentDidMount,delete n.contentDidUpdate,delete n.forwardedRef,t.jsxRuntimeExports.jsx("iframe",{...n,ref:this.setRef,onLoad:this.handleLoad,children:this.state.iframeLoaded&&this.renderFrameContents()})}}J(je,"propTypes",{style:F.object,head:F.node,initialContent:F.string,mountTarget:F.string,contentDidMount:F.func,contentDidUpdate:F.func,children:F.oneOfType([F.element,F.arrayOf(F.element)])}),J(je,"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 bt=g.forwardRef((e,r)=>t.jsxRuntimeExports.jsx(je,{...e,forwardedRef:r})),Rt=({children:e})=>{const{document:r}=Se(),[n]=h.useSelectedBlockIds(),[a,u]=h.useSelectedStylingBlocks();return g.useEffect(()=>{setTimeout(()=>{if(!v.isEmpty(a))return;const o=He(r,v.first(n));if(o){const i=o.getAttribute("data-style-prop");if(i){const p=o.getAttribute("data-style-id"),y=o.getAttribute("data-block-parent");u([{id:p,prop:i,blockId:y}])}}},100)},[r,n,u,a]),t.jsxRuntimeExports.jsx("div",{id:"canvas",className:"relative h-screen max-w-full outline-2",children:e})},He=(e,r)=>e.querySelector(`[data-block-id="${r}"]`),St=()=>{const{window:e}=Se(),[r,n]=h.useSelectedBlockIds(),[,a]=h.useSelectedStylingBlocks(),{undo:u,redo:o}=h.useCanvasHistory(),i=h.useDuplicateBlocks(),[,p]=h.useCutBlockIds(),[,y]=h.useCopyBlockIds(),{pasteBlocks:f}=h.usePasteBlocks(),[,m]=h.usePreviewMode(),x=h.useRemoveBlocks(),{savePage:R}=h.useSavePage(),[E]=ee.useAtom(h.inlineEditingActiveAtom),[,B]=ee.useAtom(h.editLayerNameAtom),w=_=>{_.key==="Enter"&&(_.preventDefault(),r.length===1&&B(v.first(r)))};return g.useEffect(()=>{const _=j=>{if(j.key==="Escape"){n([]),a([]);return}if(w(j),!E&&(j.key==="Delete"||j.key==="Backspace")&&(j.preventDefault(),x(r)),j.ctrlKey||j.metaKey){if(["z","y","d","x","c","p","s","v"].includes(j.key)){if(E&&["x","z","v"].includes(j.key))return!0;j.preventDefault()}j.key==="s"&&(j.stopPropagation(),j.preventDefault(),R()),j.key==="z"&&u(),j.key==="y"&&o(),j.key==="d"&&i(r),j.key==="x"&&p(r),j.key==="c"&&y(r),j.key==="v"&&r.length>0&&f(r[0])}};return e.removeEventListener("keydown",_),e.addEventListener("keydown",_),()=>{e.removeEventListener("keydown",_)}},[r,n,u,x,m,o,i,p,y,f,E,R,e]),null},wt=({block:e,label:r})=>{const[,n]=Ze.useDrag(()=>({type:"CANVAS_BLOCK",item:e}));return t.jsxRuntimeExports.jsxs("div",{className:"mr-10 flex cursor-grab items-center space-x-1 px-1",ref:n,onDragStart:()=>{console.log("drag start")},children:[t.jsxRuntimeExports.jsx(W.DragHandleDots2Icon,{}),r]})},kt=({selectedBlockElement:e,block:r})=>{const n=h.useRemoveBlocks(),a=h.useDuplicateBlocks(),[,u]=h.useSelectedBlockIds(),[,o]=h.useSelectedStylingBlocks(),{floatingStyles:i,refs:p,update:y}=ke.useFloating({placement:"top-start",middleware:[ke.shift(),Xe.flip()],elements:{reference:e}});Je.useResizeObserver(e,()=>y(),e!==null);const f=v.get(r,"_parent",null),m=v.isEmpty(v.get(r,"_name",""))?v.get(r,"_type",""):v.get(r,"_name","");return!e||!r?null:t.jsxRuntimeExports.jsxs("div",{role:"button",tabIndex:0,ref:p.setFloating,style:i,onClick:x=>{x.stopPropagation(),x.preventDefault()},onKeyDown:x=>x.stopPropagation(),className:"z-50 flex h-6 items-center bg-blue-500  py-2 text-xs text-white",children:[t.jsxRuntimeExports.jsx(wt,{label:m,block:r}),t.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 px-1 ",children:[f&&t.jsxRuntimeExports.jsx(W.ArrowUpIcon,{className:"hover:scale-105 ",onClick:()=>{o([]),u([f])}}),h.canDuplicateBlock(v.get(r,"_type",""))?t.jsxRuntimeExports.jsx(W.CopyIcon,{className:"hover:scale-105 ",onClick:()=>a([r==null?void 0:r._id])}):null,h.canDeleteBlock(v.get(r,"_type",""))?t.jsxRuntimeExports.jsx(W.TrashIcon,{className:"hover:scale-105 ",onClick:()=>n([r==null?void 0:r._id])}):null]})]})},Ct=({model:e})=>{const[r]=h.useBrandingOptions(),[n]=h.useSelectedBlockIds(),[a]=h.useDarkMode(),[u]=h.useHighlightBlockId(),[o]=h.useSelectedStylingBlocks(),{document:i,window:p}=Se(),[y]=g.useState(i==null?void 0:i.getElementById("highlighted-block")),[f]=g.useState(i==null?void 0:i.getElementById("selected-block")),[m]=g.useState(i==null?void 0:i.getElementById("selected-styling-block"));g.useEffect(()=>{a?i==null||i.documentElement.classList.add("dark"):i==null||i.documentElement.classList.remove("dark")},[a,i]);const x=v.get(r,"_headingFont","DM Sans"),R=v.get(r,"_bodyFont","DM Sans");return g.useEffect(()=>{const E=v.get(r,"_primaryColor","#000"),B=v.get(r,"_secondaryColor","#FFF"),w=Qe.tailwindcssPaletteGenerator({colors:[E,B],names:["primary","secondary"]});w.primary.DEFAULT=E,w.secondary.DEFAULT=B;const _=v.get(r,"_roundedCorners","0");!p||!p.tailwind||(p.tailwind.config={darkMode:"class",theme:{fontFamily:{heading:[x],body:[R]},extend:{borderRadius:{global:`${_||"0"}px`},colors:w}},plugins:[p.tailwind.plugin.withOptions(({prefix:j="ui"}={})=>({addVariant:z})=>{for(const q of["open","checked","selected","active","disabled"])z(`${j}-${q}`,[`&[data-headlessui-state~="${q}"]`,`:where([data-headlessui-state~="${q}"]) &`]),z(`${j}-not-${q}`,[`&[data-headlessui-state]:not([data-headlessui-state~="${q}"])`,`:where([data-headlessui-state]:not([data-headlessui-state~="${q}"])) &:not([data-headlessui-state])`])})]})},[r,p,x,R]),g.useEffect(()=>{f&&(f.textContent=`${v.map(n,E=>`[data-block-id="${E}"]`).join(",")}{
+                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;