@chaibuilder/sdk 4.0.0-beta.4 → 4.0.0-beta.41

package/dist/{register-chai-top-bar-ESJHs5s-.js → register-chai-top-bar-D6GjnauV.js}

@@ -3,7 +3,7 @@ import * as o from "react";
 import { useMemo as i, useState as u } from "react";
 import { useAtom as R } from "jotai";
 import { atomWithStorage as U } from "jotai/utils";
-import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
 import { cva as S } from "class-variance-authority";
 import { clsx as j } from "clsx";
 import { twMerge as H } from "tailwind-merge";
@@ -13,6 +13,56 @@ import { useTranslation as G } from "react-i18next";
 function l(...e) {
   return H(j(e));
 }
+const _ = o.forwardRef(
+  ({ className: e, type: t, ...r }, s) => /* @__PURE__ */ a(
+    "input",
+    {
+      type: t,
+      className: l(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        e
+      ),
+      ref: s,
+      ...r
+    }
+  )
+);
+_.displayName = "Input";
+const W = S(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+), C = o.forwardRef(
+  ({ className: e, variant: t, size: r, asChild: s = !1, ...n }, h) => /* @__PURE__ */ a(
+    s ? $ : "button",
+    {
+      className: l(W({ variant: t, size: r, className: e })),
+      ref: h,
+      ...n
+    }
+  )
+);
+C.displayName = "Button";
 const p = {}, de = (e, t) => {
   p[e] = {
     id: e,
@@ -36,7 +86,7 @@ const p = {}, de = (e, t) => {
   {}
 ), y = {}, me = (e, t) => {
   E(y, e) && console.warn(`Add block tab with id ${e} already registered`), N(y, e, { id: e, ...t });
-}, pe = () => i(() => w(y), []), f = {}, W = (e, t) => {
+}, pe = () => i(() => w(y), []), f = {}, q = (e, t) => {
   if (f[e])
     throw new Error(`Flag ${e} already exists`);
   f[e] = { key: e, value: !1, ...t };
@@ -44,21 +94,21 @@ const p = {}, de = (e, t) => {
   Object.entries(e).forEach(([t, r]) => {
     if (f[t])
       throw new Error(`Flag ${t} already exists`);
-    W(t, r);
+    q(t, r);
   });
-}, ve = () => f, _ = U("chai-feature-flags", []), q = (e) => {
-  const [t] = R(_);
+}, ve = () => f, B = U("chai-feature-flags", []), J = (e) => {
+  const [t] = R(B);
   return t.includes(e);
 }, be = (e) => {
-  const [t, r] = R(_);
+  const [t, r] = R(B);
   return () => {
     t.includes(e) ? r(t.filter((n) => n !== e)) : r([...t, e]);
   };
-}, xe = ({ flagKey: e, children: t }) => q(e) ? t : null;
+}, xe = ({ flagKey: e, children: t }) => J(e) ? t : null;
 let A = {};
-const ye = (e, t) => {
+const Ce = (e, t) => {
   A[e] = { ...t, id: e };
-}, Ce = (e) => A[e], we = () => w(A), J = S(
+}, ye = (e) => A[e], we = () => w(A), K = S(
   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
   {
     variants: {
@@ -71,68 +121,18 @@ const ye = (e, t) => {
       variant: "default"
     }
   }
-), B = o.forwardRef(({ className: e, variant: t, ...r }, a) => /* @__PURE__ */ s("div", { ref: a, role: "alert", className: l(J({ variant: t }), e), ...r }));
-B.displayName = "Alert";
-const K = o.forwardRef(
-  ({ className: e, ...t }, r) => /* @__PURE__ */ s("h5", { ref: r, className: l("mb-1 font-medium leading-none tracking-tight", e), ...t })
+), L = o.forwardRef(({ className: e, variant: t, ...r }, s) => /* @__PURE__ */ a("div", { ref: s, role: "alert", className: l(K({ variant: t }), e), ...r }));
+L.displayName = "Alert";
+const X = o.forwardRef(
+  ({ className: e, ...t }, r) => /* @__PURE__ */ a("h5", { ref: r, className: l("mb-1 font-medium leading-none tracking-tight", e), ...t })
 );
-K.displayName = "AlertTitle";
-const L = o.forwardRef(
-  ({ className: e, ...t }, r) => /* @__PURE__ */ s("div", { ref: r, className: l("text-sm [&_p]:leading-relaxed", e), ...t })
-);
-L.displayName = "AlertDescription";
-const X = S(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-), C = o.forwardRef(
-  ({ className: e, variant: t, size: r, asChild: a = !1, ...n }, h) => /* @__PURE__ */ s(
-    a ? $ : "button",
-    {
-      className: l(X({ variant: t, size: r, className: e })),
-      ref: h,
-      ...n
-    }
-  )
-);
-C.displayName = "Button";
+X.displayName = "AlertTitle";
 const I = o.forwardRef(
-  ({ className: e, type: t, ...r }, a) => /* @__PURE__ */ s(
-    "input",
-    {
-      type: t,
-      className: l(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        e
-      ),
-      ref: a,
-      ...r
-    }
-  )
+  ({ className: e, ...t }, r) => /* @__PURE__ */ a("div", { ref: r, className: l("text-sm [&_p]:leading-relaxed", e), ...t })
 );
-I.displayName = "Input";
+I.displayName = "AlertDescription";
 const Y = ({ close: e, onSelect: t, mode: r = "image" }) => {
-  const [a, n] = u(""), [h, v] = u(!1), [P, b] = u(!1), [F, c] = u(null), D = async (x) => {
+  const [s, n] = u(""), [h, v] = u(!1), [P, b] = u(!1), [F, c] = u(null), D = async (x) => {
     if (!x.trim()) {
       b(!1), c("Please enter a URL");
       return;
@@ -146,27 +146,27 @@ const Y = ({ close: e, onSelect: t, mode: r = "image" }) => {
     }
   }, { t: d } = G();
   return /* @__PURE__ */ g("div", { className: "flex w-96 flex-col gap-4 p-4", children: [
-    /* @__PURE__ */ s("h2", { className: "text-xl font-semibold", children: d(`${r.charAt(0).toUpperCase() + r.slice(1)} Manager`) }),
-    F && /* @__PURE__ */ g(B, { variant: "destructive", children: [
-      /* @__PURE__ */ s(z, { className: "h-4 w-4" }),
-      /* @__PURE__ */ s(L, { children: F })
+    /* @__PURE__ */ a("h2", { className: "text-xl font-semibold", children: d(`${r.charAt(0).toUpperCase() + r.slice(1)} Manager`) }),
+    F && /* @__PURE__ */ g(L, { variant: "destructive", children: [
+      /* @__PURE__ */ a(z, { className: "h-4 w-4" }),
+      /* @__PURE__ */ a(I, { children: F })
     ] }),
     /* @__PURE__ */ g("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ s(
-        I,
+      /* @__PURE__ */ a(
+        _,
         {
           placeholder: d(`Enter ${r} URL`),
-          value: a,
+          value: s,
           onChange: (x) => n(x.target.value),
-          onKeyUp: () => D(a)
+          onKeyUp: () => D(s)
         }
       ),
       /* @__PURE__ */ g("div", { className: "flex justify-end gap-2", children: [
-        /* @__PURE__ */ s(C, { variant: "outline", onClick: e, children: d("Cancel") }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ a(C, { variant: "outline", onClick: e, children: d("Cancel") }),
+        /* @__PURE__ */ a(
           C,
           {
-            onClick: () => t({ id: "dam-id", url: a, width: 600, height: 400, description: "This is image description" }),
+            onClick: () => t({ id: "dam-id", url: s, width: 600, height: 400, description: "This is image description" }),
             disabled: !P || h,
             children: d("Insert")
           }
@@ -193,7 +193,7 @@ const Ne = (e) => {
 }, Be = (e) => i(
   () => V(w(m), (t) => t.position === e),
   [e, m]
-), Q = () => /* @__PURE__ */ s("div", {}), O = {
+), Q = () => /* @__PURE__ */ a("div", {}), O = {
   component: Q
 }, Le = (e) => {
   O.component = e;
@@ -202,23 +202,23 @@ export {
   y as A,
   C as B,
   m as C,
-  B as D,
+  L as D,
   l as E,
-  L as F,
-  X as G,
+  I as F,
+  W as G,
   xe as I,
   p as R,
   ue as a,
   ge as b,
   me as c,
   pe as d,
-  W as e,
+  q as e,
   he as f,
   ve as g,
-  q as h,
+  J as h,
   be as i,
-  ye as j,
-  Ce as k,
+  Ce as j,
+  ye as k,
   we as l,
   Ae as m,
   Te as n,
@@ -233,5 +233,5 @@ export {
   Be as w,
   Le as x,
   Ie as y,
-  I as z
+  _ as z
 };

package/dist/register-chai-top-bar-DyW9GPzV.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("lodash-es"),n=require("react"),B=require("jotai"),P=require("jotai/utils"),a=require("react/jsx-runtime"),L=require("class-variance-authority"),D=require("clsx"),q=require("tailwind-merge"),H=require("@radix-ui/react-slot"),V=require("@radix-ui/react-icons"),U=require("react-i18next");function $(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const u=$(n);function o(...e){return q.twMerge(D.clsx(e))}const y=u.forwardRef(({className:e,type:t,...r},s)=>a.jsx("input",{type:t,className:o("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",e),ref:s,...r}));y.displayName="Input";const M=L.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),p=u.forwardRef(({className:e,variant:t,size:r,asChild:s=!1,...l},b)=>{const g=s?H.Slot:"button";return a.jsx(g,{className:o(M({variant:t,size:r,className:e})),ref:b,...l})});p.displayName="Button";const d={},z=(e,t)=>{d[e]={id:e,component:t,type:"widget"}},G=(e,t)=>{d[e]={id:e,component:t,type:"field"}},W=(e,t)=>{d[e]={id:e,component:t,type:"template"}},J=e=>Object.values(d).filter(t=>t.type===e).reduce((t,r)=>(t[r.id]=r.component,t),{}),m={},K=(e,t)=>{i.has(m,e)&&console.warn(`Add block tab with id ${e} already registered`),i.set(m,e,{id:e,...t})},X=()=>n.useMemo(()=>i.values(m),[]),v={},_=(e,t)=>{if(v[e])throw new Error(`Flag ${e} already exists`);v[e]={key:e,value:!1,...t}},Y=e=>{Object.entries(e).forEach(([t,r])=>{if(v[t])throw new Error(`Flag ${t} already exists`);_(t,r)})},Q=()=>v,j=P.atomWithStorage("chai-feature-flags",[]),E=e=>{const[t]=B.useAtom(j);return t.includes(e)},Z=e=>{const[t,r]=B.useAtom(j);return()=>{t.includes(e)?r(t.filter(l=>l!==e)):r([...t,e])}},ee=({flagKey:e,children:t})=>E(e)?t:null;let S={};const te=(e,t)=>{S[e]={...t,id:e}},re=e=>S[e],ae=()=>i.values(S),se=L.cva("relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",{variants:{variant:{default:"bg-background text-foreground",destructive:"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"}},defaultVariants:{variant:"default"}}),T=u.forwardRef(({className:e,variant:t,...r},s)=>a.jsx("div",{ref:s,role:"alert",className:o(se({variant:t}),e),...r}));T.displayName="Alert";const ne=u.forwardRef(({className:e,...t},r)=>a.jsx("h5",{ref:r,className:o("mb-1 font-medium leading-none tracking-tight",e),...t}));ne.displayName="AlertTitle";const A=u.forwardRef(({className:e,...t},r)=>a.jsx("div",{ref:r,className:o("text-sm [&_p]:leading-relaxed",e),...t}));A.displayName="AlertDescription";const ie=({close:e,onSelect:t,mode:r="image"})=>{const[s,l]=n.useState(""),[b,g]=n.useState(!1),[k,C]=n.useState(!1),[w,f]=n.useState(null),O=async x=>{if(!x.trim()){C(!1),f("Please enter a URL");return}try{g(!0),f(null),C(!0),f(null)}catch{C(!1),f("Error validating URL")}finally{g(!1)}},{t:h}=U.useTranslation();return a.jsxs("div",{className:"flex w-96 flex-col gap-4 p-4",children:[a.jsx("h2",{className:"text-xl font-semibold",children:h(`${r.charAt(0).toUpperCase()+r.slice(1)} Manager`)}),w&&a.jsxs(T,{variant:"destructive",children:[a.jsx(V.ExclamationTriangleIcon,{className:"h-4 w-4"}),a.jsx(A,{children:w})]}),a.jsxs("div",{className:"flex flex-col gap-4",children:[a.jsx(y,{placeholder:h(`Enter ${r} URL`),value:s,onChange:x=>l(x.target.value),onKeyUp:()=>O(s)}),a.jsxs("div",{className:"flex justify-end gap-2",children:[a.jsx(p,{variant:"outline",onClick:e,children:h("Cancel")}),a.jsx(p,{onClick:()=>t({id:"dam-id",url:s,width:600,height:400,description:"This is image description"}),disabled:!k||b,children:h("Insert")})]})]})]})},I={component:ie},oe=e=>{I.component=e},le=()=>n.useMemo(()=>I.component,[]);let N=async e=>e;const ce=e=>{N=e},ue=async e=>await N(e);let F=null;const de=e=>{F=e},ge=()=>n.useMemo(()=>F,[]),fe=()=>{F=null},c={},he=(e,t)=>{i.has(c,e)&&console.warn(`Panel ${e} already registered. Overriding...`),i.set(c,e,{id:e,...t})},pe=e=>n.useMemo(()=>i.filter(i.values(c),t=>t.position===e),[e,c]),me=()=>a.jsx("div",{}),R={component:me},ve=e=>{R.component=e},be=()=>n.useMemo(()=>R.component,[]);exports.ADD_BLOCK_TABS=m;exports.Alert=T;exports.AlertDescription=A;exports.Button=p;exports.CHAI_BUILDER_PANELS=c;exports.IfChaiFeatureFlag=ee;exports.Input=y;exports.RJSF_EXTENSIONS=d;exports.buttonVariants=M;exports.cn=o;exports.getChaiLibrary=re;exports.getPreImportHTML=ue;exports.registerChaiAddBlockTab=K;exports.registerChaiBlockSettingField=G;exports.registerChaiBlockSettingTemplate=W;exports.registerChaiBlockSettingWidget=z;exports.registerChaiFeatureFlag=_;exports.registerChaiFeatureFlags=Y;exports.registerChaiLibrary=te;exports.registerChaiMediaManager=oe;exports.registerChaiPreImportHTMLHook=ce;exports.registerChaiSaveToLibrary=de;exports.registerChaiSidebarPanel=he;exports.registerChaiTopBar=ve;exports.resetSaveToLibrary=fe;exports.useChaiAddBlockTabs=X;exports.useChaiBlockSettingComponents=J;exports.useChaiFeatureFlag=E;exports.useChaiFeatureFlags=Q;exports.useChaiLibraries=ae;exports.useChaiSidebarPanels=pe;exports.useMediaManagerComponent=le;exports.useSaveToLibraryComponent=ge;exports.useToggleChaiFeatureFlag=Z;exports.useTopBarComponent=be;

package/dist/render.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("./plugin-BGlQf0iy.cjs"),d=require("./apply-binding-IsUf6UWJ.cjs"),m=require("react/jsx-runtime"),t=require("lodash-es"),g=require("react"),b=require("./core-Y0lXLwkq.cjs"),F=require("@mhsdesign/jit-browser-tailwindcss"),j=require("@tailwindcss/aspect-ratio"),q=require("@tailwindcss/container-queries"),K=require("@tailwindcss/forms"),M=require("@tailwindcss/typography"),L=require("./get-chai-builder-theme-BApShjRz.cjs");async function O(e){const a={pageProps:e.pageProps,block:e.block,lang:e.lang,draft:e.draft,inBuilder:!1},n=await e.dataProvider(a);return t.has(n,"$metadata")&&t.isFunction(e.dataProviderMetadataCallback)&&e.dataProviderMetadataCallback(e.block,n.$metadata),e.children({...t.omit(n,"$metadata")})}const N=()=>m.jsx("div",{}),H=e=>{const{block:a,lang:n,fallbackLang:s,children:i,externalData:l,blocks:o,draft:r,pageProps:c,dataProviderMetadataCallback:f}=e,u=b.getRegisteredChaiBlock(a._type),p=t.get(u,"component",null),_=t.get(e.repeaterData,"index",-1),k=t.get(e.repeaterData,"dataKey",""),w=n===s?"":n??"",y=d.applyBindingToBlockProps(d.applyLanguage(a,w,u),l??{},{index:_,key:k}),h=d.getBlockTagAttributes(a,!1),I=D(o,a._id,d.getBlockRuntimeProps(a._type)),T=t.has(u,"dataProvider")&&t.isFunction(u.dataProvider),B={...y,...h,...I},P={blockProps:{},inBuilder:!1,lang:n||s||"en",draft:r??!1,pageData:l??{},...B},v=t.get(B,"_show",!0);if(t.isNull(p)||!v)return null;if(T){const S=t.get(u,"suspenseFallback",N);return m.jsx(g.Suspense,{fallback:g.createElement(S),children:m.jsx(O,{lang:n??"",pageProps:c,block:B,dataProvider:u.dataProvider,...f?{dataProviderMetadataCallback:f}:{},draft:r??!1,children:$=>g.createElement(p,{...P,...$,children:i({_id:a._id,_type:a._type,...t.isArray(y.repeaterItems)?{repeaterItems:d.applyLimit(y.repeaterItems,a),$repeaterItemsKey:y.$repeaterItemsKey,repeaterTotalItems:y.repeaterTotalItems??-1}:{}})})})})}return m.jsx(g.Suspense,{children:g.createElement(p,{...P,children:i({_id:a._id,_type:a._type,...t.isArray(y.repeaterItems)?{repeaterItems:d.applyLimit(y.repeaterItems,a),$repeaterItemsKey:y.$repeaterItemsKey,repeaterTotalItems:y.repeaterTotalItems??-1}:{}})})})},x=e=>{const{blocks:a,parent:n,repeaterData:s,type:i}=e;let l=t.uniqBy(t.filter(a,r=>t.has(r,"_id")&&(t.isEmpty(n)?!r._parent:r._parent===n)),"_id");const o=r=>t.filter(a,c=>c._parent===r).length>0;return(i==="Heading"||i==="Paragraph"||i==="Link"||i==="Span")&&(l=d.adjustSpacingInContentBlocks(l)),t.map(l,r=>r?g.createElement(H,{...e,key:r._id,block:r},({_id:c,_type:f,repeaterItems:u,$repeaterItemsKey:p})=>f==="Repeater"?t.isArray(u)&&u.map((_,k)=>g.createElement(x,{...e,parent:r._id,key:`${t.get(r,"_parent","root")}-${r._id}-${k}`,repeaterData:{index:k,dataKey:p}})):o(c)?g.createElement(x,{...e,parent:r._id,key:`${t.get(r,"_parent","root")}-${r._id}`,repeaterData:s,type:r._type}):null):null)},D=(e,a,n)=>t.isEmpty(n)?{}:Object.entries(n).reduce((s,[i,l])=>{const o=[];let r=t.find(e,{_id:a});for(;r;)o.push(r),r=t.find(e,{_id:r._parent});const c=t.find(o,{_type:l.block});return c&&(s[i]=t.get(c,t.get(l,"prop"),null)),s},{});function J(e){if(t.isEmpty(e.lang)&&!t.isEmpty(e.fallbackLang))throw new Error("lang prop is required when fallbackLang is provided");if(t.isEmpty(e.blocks))return null;const a=e.lang??"en",n=e.fallbackLang??a;return m.jsx(x,{...e,lang:a,fallbackLang:n})}async function V(e){const a=await e.dataProvider;return t.has(a,"$metadata")&&t.isFunction(e.dataProviderMetadataCallback)&&e.dataProviderMetadataCallback(e.block,a.$metadata),e.children({...t.omit(a,"$metadata")})}const W=()=>m.jsx("div",{}),U=async e=>{const{block:a,lang:n,fallbackLang:s,children:i,externalData:l,blocks:o,draft:r,pageProps:c,dataProviderMetadataCallback:f,dataProviders:u}=e,p=b.getRegisteredChaiBlock(a._type),_=t.get(p,"component",null),k=t.get(e.repeaterData,"index",-1),w=t.get(e.repeaterData,"dataKey",""),y=n===s?"":n??"en",h=d.applyBindingToBlockProps(d.applyLanguage(a,y,p),l??{},{index:k,key:w}),I=d.getBlockTagAttributes(a,!1),T=D(o,a._id,d.getBlockRuntimeProps(a._type)),B=t.has(p,"dataProvider")&&t.isFunction(p.dataProvider),P={...h,...I,...T},v={blockProps:{},inBuilder:!1,lang:n||s||"en",draft:r??!1,pageData:l??{},...P},S=t.get(P,"_show",!0);if(t.isNull(_)||!S)return null;if(B){const $=t.get(u,a._id,Promise.resolve({})),R=t.get(p,"suspenseFallback",W);return m.jsx(g.Suspense,{fallback:g.createElement(R),children:m.jsx(V,{lang:n??"",pageProps:c,block:P,dataProvider:$,...f?{dataProviderMetadataCallback:f}:{},draft:r??!1,children:A=>g.createElement(_,{...v,...A,children:i({_id:a._id,_type:a._type,...t.isArray(h.repeaterItems)?{repeaterItems:d.applyLimit(h.repeaterItems,a),$repeaterItemsKey:h.$repeaterItemsKey,repeaterTotalItems:h.repeaterTotalItems??-1}:{}})})})})}return g.createElement(_,{...v,children:i({_id:a._id,_type:a._type,...t.isArray(h.repeaterItems)?{repeaterItems:d.applyLimit(h.repeaterItems,a),$repeaterItemsKey:h.$repeaterItemsKey,repeaterTotalItems:h.repeaterTotalItems??-1}:{}})})},C=async e=>{const{blocks:a,parent:n,repeaterData:s,type:i}=e;let l=t.uniqBy(t.filter(a,r=>t.has(r,"_id")&&(t.isEmpty(n)?!r._parent:r._parent===n)),"_id");const o=r=>t.filter(a,c=>c._parent===r).length>0;return(i==="Heading"||i==="Paragraph"||i==="Link")&&(l=d.adjustSpacingInContentBlocks(l)),t.map(l,r=>r?g.createElement(U,{...e,dataProviders:e.dataProviders,key:r._id,block:r},({_id:c,_type:f,repeaterItems:u,$repeaterItemsKey:p})=>f==="Repeater"?t.isArray(u)&&u.map((_,k)=>g.createElement(C,{...e,parent:r._id,key:`${t.get(r,"_parent","root")}-${r._id}-${k}`,repeaterData:{index:k,dataKey:p}})):o(c)?g.createElement(C,{...e,parent:r._id,key:`${t.get(r,"_parent","root")}-${r._id}`,repeaterData:s,type:r._type}):null):null)};async function G(e){if(t.isEmpty(e.lang)&&!t.isEmpty(e.fallbackLang))throw new Error("lang prop is required when fallbackLang is provided");if(t.isEmpty(e.blocks))return null;const a=e.lang??"en",n=e.fallbackLang??a;if(e.dataProviders)return m.jsx(C,{...e,lang:a,fallbackLang:n,dataProviders:e.dataProviders});const i=e.blocks.filter(l=>{const o=b.getRegisteredChaiBlock(l._type);return!!(t.has(o,"dataProvider")&&t.isFunction(o.dataProvider))}).reduce((l,o)=>{const r=b.getRegisteredChaiBlock(o._type);if(!r||!r.dataProvider)return l;const c={pageProps:e.pageProps,block:o,lang:e.lang,draft:e.draft,inBuilder:!1};return l[o._id]=r.dataProvider(c),l},{});return m.jsx(C,{...e,lang:a,fallbackLang:n,dataProviders:i})}function Q(e,a){const n=e.filter(s=>s._type==="GlobalBlock"||s._type==="PartialBlock");for(let s=0;s<n.length;s++){const i=n[s],l=t.get(i,"partialBlockId",t.get(i,"globalBlock",""));if(l==="")continue;let o=t.cloneDeep(t.get(a,l,[]));i._parent&&(o==null?void 0:o.length)>0&&(o=o.map(c=>(t.isEmpty(c._parent)&&(c._parent=i._parent),c)));const r=e.indexOf(i);e.splice(r,1,...o)}return e}const z=e=>{if(!e)return[];try{return JSON.parse(X(e)).filter(n=>!n._type.startsWith("@chai"))}catch{return[{_type:"Paragraph",_id:"error",content:"Invalid JSON. Please check the JSON string."}]}};function X(e){const a=/(asset:\/\/|https:\/\/asset\.localhost\/)(?:localhost\/)?[^"']+/g;return e.replace(a,n=>{const s=decodeURIComponent(n),i=s.indexOf("public");return i!==-1?s.substring(i+6):s})}async function Y(e,a=[],n=!1){return await F.createTailwindcss({tailwindConfig:{darkMode:"class",safelist:a,theme:{extend:{...L.getChaiBuilderTheme(),keyframes:{"accordion-down":{from:{height:"0"},to:{height:"var(--radix-accordion-content-height)"}},"accordion-up":{from:{height:"var(--radix-accordion-content-height)"},to:{height:"0"}}},animation:{"accordion-down":"accordion-down 0.2s ease-out","accordion-up":"accordion-up 0.2s ease-out"}}},plugins:[K,M,j,q,L.chaiBuilderPlugin],corePlugins:{preflight:n}}}).generateStylesFromContent(` ${n?"@tailwind base;":""}
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("./plugin-DHpuZZXz.cjs"),d=require("./apply-binding-BuwI_Uf5.cjs"),m=require("react/jsx-runtime"),t=require("lodash-es"),g=require("react"),I=require("./core-czmLeR0h.cjs"),F=require("@mhsdesign/jit-browser-tailwindcss"),j=require("@tailwindcss/aspect-ratio"),q=require("@tailwindcss/container-queries"),K=require("@tailwindcss/forms"),M=require("@tailwindcss/typography"),x=require("./get-chai-builder-theme-B5RkBTsB.cjs");async function O(e){const a={pageProps:e.pageProps,block:e.block,lang:e.lang,draft:e.draft,inBuilder:!1},n=await e.dataProvider(a);return t.has(n,"$metadata")&&t.isFunction(e.dataProviderMetadataCallback)&&e.dataProviderMetadataCallback(e.block,n.$metadata),e.children({...t.omit(n,"$metadata")})}const N=()=>m.jsx("div",{}),H=e=>{const{block:a,lang:n,fallbackLang:s,children:i,externalData:l,blocks:o,draft:r,pageProps:c,dataProviderMetadataCallback:f}=e,p=I.getRegisteredChaiBlock(a._type),u=t.get(p,"component",null),k=t.get(e.repeaterData,"index",-1),P=t.get(e.repeaterData,"dataKey",""),B=n===s?"":n??"",y=d.applyBindingToBlockProps(d.applyLanguage(a,B,p),l??{},{index:k,key:P}),h=d.getBlockTagAttributes(a,!1),$=D(o,a._id,d.getBlockRuntimeProps(a._type)),w=t.has(p,"dataProvider")&&t.isFunction(p.dataProvider),C={...y,...h,...$},v={blockProps:{},inBuilder:!1,lang:n||s||"en",draft:r??!1,pageData:l??{},...C};let _=t.get(C,"_show",!0);if(t.isString(_)&&_.startsWith("{{")&&(_=d.resolveBinding(_,l)!=="false"),t.isNull(u)||!_)return null;if(w){const b=t.get(p,"suspenseFallback",N);return m.jsx(g.Suspense,{fallback:g.createElement(b),children:m.jsx(O,{lang:n??"",pageProps:c,block:C,dataProvider:p.dataProvider,...f?{dataProviderMetadataCallback:f}:{},draft:r??!1,children:S=>g.createElement(u,{...v,...S,children:i({_id:a._id,_type:a._type,...t.isArray(y.repeaterItems)?{repeaterItems:d.applyLimit(y.repeaterItems,a),$repeaterItemsKey:y.$repeaterItemsKey,repeaterTotalItems:y.repeaterTotalItems??-1}:{}})})})})}return m.jsx(g.Suspense,{children:g.createElement(u,{...v,children:i({_id:a._id,_type:a._type,...t.isArray(y.repeaterItems)?{repeaterItems:d.applyLimit(y.repeaterItems,a),$repeaterItemsKey:y.$repeaterItemsKey,repeaterTotalItems:y.repeaterTotalItems??-1}:{}})})})},E=e=>{const{blocks:a,parent:n,repeaterData:s,type:i}=e;let l=t.uniqBy(t.filter(a,r=>t.has(r,"_id")&&(t.isEmpty(n)?!r._parent:r._parent===n)),"_id");const o=r=>t.filter(a,c=>c._parent===r).length>0;return(i==="Heading"||i==="Paragraph"||i==="Link"||i==="Span")&&(l=d.adjustSpacingInContentBlocks(l)),t.map(l,(r,c)=>r?g.createElement(H,{...e,key:r._id?`${r._id}-${c}`:`block-${c}`,block:r},({_id:f,_type:p,repeaterItems:u,$repeaterItemsKey:k})=>p==="Repeater"?t.isArray(u)&&u.map((P,B)=>g.createElement(E,{...e,parent:r._id,key:`${t.get(r,"_parent","root")}-${r._id}-${c}-${B}`,repeaterData:{index:B,dataKey:k}})):o(f)?g.createElement(E,{...e,parent:r._id,key:`${t.get(r,"_parent","root")}-${r._id}-${c}`,repeaterData:s,type:r._type}):null):null)},D=(e,a,n)=>t.isEmpty(n)?{}:Object.entries(n).reduce((s,[i,l])=>{const o=[];let r=t.find(e,{_id:a});for(;r;)o.push(r),r=t.find(e,{_id:r._parent});const c=t.find(o,{_type:l.block});return c&&(s[i]=t.get(c,t.get(l,"prop"),null)),s},{});function J(e){if(t.isEmpty(e.lang)&&!t.isEmpty(e.fallbackLang))throw new Error("lang prop is required when fallbackLang is provided");if(t.isEmpty(e.blocks))return null;const a=e.lang??"en",n=e.fallbackLang??a;return m.jsx(E,{...e,lang:a,fallbackLang:n})}async function W(e){const a=await e.dataProvider;return t.has(a,"$metadata")&&t.isFunction(e.dataProviderMetadataCallback)&&e.dataProviderMetadataCallback(e.block,a.$metadata),e.children({...t.omit(a,"$metadata")})}const V=()=>m.jsx("div",{}),U=async e=>{const{block:a,lang:n,fallbackLang:s,children:i,externalData:l,blocks:o,draft:r,pageProps:c,dataProviderMetadataCallback:f,dataProviders:p}=e,u=I.getRegisteredChaiBlock(a._type),k=t.get(u,"component",null),P=t.get(e.repeaterData,"index",-1),B=t.get(e.repeaterData,"dataKey",""),y=n===s?"":n??"en",h=d.applyBindingToBlockProps(d.applyLanguage(a,y,u),l??{},{index:P,key:B}),$=d.getBlockTagAttributes(a,!1),w=D(o,a._id,d.getBlockRuntimeProps(a._type)),C=t.has(u,"dataProvider")&&t.isFunction(u.dataProvider),v={...h,...$,...w},_={blockProps:{},inBuilder:!1,lang:n||s||"en",draft:r??!1,pageData:l??{},...v},b=t.get(v,"_show",!0);if(t.isNull(k)||!b)return null;if(C){const S=t.get(p,a._id,Promise.resolve({})),R=t.get(u,"suspenseFallback",V);return m.jsx(g.Suspense,{fallback:g.createElement(R),children:m.jsx(W,{lang:n??"",pageProps:c,block:v,dataProvider:S,...f?{dataProviderMetadataCallback:f}:{},draft:r??!1,children:A=>g.createElement(k,{..._,...A,children:i({_id:a._id,_type:a._type,...t.isArray(h.repeaterItems)?{repeaterItems:d.applyLimit(h.repeaterItems,a),$repeaterItemsKey:h.$repeaterItemsKey,repeaterTotalItems:h.repeaterTotalItems??-1}:{}})})})})}return g.createElement(k,{..._,children:i({_id:a._id,_type:a._type,...t.isArray(h.repeaterItems)?{repeaterItems:d.applyLimit(h.repeaterItems,a),$repeaterItemsKey:h.$repeaterItemsKey,repeaterTotalItems:h.repeaterTotalItems??-1}:{}})})},T=async e=>{const{blocks:a,parent:n,repeaterData:s,type:i}=e;let l=t.uniqBy(t.filter(a,r=>t.has(r,"_id")&&(t.isEmpty(n)?!r._parent:r._parent===n)),"_id");const o=r=>t.filter(a,c=>c._parent===r).length>0;return(i==="Heading"||i==="Paragraph"||i==="Link")&&(l=d.adjustSpacingInContentBlocks(l)),t.map(l,r=>r?g.createElement(U,{...e,dataProviders:e.dataProviders,key:r._id,block:r},({_id:c,_type:f,repeaterItems:p,$repeaterItemsKey:u})=>f==="Repeater"?t.isArray(p)&&p.map((k,P)=>g.createElement(T,{...e,parent:r._id,key:`${t.get(r,"_parent","root")}-${r._id}-${P}`,repeaterData:{index:P,dataKey:u}})):o(c)?g.createElement(T,{...e,parent:r._id,key:`${t.get(r,"_parent","root")}-${r._id}`,repeaterData:s,type:r._type}):null):null)};async function G(e){if(t.isEmpty(e.lang)&&!t.isEmpty(e.fallbackLang))throw new Error("lang prop is required when fallbackLang is provided");if(t.isEmpty(e.blocks))return null;const a=e.lang??"en",n=e.fallbackLang??a;if(e.dataProviders)return m.jsx(T,{...e,lang:a,fallbackLang:n,dataProviders:e.dataProviders});const i=e.blocks.filter(l=>{const o=I.getRegisteredChaiBlock(l._type);return!!(t.has(o,"dataProvider")&&t.isFunction(o.dataProvider))}).reduce((l,o)=>{const r=I.getRegisteredChaiBlock(o._type);if(!r||!r.dataProvider)return l;const c={pageProps:e.pageProps,block:o,lang:e.lang,draft:e.draft,inBuilder:!1};return l[o._id]=Promise.resolve(r.dataProvider(c)),l},{});return m.jsx(T,{...e,lang:a,fallbackLang:n,dataProviders:i})}function Q(e,a){const n=e.filter(s=>s._type==="GlobalBlock"||s._type==="PartialBlock");for(let s=0;s<n.length;s++){const i=n[s],l=t.get(i,"partialBlockId",t.get(i,"globalBlock",""));if(l==="")continue;let o=t.cloneDeep(t.get(a,l,[]));i._parent&&(o==null?void 0:o.length)>0&&(o=o.map(c=>(t.isEmpty(c._parent)&&(c._parent=i._parent),c)));const r=e.indexOf(i);e.splice(r,1,...o)}return e}const z=e=>{if(!e)return[];try{return JSON.parse(X(e)).filter(n=>!n._type.startsWith("@chai"))}catch{return[{_type:"Paragraph",_id:"error",content:"Invalid JSON. Please check the JSON string."}]}};function X(e){const a=/(asset:\/\/|https:\/\/asset\.localhost\/)(?:localhost\/)?[^"']+/g;return e.replace(a,n=>{const s=decodeURIComponent(n),i=s.indexOf("public");return i!==-1?s.substring(i+6):s})}async function Y(e,a=[],n=!1){return await F.createTailwindcss({tailwindConfig:{darkMode:"class",safelist:a,theme:{extend:{...x.getChaiBuilderTheme(),keyframes:{"accordion-down":{from:{height:"0"},to:{height:"var(--radix-accordion-content-height)"}},"accordion-up":{from:{height:"var(--radix-accordion-content-height)"},to:{height:"0"}}},animation:{"accordion-down":"accordion-down 0.2s ease-out","accordion-up":"accordion-up 0.2s ease-out"}}},plugins:[K,M,j,q,x.chaiBuilderPlugin],corePlugins:{preflight:n}}}).generateStylesFromContent(` ${n?"@tailwind base;":""}
       @tailwind components;
-      @tailwind utilities;`,e)}const Z=(e,a)=>{const n=JSON.stringify(e).replace(/#styles:([^"]*)/g,(s,i)=>`#styles:${i.replace(/,/g," ")}`.replace(/#styles:/g,""));return Y([n],[],a)},ee=async(e,a=!1)=>await Z(e,a);exports.getChaiThemeCssVariables=E.getChaiThemeCssVariables;exports.getThemeFontsCSSImport=E.getThemeFontsCSSImport;exports.getThemeFontsLinkMarkup=E.getThemeFontsLinkMarkup;exports.applyChaiDataBinding=d.applyChaiDataBinding;exports.applyDesignTokens=d.applyDesignTokens;exports.convertHTMLToChaiBlocks=d.getBlocksFromHTML;exports.AsyncRenderChaiBlocks=G;exports.RenderChaiBlocks=J;exports.convertToBlocks=z;exports.getMergedPartialBlocks=Q;exports.getStylesForBlocks=ee;
+      @tailwind utilities;`,e)}const Z=(e,a)=>{const n=JSON.stringify(e).replace(/#styles:([^"]*)/g,(s,i)=>`#styles:${i.replace(/^,/g," ")}`.replace(/#styles:/g,""));return Y([n],[],a)},ee=async(e,a=!1)=>await Z(e,a);exports.getChaiThemeCssVariables=L.getChaiThemeCssVariables;exports.getThemeFontsCSSImport=L.getThemeFontsCSSImport;exports.getThemeFontsLinkMarkup=L.getThemeFontsLinkMarkup;exports.applyChaiDataBinding=d.applyChaiDataBinding;exports.applyDesignTokens=d.applyDesignTokens;exports.convertHTMLToChaiBlocks=d.getBlocksFromHTML;exports.AsyncRenderChaiBlocks=G;exports.RenderChaiBlocks=J;exports.convertToBlocks=z;exports.getMergedPartialBlocks=Q;exports.getStylesForBlocks=ee;

package/dist/render.d.ts

@@ -2,7 +2,7 @@ import { JSX } from 'react/jsx-runtime';
 
 export declare const applyChaiDataBinding: (block: Record<string, string>, pageExternalData: Record<string, any>) => Record<string, string>;
 
-export declare const applyDesignTokens: (blocks: ChaiBlock[], designTokens: DesignTokens) => ChaiBlock[];
+export declare const applyDesignTokens: (blocks: ChaiBlock[], designTokens: ChaiDesignTokens) => ChaiBlock[];
 
 export declare function AsyncRenderChaiBlocks(props: RenderChaiBlocksProps): Promise<JSX.Element | null>;
 
@@ -10,23 +10,31 @@ declare type ChaiBlock<T = Record<string, any>> = {
     _id: string;
     _name?: string;
     _parent?: string | null | undefined;
-    _type: string;
     _libBlock?: string;
+    _type: string;
+    partialBlockId?: string;
 } & T;
 
-declare type ChaiFontViaUrl = {
+declare interface ChaiDesignTokens {
+    [uniqueId: string]: {
+        name: string;
+        value: string;
+        archived?: boolean;
+    };
+}
+
+declare type ChaiFontByUrl = {
     family: string;
     url: string;
     fallback: string;
 };
 
-declare interface ChaiPageProps {
+declare type ChaiPageProps<T = Record<string, any>> = {
     slug: string;
     searchParams?: Record<string, string>;
-    [key: string]: any;
-}
+} & T;
 
-declare type ChaiThemeValues = {
+declare type ChaiTheme = {
     fontFamily: {
         heading: string;
         body: string;
@@ -52,7 +60,6 @@ declare type ChaiThemeValues = {
         "card-foreground": [HexColor, HexColor];
         popover: [HexColor, HexColor];
         "popover-foreground": [HexColor, HexColor];
-        [key: string]: [HexColor, HexColor];
     };
 };
 
@@ -69,14 +76,9 @@ export declare const convertHTMLToChaiBlocks: (html: string) => ChaiBlock[];
  */
 export declare const convertToBlocks: (chaiFormatContent: string) => ChaiBlock[];
 
-declare interface DesignTokens {
-    [uniqueId: string]: {
-        name: string;
-        value: string;
-    };
-}
-
-export declare const getChaiThemeCssVariables: (chaiTheme: ChaiThemeValues) => string;
+export declare const getChaiThemeCssVariables: ({ theme }: {
+    theme: ChaiTheme;
+}) => string;
 
 export declare function getMergedPartialBlocks(blocks: ChaiBlock[], partials: Record<string, ChaiBlock[]>): ChaiBlock[];
 
@@ -88,9 +90,9 @@ export declare function getMergedPartialBlocks(blocks: ChaiBlock[], partials: Re
  */
 export declare const getStylesForBlocks: (blocks: ChaiBlock[], includeBaseStyles?: boolean) => Promise<string>;
 
-export declare const getThemeFontsCSSImport: (fonts: ChaiFontViaUrl[]) => string;
+export declare const getThemeFontsCSSImport: (fonts: ChaiFontByUrl[]) => string;
 
-export declare const getThemeFontsLinkMarkup: (fonts: ChaiFontViaUrl[]) => string;
+export declare const getThemeFontsLinkMarkup: (fonts: ChaiFontByUrl[]) => string;
 
 declare type HexColor = string;