@chaibuilder/sdk 1.2.23 → 1.2.25

package/README.md

@@ -36,16 +36,17 @@ Step 4: Add the builder to your page.
 ```tsx
 import "./chaibuilder.tailwind.css";
 import "@chaibuilder/sdk/styles";
+import "@chaibuilder/sdk/web-blocks";
 import { ChaiBuilderEditor } from "@chaibuilder/sdk";
-import { loadWebBlocks } from "@chaibuilder/sdk/web-blocks";
-loadWebBlocks();
 
 const BuilderFullPage = () => {
   return  (
       <ChaiBuilderEditor
-          blocks={[]}
-          onSavePage={async (blocks) => { console.log(blocks); return true }}
-          onSaveBrandingOptions={async (branding) => { console.log(blocks); return true }}
+          blocks={[{_type: 'Heading', _id: 'a', content: 'This is a heading', styles: '#styles:,text-3xl font-bold'}]}
+          onSave={async ({ blocks, providers, brandingOptions } ) => {
+            console.log(blocks, providers, brandingOptions );
+            return true
+          }}
       />
   );
 }

package/dist/AddBlocks-Ol3iIVKa.js

@@ -0,0 +1,207 @@
+import { j as e } from "./jsx-runtime-Sp0orL4X.js";
+import k, { createElement as O, useMemo as U, useState as g, useCallback as V, useEffect as q, Suspense as J } from "react";
+import { omit as R, has as F, isFunction as W, first as h, filter as b, values as v, groupBy as w, mergeWith as K, isArray as L, keys as Y, get as $, map as T, noop as Q, isEmpty as y, uniq as X, includes as Z, find as ee, reject as I } from "lodash-es";
+import { useAtom as N } from "jotai";
+import { useTranslation as H } from "react-i18next";
+import { A as se, a as re, b as te, c as oe } from "./accordion-oPUeqPCZ.js";
+import { S as le } from "./scroll-area-ewXbxc3n.js";
+import { T as ae, g as ce, h as C } from "./tabs-yQ3oGziM.js";
+import { T as ie, a as ne, c as de, u as A, B as me, S as pe } from "./skeleton-lu8e7q2y.js";
+import { BoxIcon as ue } from "@radix-ui/react-icons";
+import { j as _, f as xe, s as S, J as he } from "./ChaiBuilderEditor-vP4at00I.js";
+import { u as P } from "./useAddBlock-FEKFJNwQ.js";
+import { syncBlocksWithDefaults as M, useChaiBlocks as G } from "@chaibuilder/runtime";
+import { useFeature as fe } from "flagged";
+import { O as B } from "./STRINGS-b432aBJJ.js";
+import { u as z } from "./useUiLibraries-psyWFbNc.js";
+import { Loader as ge } from "lucide-react";
+import { S as je, c as be, b as ve, d as ye, f as E } from "./select-POGdEDHT.js";
+import { C as ke, c as Be, f as Ne, g as Ce, T as we, d as Te, A as Ae, a as _e } from "./textarea-b2QvVhrK.js";
+import { L as Se } from "./label-KaP7MRrs.js";
+import { g as Pe } from "./html-to-json-2xtb7520.js";
+import "@radix-ui/react-accordion";
+import "./utils-dze1SGvB.js";
+import "clsx";
+import "tailwind-merge";
+import "@radix-ui/react-scroll-area";
+import "@radix-ui/react-dialog";
+import "@radix-ui/react-tabs";
+import "@radix-ui/react-slot";
+import "class-variance-authority";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-toast";
+import "./MODIFIERS-CNqNUapY.js";
+import "react-dom";
+import "@floating-ui/react-dom";
+import "i18next";
+import "./Functions-NzT2Six_.js";
+import "react-hotkeys-hook";
+import "@react-hookz/web";
+import "./block-helpers-oSFpSsGz.js";
+import "./Controls-3Cc1XYXg.js";
+import "@radix-ui/react-select";
+import "@radix-ui/react-label";
+import "himalaya";
+const Le = ({ block: s }) => {
+  const { type: t, icon: c, label: l } = s, { addCoreBlock: d, addPredefinedBlock: i } = P(), [n, r] = _(), [, p] = xe(), [, m] = N(S), o = () => {
+    if (F(s, "blocks")) {
+      const u = W(s.blocks) ? s.blocks() : s.blocks;
+      i(M(u), h(n));
+    } else
+      d(s, h(n));
+    m(B);
+  }, a = fe("dnd");
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs(ie, { children: [
+    /* @__PURE__ */ e.jsx(ne, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      "button",
+      {
+        onClick: o,
+        type: "button",
+        onDragStart: (u) => {
+          u.dataTransfer.setData("text/plain", JSON.stringify(R(s, ["component", "icon"]))), setTimeout(() => {
+            r([]), p(null), m(B);
+          }, 200);
+        },
+        draggable: a ? "true" : "false",
+        className: "space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 " + (a ? "cursor-grab" : "cursor-pointer"),
+        children: [
+          O(c || ue, { className: "w-4 h-4 mx-auto" }),
+          /* @__PURE__ */ e.jsx("p", { className: "truncate text-xs", children: l || t })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(de, { children: /* @__PURE__ */ e.jsx("p", { children: l || t }) })
+  ] }) });
+}, Ie = ({ block: s, closePopover: t }) => {
+  const [c, l] = g(!1), d = A("getExternalPredefinedBlock", Q()), { addCoreBlock: i, addPredefinedBlock: n } = P(), [r] = _(), p = V(
+    async (m) => {
+      if (m.stopPropagation(), F(s, "component")) {
+        i(s, h(r)), t();
+        return;
+      }
+      l(!0);
+      const o = await d(s);
+      y(o) || n(M(o), h(r)), t();
+    },
+    [s]
+  );
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      onClick: c ? () => {
+      } : p,
+      className: "relative cursor-pointer overflow-hidden rounded-md border border-transparent duration-200 hover:scale-x-105 hover:border-foreground/20 hover:shadow-2xl",
+      children: [
+        c && /* @__PURE__ */ e.jsxs("div", { className: "absolute flex h-full w-full items-center justify-center bg-black bg-opacity-70", children: [
+          /* @__PURE__ */ e.jsx(ge, { className: "animate-spin", size: 15, color: "white" }),
+          " ",
+          /* @__PURE__ */ e.jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
+        ] }),
+        s.preview ? /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            src: s.preview,
+            className: "min-h-[50px] w-full rounded-md border border-gray-300",
+            alt: s.label
+          }
+        ) : /* @__PURE__ */ e.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border border-gray-300 bg-gray-200", children: /* @__PURE__ */ e.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: s.label }) })
+      ]
+    }
+  ) });
+}, Ee = () => {
+  const { data: s } = z(), t = G(), c = b(v(t), { category: "custom" }), l = w(c, "group"), d = w(s, "group"), i = U(() => K(l, d, (o, a) => {
+    if (L(o) && L(a))
+      return [...o, ...a];
+  }), [l, d]), [n, r] = g(h(Y(i)) || ""), [, p] = N(S), m = $(i, n, []);
+  return /* @__PURE__ */ e.jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden py-2", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "sticky top-0 flex w-full items-center p-3", children: /* @__PURE__ */ e.jsxs(je, { value: n, onValueChange: (o) => r(o), children: [
+      /* @__PURE__ */ e.jsx(be, { className: "w-full", children: /* @__PURE__ */ e.jsx(ve, { placeholder: "Select a provider" }) }),
+      /* @__PURE__ */ e.jsxs(ye, { children: [
+        /* @__PURE__ */ e.jsx(E, { value: "", children: "Choose" }),
+        k.Children.toArray(
+          T(i, (o, a) => /* @__PURE__ */ e.jsx(E, { value: a, children: a }, a))
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "h-full w-full space-y-2 overflow-y-auto px-2", children: k.Children.toArray(
+      m.map((o) => /* @__PURE__ */ e.jsx(Ie, { block: o, closePopover: () => p(B) }))
+    ) })
+  ] });
+}, Fe = () => {
+  const { t: s } = H(), [t, c] = g(""), { addPredefinedBlock: l } = P(), [d] = _(), [, i] = N(S), n = () => {
+    const r = Pe(t);
+    l([...r], h(d) || null), c(""), i(B);
+  };
+  return /* @__PURE__ */ e.jsxs(ke, { className: "border-border/0 p-0 shadow-none", children: [
+    /* @__PURE__ */ e.jsx(Be, { className: "p-3", children: /* @__PURE__ */ e.jsx(Ne, { children: s("html_snippet_description") }) }),
+    /* @__PURE__ */ e.jsx(Ce, { className: "space-y-2 px-3 py-0", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e.jsx(Se, { htmlFor: "current", className: "text-sm", children: s("tailwind_html_snippet") }),
+      /* @__PURE__ */ e.jsx(
+        we,
+        {
+          autoFocus: !0,
+          tabIndex: 1,
+          ref: (r) => r && r.focus(),
+          onChange: (r) => c(r.target.value),
+          rows: 12,
+          value: t,
+          placeholder: s("enter_code_snippet"),
+          className: "resize-none overflow-x-auto whitespace-pre bg-gray-100 font-mono text-xs font-normal"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e.jsxs(Te, { className: "flex flex-col justify-end p-3", children: [
+      /* @__PURE__ */ e.jsx(me, { disabled: t.trim() === "", onClick: () => n(), size: "sm", className: "w-full", children: s("import_html") }),
+      /* @__PURE__ */ e.jsx(Ae, { variant: "default", className: "mt-2 border-none p-1 text-gray-400", children: /* @__PURE__ */ e.jsx(_e, { className: "text-xs font-normal leading-4", children: s("note_imported_html") }) })
+    ] })
+  ] });
+}, He = Fe, Ts = () => {
+  const { t: s } = H(), [t, c] = g("core"), [l, d] = g("basic"), i = G(), [, n] = N(he), r = A("importHTMLSupport", !0), p = A("filterChaiBlock", () => !0), { data: m, isLoading: o } = z(), a = b(i, p), u = w(a, "category"), f = X(T(u.core, "group"));
+  q(() => {
+    !Z(f, l) && !y(f) && !y(l) && d(h(f));
+  }, [f, l]);
+  const j = !o && !y(m) || ee(v(a), { category: "custom" }) !== void 0;
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex h-full w-72 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1", children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: s("add_block") }),
+      /* @__PURE__ */ e.jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: s(t === "html" ? "enter_paste_tailwind_html" : "click_to_add_block") })
+    ] }),
+    /* @__PURE__ */ e.jsx(
+      ae,
+      {
+        onValueChange: (x) => {
+          n(""), c(x);
+        },
+        value: t,
+        className: "h-max",
+        children: /* @__PURE__ */ e.jsxs(
+          ce,
+          {
+            className: "grid w-full " + (j && r ? "grid-cols-3" : j && !r || !j && r ? "grid-cols-2" : "grid-cols-1"),
+            children: [
+              /* @__PURE__ */ e.jsx(C, { value: "core", children: s("Blocks") }),
+              j ? /* @__PURE__ */ e.jsx(C, { value: "ui-blocks", children: s("ui_library") }) : null,
+              r ? /* @__PURE__ */ e.jsx(C, { value: "html", children: s("import") }) : null
+            ]
+          }
+        )
+      }
+    ),
+    t === "core" && /* @__PURE__ */ e.jsx(le, { className: "-mx-1.5 h-full", children: /* @__PURE__ */ e.jsx("div", { className: "mt-2 w-full", children: k.Children.toArray(
+      T(
+        f,
+        (x) => I(b(v(u.core), { group: x }), { hidden: !0 }).length ? /* @__PURE__ */ e.jsx(se, { type: "single", value: x, collapsible: !0, className: "w-full", children: /* @__PURE__ */ e.jsxs(re, { value: x, children: [
+          /* @__PURE__ */ e.jsx(te, { className: "rounded-md bg-gray-100 px-4 py-2 capitalize", children: x }),
+          /* @__PURE__ */ e.jsx(oe, { className: "p-3", children: /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-3 gap-2", children: k.Children.toArray(
+            I(b(v(u.core), { group: x }), { hidden: !0 }).map((D) => /* @__PURE__ */ e.jsx(Le, { block: D }))
+          ) }) })
+        ] }) }) : null
+      )
+    ) }) }),
+    t === "ui-blocks" && /* @__PURE__ */ e.jsx(J, { fallback: /* @__PURE__ */ e.jsx(pe, { className: "h-32 w-full" }), children: /* @__PURE__ */ e.jsx(Ee, {}) }),
+    t === "html" && r ? /* @__PURE__ */ e.jsx(He, {}) : null
+  ] });
+};
+export {
+  Ts as default
+};

package/dist/AddBlocks-a1c-7Ewz.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-JYMCiFoE.cjs"),l=require("react"),s=require("lodash-es"),q=require("jotai"),T=require("react-i18next"),v=require("./accordion-ynvFtV_p.cjs"),S=require("./scroll-area-FiHvy-TZ.cjs"),y=require("./tabs-_4WbA1cc.cjs"),j=require("./skeleton-STeL9VrJ.cjs"),_=require("@radix-ui/react-icons"),h=require("./ChaiBuilderEditor-m30yoOgJ.cjs"),C=require("./useAddBlock-8pxOEYIl.cjs"),N=require("@chaibuilder/runtime"),I=require("flagged"),B=require("./STRINGS-gPz7CUOk.cjs"),A=require("./useUiLibraries-nCdauJ4N.cjs"),P=require("lucide-react"),R=require("./select-7bjg-rr9.cjs"),p=require("./textarea-1kZEh7ki.cjs"),L=require("./label-tFm8HZdb.cjs"),F=require("./html-to-json-uSnxl72F.cjs");require("@radix-ui/react-accordion");require("./utils-qK_SjzzV.cjs");require("clsx");require("tailwind-merge");require("@radix-ui/react-scroll-area");require("@radix-ui/react-dialog");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("./MODIFIERS-o1p3VnpS.cjs");require("react-dom");require("@floating-ui/react-dom");require("i18next");require("./Functions-Hvon6AMZ.cjs");require("react-hotkeys-hook");require("@react-hookz/web");require("./block-helpers-OKHmRRol.cjs");require("./Controls-ky25Ebo3.cjs");require("@radix-ui/react-select");require("@radix-ui/react-label");require("himalaya");const H=({block:t})=>{const{type:o,icon:a,label:n}=t,{addCoreBlock:x,addPredefinedBlock:u}=C.useAddBlock(),[d,r]=h.useSelectedBlockIds(),[,f]=h.useHighlightBlockId(),[,m]=q.useAtom(h.activePanelAtom),i=()=>{if(s.has(t,"blocks")){const g=s.isFunction(t.blocks)?t.blocks():t.blocks;u(N.syncBlocksWithDefaults(g),s.first(d))}else x(t,s.first(d));m(B.OUTLINE_KEY)},c=I.useFeature("dnd");return e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsxs(j.Tooltip,{children:[e.jsxRuntimeExports.jsx(j.TooltipTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{onClick:i,type:"button",onDragStart:g=>{g.dataTransfer.setData("text/plain",JSON.stringify(s.omit(t,["component","icon"]))),setTimeout(()=>{r([]),f(null),m(B.OUTLINE_KEY)},200)},draggable:c?"true":"false",className:"space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 "+(c?"cursor-grab":"cursor-pointer"),children:[l.createElement(a||_.BoxIcon,{className:"w-4 h-4 mx-auto"}),e.jsxRuntimeExports.jsx("p",{className:"truncate text-xs",children:n||o})]})}),e.jsxRuntimeExports.jsx(j.TooltipContent,{children:e.jsxRuntimeExports.jsx("p",{children:n||o})})]})})},U=({block:t,closePopover:o})=>{const[a,n]=l.useState(!1),x=j.useBuilderProp("getExternalPredefinedBlock",s.noop()),{addCoreBlock:u,addPredefinedBlock:d}=C.useAddBlock(),[r]=h.useSelectedBlockIds(),f=l.useCallback(async m=>{if(m.stopPropagation(),s.has(t,"component")){u(t,s.first(r)),o();return}n(!0);const i=await x(t);s.isEmpty(i)||d(N.syncBlocksWithDefaults(i),s.first(r)),o()},[t]);return e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsxs("div",{onClick:a?()=>{}:f,className:"relative cursor-pointer overflow-hidden rounded-md border border-transparent duration-200 hover:scale-x-105 hover:border-foreground/20 hover:shadow-2xl",children:[a&&e.jsxRuntimeExports.jsxs("div",{className:"absolute flex h-full w-full items-center justify-center bg-black bg-opacity-70",children:[e.jsxRuntimeExports.jsx(P.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.label}):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.label})})]})})},M=()=>{const{data:t}=A.useUILibraryBlocks(),o=N.useChaiBlocks(),a=s.filter(s.values(o),{category:"custom"}),n=s.groupBy(a,"group"),x=s.groupBy(t,"group"),u=l.useMemo(()=>s.mergeWith(n,x,(i,c)=>{if(s.isArray(i)&&s.isArray(c))return[...i,...c]}),[n,x]),[d,r]=l.useState(s.first(s.keys(u))||""),[,f]=q.useAtom(h.activePanelAtom),m=s.get(u,d,[]);return e.jsxRuntimeExports.jsxs("div",{className:"relative flex h-full max-h-full flex-col overflow-hidden py-2",children:[e.jsxRuntimeExports.jsx("div",{className:"sticky top-0 flex w-full items-center p-3",children:e.jsxRuntimeExports.jsxs(R.Select,{value:d,onValueChange:i=>r(i),children:[e.jsxRuntimeExports.jsx(R.SelectTrigger,{className:"w-full",children:e.jsxRuntimeExports.jsx(R.SelectValue,{placeholder:"Select a provider"})}),e.jsxRuntimeExports.jsxs(R.SelectContent,{children:[e.jsxRuntimeExports.jsx(R.SelectItem,{value:"",children:"Choose"}),l.Children.toArray(s.map(u,(i,c)=>e.jsxRuntimeExports.jsx(R.SelectItem,{value:c,children:c},c)))]})]})}),e.jsxRuntimeExports.jsx("div",{className:"h-full w-full space-y-2 overflow-y-auto px-2",children:l.Children.toArray(m.map(i=>e.jsxRuntimeExports.jsx(U,{block:i,closePopover:()=>f(B.OUTLINE_KEY)})))})]})},G=()=>{const{t}=T.useTranslation(),[o,a]=l.useState(""),{addPredefinedBlock:n}=C.useAddBlock(),[x]=h.useSelectedBlockIds(),[,u]=q.useAtom(h.activePanelAtom),d=()=>{const r=F.getBlocksFromHTML(o);n([...r],s.first(x)||null),a(""),u(B.OUTLINE_KEY)};return e.jsxRuntimeExports.jsxs(p.Card,{className:"border-border/0 p-0 shadow-none",children:[e.jsxRuntimeExports.jsx(p.CardHeader,{className:"p-3",children:e.jsxRuntimeExports.jsx(p.CardDescription,{children:t("html_snippet_description")})}),e.jsxRuntimeExports.jsx(p.CardContent,{className:"space-y-2 px-3 py-0",children:e.jsxRuntimeExports.jsxs("div",{className:"space-y-1",children:[e.jsxRuntimeExports.jsx(L.Label,{htmlFor:"current",className:"text-sm",children:t("tailwind_html_snippet")}),e.jsxRuntimeExports.jsx(p.Textarea,{autoFocus:!0,tabIndex:1,ref:r=>r&&r.focus(),onChange:r=>a(r.target.value),rows:12,value:o,placeholder:t("enter_code_snippet"),className:"resize-none overflow-x-auto whitespace-pre bg-gray-100 font-mono text-xs font-normal"})]})}),e.jsxRuntimeExports.jsxs(p.CardFooter,{className:"flex flex-col justify-end p-3",children:[e.jsxRuntimeExports.jsx(j.Button,{disabled:o.trim()==="",onClick:()=>d(),size:"sm",className:"w-full",children:t("import_html")}),e.jsxRuntimeExports.jsx(p.Alert,{variant:"default",className:"mt-2 border-none p-1 text-gray-400",children:e.jsxRuntimeExports.jsx(p.AlertTitle,{className:"text-xs font-normal leading-4",children:t("note_imported_html")})})]})]})},O=G,D=()=>{const{t}=T.useTranslation(),[o,a]=l.useState("core"),[n,x]=l.useState("basic"),u=N.useChaiBlocks(),[,d]=q.useAtom(h.showPredefinedBlockCategoryAtom),r=j.useBuilderProp("importHTMLSupport",!0),f=j.useBuilderProp("filterChaiBlock",()=>!0),{data:m,isLoading:i}=A.useUILibraryBlocks(),c=s.filter(u,f),g=s.groupBy(c,"category"),b=s.uniq(s.map(g.core,"group"));l.useEffect(()=>{!s.includes(b,n)&&!s.isEmpty(b)&&!s.isEmpty(n)&&x(s.first(b))},[b,n]);const k=!i&&!s.isEmpty(m)||s.find(s.values(c),{category:"custom"})!==void 0;return e.jsxRuntimeExports.jsxs("div",{className:"flex h-full w-72 flex-col overflow-hidden",children:[e.jsxRuntimeExports.jsxs("div",{className:"mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1",children:[e.jsxRuntimeExports.jsx("h1",{className:"flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col",children:t("add_block")}),e.jsxRuntimeExports.jsx("span",{className:"p-0 text-xs font-light leading-3 opacity-80 xl:pl-1",children:t(o==="html"?"enter_paste_tailwind_html":"click_to_add_block")})]}),e.jsxRuntimeExports.jsx(y.Tabs,{onValueChange:E=>{d(""),a(E)},value:o,className:"h-max",children:e.jsxRuntimeExports.jsxs(y.TabsList,{className:"grid w-full "+(k&&r?"grid-cols-3":k&&!r||!k&&r?"grid-cols-2":"grid-cols-1"),children:[e.jsxRuntimeExports.jsx(y.TabsTrigger,{value:"core",children:t("Blocks")}),k?e.jsxRuntimeExports.jsx(y.TabsTrigger,{value:"ui-blocks",children:t("ui_library")}):null,r?e.jsxRuntimeExports.jsx(y.TabsTrigger,{value:"html",children:t("import")}):null]})}),o==="core"&&e.jsxRuntimeExports.jsx(S.ScrollArea,{className:"-mx-1.5 h-full",children:e.jsxRuntimeExports.jsx("div",{className:"mt-2 w-full",children:l.Children.toArray(s.map(b,E=>s.reject(s.filter(s.values(g.core),{group:E}),{hidden:!0}).length?e.jsxRuntimeExports.jsx(v.Accordion,{type:"single",value:E,collapsible:!0,className:"w-full",children:e.jsxRuntimeExports.jsxs(v.AccordionItem,{value:E,children:[e.jsxRuntimeExports.jsx(v.AccordionTrigger,{className:"rounded-md bg-gray-100 px-4 py-2 capitalize",children:E}),e.jsxRuntimeExports.jsx(v.AccordionContent,{className:"p-3",children:e.jsxRuntimeExports.jsx("div",{className:"grid grid-cols-3 gap-2",children:l.Children.toArray(s.reject(s.filter(s.values(g.core),{group:E}),{hidden:!0}).map(w=>e.jsxRuntimeExports.jsx(H,{block:w})))})})]})}):null))})}),o==="ui-blocks"&&e.jsxRuntimeExports.jsx(l.Suspense,{fallback:e.jsxRuntimeExports.jsx(j.Skeleton,{className:"h-32 w-full"}),children:e.jsxRuntimeExports.jsx(M,{})}),o==="html"&&r?e.jsxRuntimeExports.jsx(O,{}):null]})};exports.default=D;

package/dist/BrandingOptions-6rnt0UaA.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./jsx-runtime-JYMCiFoE.cjs"),B=require("react"),R=require("@rjsf/validator-ajv8"),E=require("@rjsf/core"),g=require("./ChaiBuilderEditor-m30yoOgJ.cjs");require("react-i18next");const k=require("./skeleton-STeL9VrJ.cjs"),a=require("./controls-L7DPvB0m.cjs"),p=require("lodash-es");require("./MODIFIERS-o1p3VnpS.cjs");require("clsx");require("@radix-ui/react-scroll-area");require("react-dom");require("@floating-ui/react-dom");require("jotai");require("i18next");require("flagged");require("./Functions-Hvon6AMZ.cjs");require("tailwind-merge");require("@radix-ui/react-icons");require("react-hotkeys-hook");require("@react-hookz/web");require("@chaibuilder/runtime");require("@radix-ui/react-slot");require("class-variance-authority");require("./utils-qK_SjzzV.cjs");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");function N(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const l=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,l.get?l:{enumerable:!0,get:()=>t[i]})}}return e.default=t,Object.freeze(e)}const x=N(B),P=({value:t,onChange:e,id:i,onBlur:l})=>{const n=p.debounce(e,200),v=u=>n(u.target.value);return r.jsxRuntimeExports.jsx("div",{className:"mt-1.5 flex items-center gap-x-3",children:r.jsxRuntimeExports.jsx("div",{className:"flex w-3/5 flex-col",children:r.jsxRuntimeExports.jsx("input",{type:"color",className:"text-xs p-0",value:t,onBlur:({target:{value:u}})=>l(i,u),onChange:v})})})},m=[{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"}],D=()=>{const t=k.useBuilderProp("onSaveBrandingOptions",p.noop),[e,i]=g.useBrandingOptions(),[l]=g.useBlocksContainer(),n=x.useRef(e);x.useEffect(()=>()=>{p.isEqual(e,n.current)||t(n.current)},[]);const v=({formData:o},c)=>{c&&(i(o),n.current=o)},{bodyFont:u,headingFont:b,primaryColor:h,bodyTextDarkColor:y,bodyTextLightColor:C,bodyBgDarkColor:S,secondaryColor:q,bodyBgLightColor:O,roundedCorners:j}=e;let s={headingFont:a.s({title:"Heading font",default:b,options:m}),bodyFont:a.s({title:"Body font",default:u,options:m}),roundedCorners:a.c({title:"Rounded Corner",default:parseInt(j||5,10)}),primaryColor:a.f({title:"Primary",default:h}),secondaryColor:a.f({title:"Secondary",default:q})};l||(s={...s,bodyBgLightColor:a.f({title:"Body Background (Light Mode)",default:O}),bodyTextLightColor:a.f({title:"Body Text (Light Mode)",default:y}),bodyBgDarkColor:a.f({title:"Body Background (Dark mode)",default:S}),bodyTextDarkColor:a.f({title:"Body Text (Dark mode)",default:C})});const d={type:"object",properties:{}},f={};return Object.keys(s).forEach(o=>{const c=s[o];return d.properties||(d.properties={}),d.properties[o]=c.schema,f[o]=c.uiSchema,!0}),r.jsxRuntimeExports.jsxs("div",{className:"flex h-full w-60 select-none flex-col",children:[r.jsxRuntimeExports.jsx("div",{className:"rounded-md bg-background/30 p-1",children:r.jsxRuntimeExports.jsx("h1",{className:"px-1 font-semibold",children:"Branding Options"})}),r.jsxRuntimeExports.jsx("div",{className:"-mx-2",children:r.jsxRuntimeExports.jsx(E,{widgets:{color:P},idSeparator:".",autoComplete:"off",omitExtraData:!0,liveOmit:!0,liveValidate:!0,uiSchema:f,schema:d,formData:e,validator:R,onChange:v})})]})};exports.default=D;

package/dist/{BrandingOptions-eUSoIgjj.js → BrandingOptions-iTyWpwTs.js}

@@ -1,54 +1,40 @@
-import { j as t } from "./jsx-runtime-WbnYoNE9.js";
+import { j as t } from "./jsx-runtime-Sp0orL4X.js";
 import * as c from "react";
 import N from "@rjsf/validator-ajv8";
 import j from "@rjsf/core";
-import { h as k, F as w, by as D } from "./index-HD1UKc4P.js";
-import { s as f, c as P, f as a } from "./controls-OfJWSEqC.js";
-import { debounce as R, noop as F, isEqual as L } from "lodash-es";
-import "./_commonjsHelpers-UyOWmZb0.js";
-import "./Functions-7jnEwJyw.js";
+import { h as k, L as w } from "./ChaiBuilderEditor-vP4at00I.js";
+import "react-i18next";
+import { u as D } from "./skeleton-lu8e7q2y.js";
+import { s as f, c as L, f as o } from "./controls-IS5qnRce.js";
+import { debounce as P, noop as R, isEqual as M } from "lodash-es";
+import "./MODIFIERS-CNqNUapY.js";
 import "clsx";
-import "tailwind-merge";
-import "@chaibuilder/runtime";
+import "@radix-ui/react-scroll-area";
+import "react-dom";
+import "@floating-ui/react-dom";
 import "jotai";
-import "./STRINGS--j49GZJP.js";
+import "i18next";
+import "flagged";
+import "./Functions-NzT2Six_.js";
+import "tailwind-merge";
+import "@radix-ui/react-icons";
+import "react-hotkeys-hook";
 import "@react-hookz/web";
-import "./MODIFIERS-dytZ-osO.js";
-import "@radix-ui/react-toggle";
-import "class-variance-authority";
-import "./Class-lGzsNBOK.js";
-import "@radix-ui/react-switch";
+import "@chaibuilder/runtime";
 import "@radix-ui/react-slot";
-import "@radix-ui/react-accordion";
-import "@radix-ui/react-icons";
-import "@radix-ui/react-alert-dialog";
-import "@radix-ui/react-dialog";
-import "@radix-ui/react-label";
-import "@radix-ui/react-scroll-area";
-import "@radix-ui/react-tabs";
+import "class-variance-authority";
+import "./utils-dze1SGvB.js";
 import "@radix-ui/react-tooltip";
-import "@radix-ui/react-popover";
-import "@radix-ui/react-menubar";
-import "@radix-ui/react-hover-card";
-import "@radix-ui/react-select";
-import "@radix-ui/react-dropdown-menu";
-import "@radix-ui/react-separator";
 import "@radix-ui/react-toast";
-import "cmdk";
-import "@radix-ui/react-context-menu";
-import "react-icons-picker";
-import "react-dom";
-import "react-quill";
-import "react-i18next";
-const M = ({ value: u, onChange: e, id: p, onBlur: d }) => {
-  const i = R(e, 200), m = (l) => i(l.target.value);
+const F = ({ value: u, onChange: e, id: d, onBlur: p }) => {
+  const i = P(e, 200), m = (l) => i(l.target.value);
   return /* @__PURE__ */ t.jsx("div", { className: "mt-1.5 flex items-center gap-x-3", children: /* @__PURE__ */ t.jsx("div", { className: "flex w-3/5 flex-col", children: /* @__PURE__ */ t.jsx(
     "input",
     {
       type: "color",
       className: "text-xs p-0",
       value: u,
-      onBlur: ({ target: { value: l } }) => d(p, l),
+      onBlur: ({ target: { value: l } }) => p(d, l),
       onChange: m
     }
   ) }) });
@@ -102,13 +88,13 @@ const M = ({ value: u, onChange: e, id: p, onBlur: d }) => {
   { title: "Lustria", value: "Lustria" },
   { title: "Ovo", value: "Ovo" },
   { title: "Suranna", value: "Suranna" }
-], St = () => {
-  const u = k("onSaveBrandingOptions", F), [e, p] = w(), [d] = D(), i = c.useRef(e);
+], st = () => {
+  const u = D("onSaveBrandingOptions", R), [e, d] = k(), [p] = w(), i = c.useRef(e);
   c.useEffect(() => () => {
-    L(e, i.current) || u(i.current);
+    M(e, i.current) || u(i.current);
   }, []);
-  const m = ({ formData: o }, s) => {
-    s && (p(o), i.current = o);
+  const m = ({ formData: a }, s) => {
+    s && (d(a), i.current = a);
   }, {
     bodyFont: l,
     headingFont: h,
@@ -131,28 +117,28 @@ const M = ({ value: u, onChange: e, id: p, onBlur: d }) => {
       default: l,
       options: g
     }),
-    roundedCorners: P({
+    roundedCorners: L({
       title: "Rounded Corner",
       default: parseInt(O || 5, 10)
     }),
-    primaryColor: a({ title: "Primary", default: x }),
-    secondaryColor: a({ title: "Secondary", default: S })
+    primaryColor: o({ title: "Primary", default: x }),
+    secondaryColor: o({ title: "Secondary", default: S })
   };
-  d || (r = {
+  p || (r = {
     ...r,
-    bodyBgLightColor: a({
+    bodyBgLightColor: o({
       title: "Body Background (Light Mode)",
       default: B
     }),
-    bodyTextLightColor: a({
+    bodyTextLightColor: o({
       title: "Body Text (Light Mode)",
       default: y
     }),
-    bodyBgDarkColor: a({
+    bodyBgDarkColor: o({
       title: "Body Background (Dark mode)",
       default: C
     }),
-    bodyTextDarkColor: a({
+    bodyTextDarkColor: o({
       title: "Body Text (Dark mode)",
       default: b
     })
@@ -161,15 +147,15 @@ const M = ({ value: u, onChange: e, id: p, onBlur: d }) => {
     type: "object",
     properties: {}
   }, v = {};
-  return Object.keys(r).forEach((o) => {
-    const s = r[o];
-    return n.properties || (n.properties = {}), n.properties[o] = s.schema, v[o] = s.uiSchema, !0;
+  return Object.keys(r).forEach((a) => {
+    const s = r[a];
+    return n.properties || (n.properties = {}), n.properties[a] = s.schema, v[a] = s.uiSchema, !0;
   }), /* @__PURE__ */ t.jsxs("div", { className: "flex h-full w-60 select-none flex-col", children: [
     /* @__PURE__ */ t.jsx("div", { className: "rounded-md bg-background/30 p-1", children: /* @__PURE__ */ t.jsx("h1", { className: "px-1 font-semibold", children: "Branding Options" }) }),
     /* @__PURE__ */ t.jsx("div", { className: "-mx-2", children: /* @__PURE__ */ t.jsx(
       j,
       {
-        widgets: { color: M },
+        widgets: { color: F },
         idSeparator: ".",
         autoComplete: "off",
         omitExtraData: !0,
@@ -185,5 +171,5 @@ const M = ({ value: u, onChange: e, id: p, onBlur: d }) => {
   ] });
 };
 export {
-  St as default
+  st as default
 };

package/dist/CanvasArea-R4ogF9AT.cjs

@@ -0,0 +1,55 @@
+"use strict";var pe=Object.defineProperty;var xe=(e,t,s)=>t in e?pe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s;var M=(e,t,s)=>(xe(e,typeof t!="symbol"?t+"":t,s),s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./jsx-runtime-JYMCiFoE.cjs"),p=require("react"),a=require("lodash-es"),w=require("@radix-ui/react-icons"),S=require("./skeleton-STeL9VrJ.cjs"),u=require("./ChaiBuilderEditor-m30yoOgJ.cjs"),F=require("./separator-3Civ-6hb.cjs"),U=require("react-i18next"),P=require("./useDarkMode-7i57segK.cjs"),H=require("./hover-card-KUwpDkW8.cjs"),me=require("./label-tFm8HZdb.cjs"),N=require("./dropdown-menu-SiHzqWwZ.cjs"),V=require("./useSelectedBreakpoints-7ONXb-vN.cjs"),D=require("./alert-dialog-P9xMMB6C.cjs"),B=require("jotai"),ge=require("./useUpdateBlocksProps-Unn8lUyj.cjs"),he=require("react-quill"),fe=require("./useAddBlock-8pxOEYIl.cjs"),se=require("flagged"),je=require("@floating-ui/dom"),G=require("@floating-ui/react-dom"),Q=require("./block-helpers-OKHmRRol.cjs"),ye=require("@react-hookz/web"),Ee=require("@bobthered/tailwindcss-palette-generator"),ke=require("@tailwindcss/typography"),ve=require("@tailwindcss/forms"),be=require("@tailwindcss/aspect-ratio"),Re=require("react-wrap-balancer"),we=require("tailwind-merge"),O=require("./STRINGS-gPz7CUOk.cjs"),ne=require("@chaibuilder/runtime"),oe=require("./useChaiExternalData-rwoAZ6uU.cjs"),J=require("react-dom"),R=require("prop-types");require("@radix-ui/react-slot");require("class-variance-authority");require("./utils-qK_SjzzV.cjs");require("clsx");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");require("./MODIFIERS-o1p3VnpS.cjs");require("@radix-ui/react-scroll-area");require("i18next");require("./Functions-Hvon6AMZ.cjs");require("react-hotkeys-hook");require("@radix-ui/react-separator");require("@radix-ui/react-switch");require("@radix-ui/react-hover-card");require("@radix-ui/react-label");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-alert-dialog");require("./Controls-ky25Ebo3.cjs");const Be=()=>p.useMemo(()=>ne.getChaiDataProviders(),[]),Se=({children:e})=>{const[,t]=oe.useChaiExternalData(),[s]=u.usePageDataProviders(),l=Be();return p.useEffect(()=>(t({}),a.each(s,r=>{const i=a.find(l,{providerKey:r.providerKey});if(i){const d=(i==null?void 0:i.mockFn)||(i==null?void 0:i.dataFn);d&&d(r.args).then(o=>t(c=>({...c,[r.providerKey]:o})))}}),()=>{a.each(s,r=>{t(i=>(delete i[r.providerKey],i))})}),[l,s,t]),n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:e})},Ce=()=>{const{hasUndo:e,hasRedo:t,undo:s,redo:l}=u.useUndoManager();return n.jsxRuntimeExports.jsxs("div",{className:"flex items-center",children:[n.jsxRuntimeExports.jsx(S.Button,{disabled:!e(),size:"sm",onClick:s,className:"rounded-full",variant:"ghost",children:n.jsxRuntimeExports.jsx(w.ResetIcon,{})}),n.jsxRuntimeExports.jsx(S.Button,{disabled:!t(),onClick:l,size:"sm",className:"rounded-full",variant:"ghost",children:n.jsxRuntimeExports.jsx(w.ResetIcon,{className:"rotate-180 scale-y-[-1] transform"})})]})};function Ie(){const[e,t]=P.useDarkMode(),{t:s}=U.useTranslation();return n.jsxRuntimeExports.jsxs("div",{className:"flex items-center",children:[n.jsxRuntimeExports.jsx(me.Label,{htmlFor:"dark-mode-switch",children:s("dark_mode")}),n.jsxRuntimeExports.jsxs(H.Switch,{id:"dark-mode-switch",checked:e,onCheckedChange:()=>{t(!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:[n.jsxRuntimeExports.jsx("span",{className:"sr-only",children:s("use_setting")}),n.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 X=({landscape:e=!1})=>n.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:[n.jsxRuntimeExports.jsx("g",{strokeWidth:0}),n.jsxRuntimeExports.jsx("g",{strokeLinecap:"round",strokeLinejoin:"round"}),n.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"}})]}),De=[{title:"mobile_xs_title",content:"mobile_xs_content",breakpoint:"xs",icon:n.jsxRuntimeExports.jsx(w.MobileIcon,{}),width:400},{title:"mobile_sm_title",content:"mobile_sm_content",breakpoint:"sm",icon:n.jsxRuntimeExports.jsx(w.MobileIcon,{className:"rotate-90"}),width:640},{title:"tablet_md_title",content:"tablet_md_content",breakpoint:"md",icon:n.jsxRuntimeExports.jsx(X,{}),width:800},{title:"tablet_lg_title",content:"tablet_lg_content",breakpoint:"lg",icon:n.jsxRuntimeExports.jsx(X,{landscape:!0}),width:1024},{title:"desktop_xl_title",content:"desktop_xl_content",breakpoint:"xl",icon:n.jsxRuntimeExports.jsx(w.LaptopIcon,{}),width:1420},{title:"large_desktop_2xl_title",content:"large_desktop_2xl_content",breakpoint:"2xl",icon:n.jsxRuntimeExports.jsx(w.DesktopIcon,{}),width:1920}],ee=({title:e,content:t,currentBreakpoint:s,breakpoint:l,width:r,icon:i,onClick:d})=>{const{t:o}=U.useTranslation();return n.jsxRuntimeExports.jsxs(H.HoverCard,{children:[n.jsxRuntimeExports.jsx(H.HoverCardTrigger,{asChild:!0,children:n.jsxRuntimeExports.jsx(S.Button,{onClick:()=>d(r),size:"sm",variant:l===s?"secondary":"ghost",children:i})}),n.jsxRuntimeExports.jsx(H.HoverCardContent,{className:"w-52 border-border",children:n.jsxRuntimeExports.jsx("div",{className:"flex justify-between space-x-4",children:n.jsxRuntimeExports.jsxs("div",{className:"space-y-1",children:[n.jsxRuntimeExports.jsx("h4",{className:"text-sm font-semibold",children:o(e)}),n.jsxRuntimeExports.jsx("p",{className:"text-xs",children:o(t)})]})})})]})},Ae=()=>{const[,e,t]=P.useCanvasWidth(),[s,l]=V.useSelectedBreakpoints(),{t:r}=U.useTranslation(),i=S.useBuilderProp("breakpoints",De),d=o=>{s.includes(o)?s.length>2&&l(s.filter(c=>c!==o)):l(c=>[...c,o])};return i.length<4?n.jsxRuntimeExports.jsx("div",{className:"flex items-center rounded-md",children:a.map(i,o=>p.createElement(ee,{...o,onClick:t,key:o.breakpoint,currentBreakpoint:e}))}):n.jsxRuntimeExports.jsxs("div",{className:"flex items-center rounded-md",children:[a.map(i.filter(o=>a.includes(s,a.toUpper(o.breakpoint))),o=>p.createElement(ee,{...o,onClick:t,key:o.breakpoint,currentBreakpoint:e})),n.jsxRuntimeExports.jsxs(N.DropdownMenu,{children:[n.jsxRuntimeExports.jsx(N.DropdownMenuTrigger,{asChild:!0,children:n.jsxRuntimeExports.jsx("span",{className:"cursor-pointer px-2.5 hover:opacity-80",children:n.jsxRuntimeExports.jsx(w.DotsVerticalIcon,{className:"scale-90 transform"})})}),n.jsxRuntimeExports.jsxs(N.DropdownMenuContent,{className:"w-56 border-border text-xs",children:[n.jsxRuntimeExports.jsx(N.DropdownMenuLabel,{children:r("Breakpoints")}),n.jsxRuntimeExports.jsx(N.DropdownMenuSeparator,{}),a.map(i,o=>n.jsxRuntimeExports.jsx(N.DropdownMenuCheckboxItem,{disabled:o.breakpoint==="xs",onCheckedChange:()=>d(a.toUpper(o.breakpoint)),checked:a.includes(s,a.toUpper(o.breakpoint)),children:r(o.title)},o.breakpoint))]})]})]})},_e=()=>{const{t:e}=U.useTranslation(),{setNewBlocks:t}=u.useBlocksStoreUndoableActions(),[,s]=u.useSelectedBlockIds(),[,l]=u.useSelectedStylingBlocks(),r=p.useCallback(()=>{t([]),s([]),l([])},[t]);return n.jsxRuntimeExports.jsx("div",{className:"flex items-center",children:n.jsxRuntimeExports.jsxs(D.AlertDialog,{children:[n.jsxRuntimeExports.jsx(D.AlertDialogTrigger,{asChild:!0,children:n.jsxRuntimeExports.jsxs(S.Button,{size:"sm",variant:"ghost",className:"flex items-center gap-x-1",children:[n.jsxRuntimeExports.jsx(w.EraserIcon,{})," ",e("clear")]})}),n.jsxRuntimeExports.jsxs(D.AlertDialogContent,{className:"border-border",children:[n.jsxRuntimeExports.jsxs(D.AlertDialogHeader,{children:[n.jsxRuntimeExports.jsx(D.AlertDialogTitle,{children:e("clear_canvas_title")}),n.jsxRuntimeExports.jsx(D.AlertDialogDescription,{children:e("clear_canvas_description")})]}),n.jsxRuntimeExports.jsxs(D.AlertDialogFooter,{children:[n.jsxRuntimeExports.jsx(D.AlertDialogCancel,{children:e("cancel")}),n.jsxRuntimeExports.jsx(D.AlertDialogAction,{onClick:r,children:e("yes")})]})]})]})})},Me=()=>{const e=S.useBuilderProp("darkMode",!1),[t]=V.useCanvasZoom();return n.jsxRuntimeExports.jsxs("div",{className:"flex h-10 items-center justify-between border-b bg-background/70 px-2",children:[n.jsxRuntimeExports.jsxs("div",{className:"flex h-full space-x-2",children:[e?n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(Ie,{}),n.jsxRuntimeExports.jsx(F.Separator,{orientation:"vertical"})]}):null,n.jsxRuntimeExports.jsx(Ae,{}),n.jsxRuntimeExports.jsx(F.Separator,{orientation:"vertical"}),n.jsxRuntimeExports.jsxs("div",{className:"flex w-12 items-center justify-center gap-x-1 space-x-0 font-medium",children:[n.jsxRuntimeExports.jsx(w.ZoomInIcon,{className:"h-3.5 w-3.5 flex-shrink-0"})," ",n.jsxRuntimeExports.jsxs("div",{className:"text-xs leading-3",children:[a.round(t,0),"%"]})]}),n.jsxRuntimeExports.jsx(F.Separator,{orientation:"vertical"}),n.jsxRuntimeExports.jsx(Ce,{})]}),n.jsxRuntimeExports.jsxs("div",{className:"flex h-full items-center space-x-2",children:[n.jsxRuntimeExports.jsx(F.Separator,{orientation:"vertical"}),n.jsxRuntimeExports.jsx(_e,{})]})]})},Te=`<!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://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%; }
+    </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>`,Ne=e=>{const[t]=P.useCanvasWidth(),[,s]=V.useCanvasZoom(),[l,r]=p.useState({}),i=p.useCallback(()=>{const{width:d,height:o}=e;if(d<t){const c=parseFloat((d/t).toFixed(2).toString());let x={};const m=o*c;o&&(x={height:100+(o-m)/m*100+"%"}),r({position:"relative",top:0,transform:`scale(${c})`,transformOrigin:"top left",...x,maxWidth:"none"}),s(c*100)}else r({}),s(100)},[t,e,s]);return p.useEffect(()=>{i()},[t,e,s,i]),l};let ie,re;typeof document<"u"&&(ie=document);typeof window<"u"&&(re=window);const le=p.createContext({document:ie,window:re}),z=()=>p.useContext(le),{Provider:qe,Consumer:dt}=le;class ae extends p.Component{componentDidMount(){this.props.contentDidMount()}componentDidUpdate(){this.props.contentDidUpdate()}render(){return p.Children.only(this.props.children)}}M(ae,"propTypes",{children:R.element.isRequired,contentDidMount:R.func.isRequired,contentDidUpdate:R.func.isRequired});class K extends p.Component{constructor(s,l){super(s,l);M(this,"setRef",s=>{this.nodeRef.current=s;const{forwardedRef:l}=this.props;typeof l=="function"?l(s):l&&(l.current=s)});M(this,"handleLoad",()=>{clearInterval(this.loadCheck),this.state.iframeLoaded||this.setState({iframeLoaded:!0})});M(this,"loadCheck",()=>setInterval(()=>{this.handleLoad()},500));this._isMounted=!1,this.nodeRef=p.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 s=this.getDoc();return this.props.mountTarget?s.querySelector(this.props.mountTarget):s.body.children[0]}renderFrameContents(){if(!this._isMounted)return null;const s=this.getDoc();if(!s)return null;const l=this.props.contentDidMount,r=this.props.contentDidUpdate,i=s.defaultView||s.parentView,d=n.jsxRuntimeExports.jsx(ae,{contentDidMount:l,contentDidUpdate:r,children:n.jsxRuntimeExports.jsx(qe,{value:{document:s,window:i},children:n.jsxRuntimeExports.jsx("div",{className:"frame-content",children:this.props.children})})}),o=this.getMountTarget();return[J.createPortal(this.props.head,this.getDoc().head),J.createPortal(d,o)]}render(){const s={...this.props,srcDoc:this.props.initialContent,children:void 0};return delete s.head,delete s.initialContent,delete s.mountTarget,delete s.contentDidMount,delete s.contentDidUpdate,delete s.forwardedRef,n.jsxRuntimeExports.jsx("iframe",{...s,ref:this.setRef,onLoad:this.handleLoad,children:this.state.iframeLoaded&&this.renderFrameContents()})}}M(K,"propTypes",{style:R.object,head:R.node,initialContent:R.string,mountTarget:R.string,contentDidMount:R.func,contentDidUpdate:R.func,children:R.oneOfType([R.element,R.arrayOf(R.element)])}),M(K,"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 Le=p.forwardRef((e,t)=>n.jsxRuntimeExports.jsx(K,{...e,forwardedRef:t})),Pe=()=>{const{addCoreBlock:e}=fe.useAddBlock(),t=S.useBuilderProp("getExternalPredefinedBlock",a.noop);return p.useCallback(async s=>{const{block:l,dropTargetId:r,relativeIndex:i}=s;if(a.has(l,"format")){const d=await t(l);return e({blocks:d},r===0?null:r,i)}return e(l,r===0?null:r,i)},[e])};let A=null,L=[],q=null,ce=null;function $e(e){const t=window.getComputedStyle(e),s=parseInt(t.paddingLeft,10),l=parseInt(t.paddingTop,10),r=parseInt(t.paddingRight,10),i=parseInt(t.paddingBottom,10);return{paddingLeft:s,paddingTop:l,paddingRight:r,paddingBottom:i}}const te=(e,t,s)=>{if(!A)return;const l=e.getBoundingClientRect(),r=A==null?void 0:A.getElementById("placeholder"),{paddingLeft:i,paddingTop:d,paddingRight:o,paddingBottom:c}=$e(e);r.style.width=t==="vertical"?l.width-i-o+"px":"2px",r.style.height=t==="vertical"?"2px":l.height-d-c+"px",r.style.display="block";const x=L.reduce((m,f)=>Math.abs(f-s)<Math.abs(m-s)?f:m);ce=L.indexOf(x),t==="vertical"?(r.style.top=e.offsetTop+x+"px",r.style.left=e.offsetLeft+i+"px"):(r.style.top=e.offsetTop+d+"px",r.style.left=e.offsetLeft+x+"px")},Fe=e=>{const t=de(e),s=window.getComputedStyle(e),l=t==="horizontal",r=parseInt(s.paddingLeft),i=parseInt(s.paddingTop);let d=l?r:i;L=[d],Array.from(e.children).forEach(o=>{const c=window.getComputedStyle(o),x=parseInt(l?c.marginLeft+c.marginRight:c.marginTop+c.marginBottom),m=l?o.offsetWidth:o.offsetHeight;L.push(d+m+x),d+=m+x})};function de(e){const t=window.getComputedStyle(e).display,s=window.getComputedStyle(e).flexDirection;if(t==="flex")return s==="column"||s==="column-reverse"?"vertical":"horizontal";if(t==="grid"){const l=window.getComputedStyle(e).gridTemplateRows,r=window.getComputedStyle(e).gridTemplateColumns;if(l.includes("auto"))return"vertical";if(r.includes("auto"))return"horizontal"}return t==="block"?"vertical":"horizontal"}const He=a.throttle(e=>{const t=e.target,s=de(t);if(s==="vertical"){const l=e.clientY-t.offsetTop;te(t,s,l)}else{const l=e.clientX-t.offsetLeft;te(t,s,l)}},200),Oe=e=>{e.preventDefault(),e.stopPropagation(),He(e)};function W(){const e=A==null?void 0:A.getElementById("placeholder");e.style.display="none"}const Ue=()=>{const{document:e}=z(),[t,s]=B.useAtom(u.draggingFlagAtom),l=Pe(),r=se.useFeature("dnd"),[,i]=u.useHighlightBlockId(),[,d]=u.useSelectedBlockIds();return A=e,{isDragging:t,"data-dnd":"branch",onDragOver:r?Oe:a.noop,onDrop:r?o=>{q==null||q.classList.remove("outline","outline-green-300","outline-2","-outline-offset-2");const c=JSON.parse(o.dataTransfer.getData("text/plain"));let x=o.target.getAttribute("data-block-id");x===null&&(x=o.target.parentElement.getAttribute("data-block-id")),l({block:c,dropTargetId:x||null,relativeIndex:ce}),s(!1),W(),setTimeout(()=>{W()},300)}:a.noop,onDragEnter:r?o=>{const c=o;q=c.target,c.stopPropagation(),c.preventDefault(),L=[];const x=c.target;Fe(x),x.classList.add("outline","outline-green-300","outline-2","-outline-offset-2"),s(!0),i(""),d([])}:a.noop,onDragLeave:r?o=>{const c=o;q=null,c.stopPropagation(),c.preventDefault(),c.target.classList.remove("outline","outline-green-300","outline-2","-outline-offset-2")}:a.noop,onMouseOut:r?()=>{s(!1),W()}:a.noop}};function Z(e){return e.getAttribute("data-block-id")?e:e.closest("[data-block-id]")}function ze(e){e.container.innerHTML="",e.container.parentNode.removeChild(e.container);var t=document.querySelector(".ql-toolbar");t&&t.parentNode.removeChild(t),e=null}const We=()=>{const e=["Heading","Paragraph","Text","Link","Span","Button"],t=ge.useUpdateBlocksProps(),[,s]=u.useHighlightBlockId(),[l,r]=B.useAtom(u.inlineEditingActiveAtom);return i=>{var f;if(l)return;const d=Z(i.target),o=d.getAttribute("data-block-type");if(!o||!e.includes(o))return;const c=d.cloneNode(!0);d.style.display="none",Array.from(c.attributes).forEach(j=>{j.name!=="class"&&c.removeAttribute(j.name)}),o==="Text"&&(c.style.display="inline-block"),d.parentNode.insertBefore(c,d.nextSibling);const x=new he.Quill(c,{placeholder:"Type here..."});function m(){const j=x.getText(0,x.getLength());t([d.getAttribute("data-block-id")],{content:j}),d.removeAttribute("style"),c.removeEventListener("blur",m,!0),ze(x),r(""),s("")}c.addEventListener("blur",m,!0),x.focus(),(f=c.querySelector(".ql-clipboard"))==null||f.remove(),r(d.getAttribute("data-block-id"))}},Ke=()=>{const[,e]=u.useSelectedStylingBlocks(),[,t]=u.useSelectedBlockIds(),[,s]=u.useHighlightBlockId(),[l]=B.useAtom(u.inlineEditingActiveAtom);return r=>{if(l)return;r.stopPropagation();const i=Z(r.target);if(i!=null&&i.getAttribute("data-block-id")&&(i==null?void 0:i.getAttribute("data-block-id"))==="container"){t([]),e([]),s("");return}if(i!=null&&i.getAttribute("data-block-parent")){const d=i.getAttribute("data-style-prop"),o=i.getAttribute("data-style-id"),c=i.getAttribute("data-block-parent");e([{id:o,prop:d,blockId:c}]),t([c])}else i!=null&&i.getAttribute("data-block-id")&&t([i.getAttribute("data-block-id")]);s("")}},Ye=a.throttle((e,t)=>{const s=Z(e.target);s!=null&&s.getAttribute("data-style-id")&&t(s.getAttribute("data-style-id"))},100),Ve=()=>{const[,e]=u.useHighlightBlockId(),[t]=B.useAtom(u.inlineEditingActiveAtom);return s=>{t||Ye(s,e)}},Ze=({children:e})=>{const{document:t}=z(),[s]=u.useSelectedBlockIds(),[l,r]=u.useSelectedStylingBlocks();p.useEffect(()=>{setTimeout(()=>{if(!a.isEmpty(l))return;const x=ue(t,a.first(s));if(x){const m=x.getAttribute("data-style-prop");if(m){const f=x.getAttribute("data-style-id"),j=x.getAttribute("data-block-parent");r([{id:f,prop:m,blockId:j}])}}},100)},[t,s,r,l]);const i=We(),d=Ke(),o=Ve(),c=Ue();return n.jsxRuntimeExports.jsx("div",{"data-block-id":"container",id:"canvas",onClick:d,onDoubleClick:i,onMouseMove:o,...a.omit(c,"isDragging"),className:"relative mb-5 h-full max-w-full "+(c.isDragging?"dragging":""),children:e})},ue=(e,t)=>e.querySelector(`[data-block-id="${t}"]`),Ge=()=>{const{window:e}=z(),[t,s]=u.useSelectedBlockIds(),[l]=u.useBlocksStore(),[,r]=u.useSelectedStylingBlocks(),{undo:i,redo:d}=u.useUndoManager(),o=u.useDuplicateBlocks(),[,c]=u.usePreviewMode(),x=u.useRemoveBlocks(),{savePage:m}=u.useSavePage(),[f]=B.useAtom(u.inlineEditingActiveAtom),[,j]=B.useAtom(u.editLayerNameAtom),b=y=>{y.key==="Enter"&&(y.preventDefault(),t.length===1&&j(a.first(t)))},C=y=>{const h=l.find(v=>v._id===y);return h?h._parent:null};return p.useEffect(()=>{const y=h=>{if(h.key==="Escape"){s([]),r([]);return}if(b(h),!f&&(h.key==="Delete"||h.key==="Backspace")&&(h.preventDefault(),x(t)),h.ctrlKey||h.metaKey){if(h.key==="ArrowUp"){h.preventDefault();const v=t.length>0?C(t[0]):null;v&&s([v])}if(["z","y","d","x","c","p","s","v"].includes(h.key)){if(f&&["x","z","v"].includes(h.key))return!0;h.preventDefault()}h.key==="s"&&(h.stopPropagation(),h.preventDefault(),m()),h.key==="z"&&i(),h.key==="y"&&d(),h.key==="d"&&o(t)}};return e.removeEventListener("keydown",y),e.addEventListener("keydown",y),()=>{e.removeEventListener("keydown",y)}},[t,s,i,x,c,d,o,f,m,e]),null},Qe=({block:e,label:t})=>{const[,s]=u.useSelectedBlockIds(),[,l]=u.useHighlightBlockId(),[,r]=B.useAtom(u.draggedBlockIdAtom),i=se.useFeature("dnd");return n.jsxRuntimeExports.jsxs("div",{className:"mr-10 flex cursor-grab items-center space-x-1 px-1",draggable:i?"true":"false",onDragStart:d=>{d.dataTransfer.setData("text/plain",JSON.stringify(a.pick(e,["_id","_type"]))),r(e._id),setTimeout(()=>{s([]),l(null)},200)},children:[n.jsxRuntimeExports.jsx(w.DragHandleDots2Icon,{}),t]})},Je=({selectedBlockElement:e,block:t})=>{const s=u.useRemoveBlocks(),l=u.useDuplicateBlocks(),[,r]=u.useSelectedBlockIds(),[,i]=u.useSelectedStylingBlocks(),[d]=B.useAtom(u.inlineEditingActiveAtom),{floatingStyles:o,refs:c,update:x}=G.useFloating({placement:"top-start",middleware:[G.shift(),je.flip()],elements:{reference:e}});ye.useResizeObserver(e,()=>x(),e!==null);const m=a.get(t,"_parent",null),f=a.isEmpty(a.get(t,"_name",""))?a.get(t,"_type",""):a.get(t,"_name","");return!e||!t||d?null:n.jsxRuntimeExports.jsxs("div",{role:"button",tabIndex:0,ref:c.setFloating,style:o,onClick:j=>{j.stopPropagation(),j.preventDefault()},onKeyDown:j=>j.stopPropagation(),className:"z-[99999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",children:[n.jsxRuntimeExports.jsx(Qe,{label:f,block:t}),n.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 px-1",children:[m&&n.jsxRuntimeExports.jsx(w.ArrowUpIcon,{className:"hover:scale-105",onClick:()=>{i([]),r([m])}}),Q.canDuplicateBlock(a.get(t,"_type",""))?n.jsxRuntimeExports.jsx(w.CopyIcon,{className:"hover:scale-105",onClick:()=>l([t==null?void 0:t._id])}):null,Q.canDeleteBlock(a.get(t,"_type",""))?n.jsxRuntimeExports.jsx(w.TrashIcon,{className:"hover:scale-105",onClick:()=>s([t==null?void 0:t._id])}):null]})]})},Xe=({model:e})=>{const[t]=u.useBrandingOptions(),[s]=u.useSelectedBlockIds(),[l]=P.useDarkMode(),[r]=u.useHighlightBlockId(),[i]=u.useSelectedStylingBlocks(),[d]=B.useAtom(u.draggedBlockIdAtom),{document:o,window:c}=z(),[x]=p.useState(o==null?void 0:o.getElementById("highlighted-block")),[m]=p.useState(o==null?void 0:o.getElementById("selected-block")),[f]=p.useState(o==null?void 0:o.getElementById("selected-styling-block")),[j]=p.useState(o==null?void 0:o.getElementById("dragged-block"));p.useEffect(()=>{l?o==null||o.documentElement.classList.add("dark"):o==null||o.documentElement.classList.remove("dark")},[l,o]);const b=a.get(t,"headingFont","DM Sans"),C=a.get(t,"bodyFont","DM Sans");return p.useEffect(()=>{const y=a.get(t,"primaryColor","#000"),h=a.get(t,"secondaryColor","#FFF"),v=Ee.tailwindcssPaletteGenerator({colors:[y,h],names:["primary","secondary"]});v.primary.DEFAULT=y,v.secondary.DEFAULT=h;const T=a.get(t,"roundedCorners","0");!c||!c.tailwind||(c.tailwind.config={darkMode:"class",theme:{fontFamily:{heading:[b],body:[C]},extend:{borderRadius:{global:`${T||"0"}px`},colors:v}},plugins:[ke,ve,be,c.tailwind.plugin.withOptions(()=>({addVariant:$,e:I})=>{$("hs-accordion-active",[({modifySelectors:k,separator:g})=>{k(({className:E})=>`.hs-accordion.active.${I(`hs-accordion-active${g}${E}`)}`)},({modifySelectors:k,separator:g})=>{k(({className:E})=>`.hs-accordion.active > .${I(`hs-accordion-active${g}${E}`)}`)},({modifySelectors:k,separator:g})=>{k(({className:E})=>`.hs-accordion.active > .hs-accordion-toggle .${I(`hs-accordion-active${g}${E}`)}`)},({modifySelectors:k,separator:g})=>{k(({className:E})=>`.hs-accordion.active > .hs-accordion-heading > .hs-accordion-toggle .${I(`hs-accordion-active${g}${E}`)}`)},({modifySelectors:k,separator:g})=>{k(({className:E})=>`.hs-accordion.active > .hs-accordion-toggle.${I(`hs-accordion-active${g}${E}`)}`)},({modifySelectors:k,separator:g})=>{k(({className:E})=>`.hs-accordion.active > .hs-accordion-heading > .hs-accordion-toggle.${I(`hs-accordion-active${g}${E}`)}`)}]),$("hs-accordion-selected",({modifySelectors:k,separator:g})=>{k(({className:E})=>`.hs-accordion .selected.${I(`hs-accordion-selected${g}${E}`)}`)})})]})},[t,c,b,C]),p.useEffect(()=>{m&&(m.textContent=`${a.map(s,y=>`[data-block-id="${y}"]`).join(",")}{
+                outline: 1px solid ${s.length===1?"#42a1fc":"orange"} !important; outline-offset: -1px;
+            }`)},[s,m]),p.useEffect(()=>{if(!d){j.textContent="";return}j.textContent=`[data-block-id="${d}"]{ pointer-events: none !important; opacity: 0.2 !important}`},[d]),p.useEffect(()=>{x&&(x.textContent=r?`[data-style-id="${r}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}`:"")},[r,s,x]),p.useEffect(()=>{f&&(f.textContent=`${a.map(i,({id:y})=>`[data-style-id="${y}"]`).join(",")}{
+                outline: 1px solid #42a1fc !important; outline-offset: -1px;
+            }`)},[i,f]),p.useEffect(()=>{const y=a.get(t,"bodyTextLightColor","#64748b"),h=a.get(t,"bodyTextDarkColor","#94a3b8"),v=a.get(t,"bodyBgLightColor","#FFFFFF"),T=a.get(t,"bodyBgDarkColor","#0f172a");o.body.className=`font-body antialiased text-[${y}] bg-[${v}] dark:text-[${h}] dark:bg-[${T}]`},[t,o,e]),e==="page"?n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[b&&n.jsxRuntimeExports.jsx("link",{id:"heading-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"}),C&&b!==C&&n.jsxRuntimeExports.jsx("link",{id:"body-font",rel:"stylesheet",type:"text/css",href:`https://fonts.googleapis.com/css2?family=${C.replace(/ /g,"+")}:wght@300;400;500;600;700;800;900&display=swap`,media:"all"}),b&&n.jsxRuntimeExports.jsx("style",{children:`h1,h2,h3,h4,h5,h6{font-family: "${b}",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},et=e=>{const t={};return Object.keys(e).forEach(s=>{a.isString(e[s])&&e[s].startsWith(O.SLOT_KEY)&&(t[s]=e[s].replace(O.SLOT_KEY,"").split(","))}),t},tt=a.memoize(e=>{const t=e.replace(O.STYLES_KEY,"").split(",");return we.twMerge(t[0],t[1])});function st(e,t){return a.get(e,`${t}_attrs`,{})}function nt(e){const t={};return Object.keys(e).forEach(s=>{if(a.isString(e[s])&&e[s].startsWith(O.STYLES_KEY)){const l=tt(e[s]);t[s]={className:l,"data-style-prop":s,"data-block-parent":e._id,"data-style-id":`${s}-${e._id}`,...st(e,s)}}}),t}function ot(e,t){const s=a.get(e,"_bindings",{});return a.isEmpty(s)?{...e}:(a.each(s,(l,r)=>{a.isString(l)&&a.get(t,l,null)&&(e[r]=a.get(t,l,null))}),e)}function Y({blocks:e}){const[t]=u.useBlocksStore(),s=p.useCallback(i=>nt(i),[]),[l]=oe.useChaiExternalData(),[r]=B.useAtom(u.inlineEditingActiveAtom);return n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:p.Children.toArray(e.map((i,d)=>{if(r===i._id)return null;const o=et(i),c={};a.isEmpty(o)||Object.keys(o).forEach(j=>{c[j]=p.Children.toArray(o[j].map(b=>n.jsxRuntimeExports.jsx(Y,{blocks:[a.find(t,{_id:b})]})))});const x=a.filter(t,{_parent:i._id});c.children=x.length?n.jsxRuntimeExports.jsx(Y,{blocks:x}):null;const m=ne.getBlockComponent(i._type),f=a.get(m,"builderComponent",a.get(m,"component",null));return a.isNull(f)?n.jsxRuntimeExports.jsx("noscript",{children:`<!-- ${i==null?void 0:i._type} not registered -->`}):n.jsxRuntimeExports.jsx(p.Suspense,{children:p.createElement(f,{blockProps:{"data-block-id":i._id,"data-block-type":i._type,"data-dnd":a.has(m,"canAcceptBlock")?"branch":"leaf"},inBuilder:!0,index:d,...ot(i,l),...s(i),...c})})}))})}const it=()=>{const[e]=u.useBlocksStore(),t=a.isEmpty(e)?null:n.jsxRuntimeExports.jsx(Se,{children:n.jsxRuntimeExports.jsx(Y,{blocks:a.filter(e,s=>a.isEmpty(s._parent))})});return n.jsxRuntimeExports.jsx(Re.Provider,{children:t})},rt=(e,t)=>e.querySelector(`[data-style-id="${t}"]`),lt=()=>{const[e]=B.useAtom(u.networkModeAtom),[t]=u.usePreviewMode(),[s]=P.useCanvasWidth(),[,l]=u.useSelectedBlockIds(),r=u.useSelectedBlock(),[,i]=u.useHighlightBlockId(),d=p.useRef(null),o=p.useRef(null),[c,x]=p.useState({width:0,height:0}),m=Ne(c),[f,j]=p.useState(0),[b,C]=p.useState([]),[,y]=p.useState([]),[,h]=B.useAtom(u.canvasIframeAtom),[v,T]=u.useSelectedStylingBlocks(),$=S.useBuilderProp("loading",!1);p.useEffect(()=>{const{clientWidth:g,clientHeight:E}=o.current;x({width:g,height:E}),f===0&&j(g)},[o,s,f]);const I=(g,E=0)=>{const{top:_}=g.getBoundingClientRect();return _+E>=0&&_-E<=window.innerHeight};p.useEffect(()=>{var g,E;if(r&&r.type!=="Multiple"&&d.current){const _=ue(d.current.contentDocument,r._id);_&&(I(_)||(E=(g=d.current)==null?void 0:g.contentWindow)==null||E.scrollTo({top:_.offsetTop,behavior:"smooth"}),C([_]))}},[r]),p.useEffect(()=>{if(!a.isEmpty(v)&&d.current){const g=rt(d.current.contentDocument,a.first(v).id);y(g?[g]:[null])}else y([null])},[v]);const k=p.useMemo(()=>{let g=Te;return e==="offline"&&(g=g.replace("https://old.chaibuilder.com/offline/tailwind.cdn.js","/offline/tailwind.cdn.js"),g=g.replace("https://unpkg.com/aos@next/dist/aos.css","/offline/aos.css"),g=g.replace("https://unpkg.com/aos@next/dist/aos.js","/offline/aos.js")),g},[e]);return n.jsxRuntimeExports.jsx("div",{onClick:()=>{l([]),T([])},onMouseLeave:()=>setTimeout(()=>i(""),300),className:"relative mx-auto h-full w-full overflow-hidden",style:f>0&&!a.isEmpty(m)?{width:t?"100%":f}:{},ref:o,children:n.jsxRuntimeExports.jsxs(Le,{contentDidMount:()=>h(d.current),ref:d,id:"canvas-iframe",style:{width:`${s}px`,...m},className:"relative mx-auto box-content h-full max-w-full shadow-lg transition-all duration-300 ease-linear",initialContent:k,children:[n.jsxRuntimeExports.jsx(Ge,{}),n.jsxRuntimeExports.jsx(Je,{block:r,selectedBlockElement:a.first(b)}),n.jsxRuntimeExports.jsx(Xe,{model:"page"}),n.jsxRuntimeExports.jsx(Ze,{children:$?n.jsxRuntimeExports.jsx("div",{className:"h-full p-4",children:n.jsxRuntimeExports.jsx(S.Skeleton,{className:"h-full"})}):n.jsxRuntimeExports.jsx(it,{})}),n.jsxRuntimeExports.jsx("br",{}),n.jsxRuntimeExports.jsx("div",{id:"placeholder",className:"absolute z-[99999] max-w-full bg-green-500 transition-transform"})]})})},at=()=>n.jsxRuntimeExports.jsxs("div",{className:"flex h-full w-full flex-col",children:[n.jsxRuntimeExports.jsx(Me,{}),n.jsxRuntimeExports.jsx("div",{className:"relative h-full 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:n.jsxRuntimeExports.jsx(p.Suspense,{fallback:n.jsxRuntimeExports.jsx(S.Skeleton,{className:"h-full"}),children:n.jsxRuntimeExports.jsx(u.ErrorBoundary,{children:n.jsxRuntimeExports.jsx(lt,{})})})})]});exports.default=at;