@chaibuilder/sdk 4.0.0-beta.7 → 4.0.0-beta.8

package/dist/web-blocks.js

@@ -1,10 +1,10 @@
+import { isEmpty as w, get as k, map as R, isNull as U, omit as M, pick as H } from "lodash-es";
 import { jsx as i, jsxs as h, Fragment as N } from "react/jsx-runtime";
-import { r as p, S as u, s as L } from "./index-Dxfyt4d4.js";
+import { registerChaiBlockSchema as p, StylesProp as u, stylesProp as L } from "./runtime.js";
 import { c as _, g as I } from "./common-functions-D2lMFR6K.js";
 import * as b from "react";
 import { createElement as x } from "react";
-import { ButtonIcon as M, CodeIcon as H, FrameIcon as $, SketchLogoIcon as U, RowsIcon as j, LayoutIcon as Z, DividerHorizontalIcon as q, CheckboxIcon as G, FileTextIcon as W, InputIcon as D, LetterCaseToggleIcon as O, RadiobuttonIcon as Y, DropdownMenuIcon as Q, HeadingIcon as J, TableIcon as X, BorderTopIcon as K, BorderAllIcon as ee, ViewHorizontalIcon as te, DragHandleHorizontalIcon as oe, ImageIcon as le, Link1Icon as re, ColumnsIcon as ne, TextIcon as ie, CursorTextIcon as ae, SpaceBetweenVerticallyIcon as se, VideoIcon as ce, ChevronLeftIcon as de, ChevronRightIcon as pe, LoopIcon as V } from "@radix-ui/react-icons";
-import { isEmpty as w, get as k, map as R, isNull as ue, omit as z, pick as F } from "lodash-es";
+import { ButtonIcon as $, CodeIcon as j, FrameIcon as D, SketchLogoIcon as Z, RowsIcon as V, LayoutIcon as q, DividerHorizontalIcon as G, CheckboxIcon as W, FileTextIcon as O, InputIcon as z, LetterCaseToggleIcon as Y, RadiobuttonIcon as Q, DropdownMenuIcon as J, HeadingIcon as X, TableIcon as K, BorderTopIcon as ee, BorderAllIcon as te, ViewHorizontalIcon as oe, DragHandleHorizontalIcon as le, ImageIcon as re, Link1Icon as ne, ColumnsIcon as ie, TextIcon as ae, CursorTextIcon as se, SpaceBetweenVerticallyIcon as ce, VideoIcon as de, ChevronLeftIcon as pe, ChevronRightIcon as ue, LoopIcon as F } from "@radix-ui/react-icons";
 import { r as d, e as me, c as ye } from "./core-Dr7QYemB.js";
 const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div", { className: _("pointer-events-none flex h-20 flex-col items-center justify-center p-2", e), children: /* @__PURE__ */ i("div", { className: "h-full w-full rounded bg-gray-200 p-2 dark:bg-gray-800", children: /* @__PURE__ */ i("div", { className: "flex h-full w-full items-center justify-center outline-dashed outline-1 -outline-offset-1 outline-gray-400 duration-300 dark:outline-gray-700" }) }) }) : null, ge = (e) => {
   const { blockProps: o, inBuilder: t, backgroundImage: l, children: r, tag: n = "div", styles: a } = e;
@@ -81,7 +81,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "similar to a button element in HTML",
   label: "Button",
   category: "core",
-  icon: M,
+  icon: $,
   group: "basic",
   ...p({
     properties: {
@@ -150,7 +150,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "similar to a div or section elements in HTML",
   label: "Custom HTML",
   category: "core",
-  icon: H,
+  icon: j,
   group: "advanced",
   ...p({
     properties: {
@@ -171,7 +171,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "similar to a script element in HTML",
   label: "Custom Script",
   category: "core",
-  icon: H,
+  icon: j,
   hidden: !0,
   group: "advanced",
   ...p({
@@ -205,7 +205,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "GlobalBlock",
   description: "A global block component",
   label: "Global Block",
-  icon: $,
+  icon: D,
   category: "core",
   group: "basic",
   hidden: !0,
@@ -241,7 +241,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   label: "web_blocks.icon",
   category: "core",
   description: "Icon block is used to display an icon/svg.",
-  icon: U,
+  icon: Z,
   group: "media",
   ...p({
     properties: {
@@ -284,7 +284,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "PartialBlock",
   description: "A partial block component. Partial blocks are global blocks that can be used in multiple pages.",
   label: "Partial Block",
-  icon: $,
+  icon: D,
   category: "core",
   group: "basic",
   hidden: !0,
@@ -355,7 +355,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   label: "Column",
   group: "basic",
   category: "core",
-  icon: Z,
+  icon: q,
   wrapper: !0,
   hidden: !0,
   canDelete: () => !0,
@@ -394,7 +394,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "A row component",
   label: "Row",
   group: "basic",
-  icon: j,
+  icon: V,
   hidden: !0,
   blocks: () => [
     { _type: "Row", _id: "row", styles: "#styles:,p-1" },
@@ -429,7 +429,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "A horizontal line component",
   label: "Divider",
   category: "core",
-  icon: q,
+  icon: G,
   group: "basic",
   ...p({
     properties: {
@@ -478,7 +478,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Checkbox",
   label: "web_blocks.checkbox",
   category: "core",
-  icon: G,
+  icon: W,
   group: "form",
   ...p({
     properties: {
@@ -542,7 +542,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Form",
   label: "Form",
   category: "core",
-  icon: W,
+  icon: O,
   group: "form",
   blocks: () => [
     { _type: "Form", _id: "form", styles: "#styles:p-1 space-y-2," },
@@ -596,7 +596,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "FormButton",
   label: "Submit Button",
   category: "core",
-  icon: M,
+  icon: $,
   group: "form",
   ...p({
     properties: {
@@ -744,7 +744,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Input",
   label: "web_blocks.input",
   category: "core",
-  icon: D,
+  icon: z,
   group: "form",
   ...p({
     properties: {
@@ -865,7 +865,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Label",
   label: "Label",
   category: "core",
-  icon: O,
+  icon: Y,
   group: "form",
   ...p({
     properties: {
@@ -900,7 +900,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Radio",
   label: "web_blocks.radio",
   category: "core",
-  icon: Y,
+  icon: Q,
   group: "form",
   ...p({
     properties: {
@@ -984,7 +984,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "Select",
   label: "web_blocks.select",
   category: "core",
-  icon: Q,
+  icon: J,
   group: "form",
   ...p({
     properties: {
@@ -1081,7 +1081,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   type: "TextArea",
   label: "web_blocks.textarea",
   category: "core",
-  icon: D,
+  icon: z,
   group: "form",
   ...p({
     properties: {
@@ -1140,7 +1140,7 @@ const C = ({ className: e = "", inBuilder: o }) => o ? /* @__PURE__ */ i("div",
   description: "A heading component similar to h1, h2, h3, h4, h5, h6 elements in HTML",
   label: "Heading",
   category: "core",
-  icon: J,
+  icon: X,
   group: "typography",
   ...p({
     properties: {
@@ -1206,7 +1206,7 @@ d(rt, {
   category: "core",
   group: "table",
   hidden: !0,
-  icon: X,
+  icon: K,
   ...p({
     properties: {
       styles: u("")
@@ -1220,7 +1220,7 @@ d(nt, {
   category: "core",
   group: "table",
   hidden: !0,
-  icon: K,
+  icon: ee,
   ...p({
     properties: {
       styles: u("")
@@ -1234,7 +1234,7 @@ d(it, {
   category: "core",
   group: "table",
   hidden: !0,
-  icon: ee,
+  icon: te,
   ...p({
     properties: {
       styles: u("")
@@ -1248,7 +1248,7 @@ d(at, {
   category: "core",
   group: "table",
   hidden: !0,
-  icon: te,
+  icon: oe,
   ...p({
     properties: {
       styles: u("")
@@ -1262,7 +1262,7 @@ d(st, {
   category: "core",
   group: "table",
   hidden: !0,
-  icon: oe,
+  icon: le,
   ...p({
     properties: {
       styles: u(""),
@@ -1343,7 +1343,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   description: "A image component",
   label: "Image",
   category: "core",
-  icon: le,
+  icon: re,
   group: "media",
   ...p({
     properties: {
@@ -1427,7 +1427,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   description: "A link component",
   label: "Link",
   category: "core",
-  icon: re,
+  icon: ne,
   group: "basic",
   ...p({
     properties: {
@@ -1470,7 +1470,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   type: "List",
   description: "A list component",
   label: "List",
-  icon: j,
+  icon: V,
   category: "core",
   group: "basic",
   ...p({
@@ -1514,7 +1514,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   type: "ListItem",
   description: "A list item component",
   label: "List Item",
-  icon: ne,
+  icon: ie,
   category: "core",
   group: "basic",
   ...p({
@@ -1536,7 +1536,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   canBeNested: (e) => e === "List" || e === "Repeater"
 }, ht = (e) => {
   const { blockProps: o, styles: t, content: l } = e;
-  if (!ue(e.children)) return b.createElement("p", { ...t, ...o }, e.children);
+  if (!U(e.children)) return b.createElement("p", { ...t, ...o }, e.children);
   const r = T(t, "rte");
   return b.createElement("div", {
     ...r,
@@ -1548,7 +1548,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   description: "A paragraph component",
   label: "Paragraph",
   category: "core",
-  icon: ie,
+  icon: ae,
   group: "typography",
   ...p({
     properties: {
@@ -1573,7 +1573,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   label: "Rich Text",
   hidden: !0,
   category: "core",
-  icon: ae,
+  icon: se,
   group: "typography",
   ...p({
     properties: {
@@ -1622,7 +1622,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   category: "core",
   group: "typography",
   blocks: () => [{ _id: "a", _type: "Text", _name: "Text", content: "" }],
-  icon: se,
+  icon: ce,
   ...p({
     properties: {
       styles: u("text-black"),
@@ -1687,8 +1687,8 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   return null;
 }, Bt = (e) => {
   const { url: o, blockProps: t, styles: l, controls: r, videoSource: n, inBuilder: a, title: s } = e, c = Lt(o, r);
-  return /* @__PURE__ */ h("div", { ...z(l, "className"), className: "relative w-full overflow-hidden", style: { paddingBottom: "56.25%" }, children: [
-    !c && a ? /* @__PURE__ */ i("div", { className: "absolute flex h-full w-full items-center justify-center bg-gray-300 text-center", children: w(o) ? `Provided ${n} video link in settings Video URL.` : `Provided ${n} video link is invalid.` }) : /* @__PURE__ */ i("iframe", { width: "100%", src: c ?? "", title: s || "Video player", ...F(l, "className") }),
+  return /* @__PURE__ */ h("div", { ...M(l, "className"), className: "relative w-full overflow-hidden", style: { paddingBottom: "56.25%" }, children: [
+    !c && a ? /* @__PURE__ */ i("div", { className: "absolute flex h-full w-full items-center justify-center bg-gray-300 text-center", children: w(o) ? `Provided ${n} video link in settings Video URL.` : `Provided ${n} video link is invalid.` }) : /* @__PURE__ */ i("iframe", { width: "100%", src: c ?? "", title: s || "Video player", ...H(l, "className") }),
     a && /* @__PURE__ */ i("div", { ...t, className: "absolute top-0 h-full w-full" })
   ] });
 }, St = (e) => {
@@ -1729,7 +1729,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   type: "Video",
   label: "Video",
   category: "core",
-  icon: ce,
+  icon: de,
   group: "media",
   ...p({
     properties: {
@@ -1817,13 +1817,13 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
   i18nProps: ["url", "title"]
 }, Tt = (e) => {
   const { paginationStyles: o } = e, t = me("Pagination");
-  return /* @__PURE__ */ i("div", { ...o, children: t ? b.createElement(t.component, { ...z(e, ["paginationStyles"]), blockProps: {} }) : /* @__PURE__ */ h(N, { children: [
+  return /* @__PURE__ */ i("div", { ...o, children: t ? b.createElement(t.component, { ...M(e, ["paginationStyles"]), blockProps: {} }) : /* @__PURE__ */ h(N, { children: [
     /* @__PURE__ */ i(
       "button",
       {
         className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50",
         disabled: !0,
-        children: /* @__PURE__ */ i(de, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ i(pe, { className: "h-4 w-4" })
       }
     ),
     /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-blue-500 bg-blue-500 font-medium text-white", children: "1" }),
@@ -1831,7 +1831,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
     /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white font-medium text-gray-700 hover:bg-gray-50", children: "3" }),
     /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white font-medium text-gray-700 hover:bg-gray-50", children: "4" }),
     /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white font-medium text-gray-700 hover:bg-gray-50", children: "5" }),
-    /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-50", children: /* @__PURE__ */ i(pe, { className: "h-4 w-4" }) })
+    /* @__PURE__ */ i("button", { className: "flex h-9 w-9 items-center justify-center rounded-md border border-gray-300 bg-white hover:bg-gray-50", children: /* @__PURE__ */ i(ue, { className: "h-4 w-4" }) })
   ] }) });
 }, Rt = (e) => {
   const { children: o, tag: t, styles: l, blockProps: r, $loading: n } = e, { pagination: a, inBuilder: s } = e;
@@ -1851,7 +1851,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
     a && /* @__PURE__ */ i(
       Tt,
       {
-        ...F(e, [
+        ...H(e, [
           "limit",
           "totalItems",
           "paginationStrategy",
@@ -1866,7 +1866,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
 }, At = {
   type: "Repeater",
   label: "Repeater",
-  icon: V,
+  icon: F,
   group: "basic",
   description: "Repeater block is used to display a list of items based on data binding in repeaterItems",
   dataProviderMode: "live",
@@ -1984,7 +1984,7 @@ const ct = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG
 }, Mt = {
   type: "RepeaterItem",
   label: "Repeater Item",
-  icon: V,
+  icon: F,
   hidden: !0,
   group: "basic",
   ...p({

package/dist/{web-preview-h39D3TUh.js → web-preview-BUnv3jIc.js}

@@ -1,10 +1,10 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { useState as d, createElement as m } from "react";
-import { B as s } from "./register-chai-top-bar-ESJHs5s-.js";
+import { B as s } from "./register-chai-top-bar-CX_JkRJn.js";
 import { useAtom as h } from "jotai";
 import { map as p } from "lodash-es";
 import { Smartphone as w, Tablet as f, Laptop as u, LaptopMinimal as x } from "lucide-react";
-import { p as v, T as _ } from "./index-B7eWP_hB.js";
+import { p as v, T as _ } from "./index-D5d4QDq7.js";
 const b = [
   {
     title: "mobile_xs_title",

package/dist/{web-preview-wRgRY3Tv.cjs → web-preview-D8GQHCjs.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),a=require("./register-chai-top-bar-BqwKw4uy.cjs"),u=require("jotai"),x=require("lodash-es"),n=require("lucide-react"),c=require("./index-BwH1mRm_.cjs"),m=[{title:"mobile_xs_title",content:"mobile_xs_content",icon:e.jsx(n.Smartphone,{className:"h-4 w-4"}),width:400},{title:"tablet_md_title",content:"tablet_md_content",icon:e.jsx(n.Tablet,{className:"h-4 w-4"}),width:800},{title:"desktop_xl_title",content:"desktop_xl_content",icon:e.jsx(n.Laptop,{className:"h-4 w-4"}),width:1200},{title:"large_desktop_2xl_title",content:"large_desktop_2xl_content",icon:e.jsx(n.LaptopMinimal,{className:"h-4 w-4"}),width:1600}],w=({currentWidth:t,width:s,icon:o,setIframeWidth:r})=>e.jsx(a.Button,{className:"px-3 py-3",onClick:()=>r(s),variant:s===t?"default":"ghost",children:o}),p=()=>{const[t,s]=l.useState(1200),o=i=>s(i),[r,d]=u.useAtom(c.previewUrlAtom);if(!r)return null;const h=()=>{d("")};return e.jsxs("div",{className:"absolute inset-0 z-[999999] flex h-screen w-screen flex-col overflow-hidden bg-gray-100",children:[e.jsxs("div",{className:"flex h-[50px] items-center justify-center border-b border-gray-200 px-4 shadow-sm",children:[e.jsx("div",{className:"flex items-center justify-center rounded-md border border-gray-300",children:x.map(m,i=>l.createElement(w,{...i,setIframeWidth:o,key:i.title,currentWidth:t}))})," ",e.jsx(c.Tooltip,{content:"Exit Preview",delayDuration:0,children:e.jsx(a.Button,{variant:"destructive",size:"sm",onClick:h,children:e.jsx("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M2 3C2 2.44772 2.44772 2 3 2H12C12.5523 2 13 2.44772 13 3V12C13 12.5523 12.5523 13 12 13H3C2.44772 13 2 12.5523 2 12V3ZM12 3H3V12H12V3Z",fill:"currentColor",fillRule:"evenodd","clip-rule":"evenodd"})})})})]}),e.jsx("iframe",{style:{width:`${t}px`,transition:"width 0.3s ease-in-out"},className:"no-scrollbar mx-auto h-full overflow-y-auto border bg-white",src:r})]})};exports.default=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),a=require("./register-chai-top-bar-DWTuRU53.cjs"),u=require("jotai"),x=require("lodash-es"),n=require("lucide-react"),c=require("./index-BRJCj7c_.cjs"),m=[{title:"mobile_xs_title",content:"mobile_xs_content",icon:e.jsx(n.Smartphone,{className:"h-4 w-4"}),width:400},{title:"tablet_md_title",content:"tablet_md_content",icon:e.jsx(n.Tablet,{className:"h-4 w-4"}),width:800},{title:"desktop_xl_title",content:"desktop_xl_content",icon:e.jsx(n.Laptop,{className:"h-4 w-4"}),width:1200},{title:"large_desktop_2xl_title",content:"large_desktop_2xl_content",icon:e.jsx(n.LaptopMinimal,{className:"h-4 w-4"}),width:1600}],w=({currentWidth:t,width:s,icon:o,setIframeWidth:r})=>e.jsx(a.Button,{className:"px-3 py-3",onClick:()=>r(s),variant:s===t?"default":"ghost",children:o}),p=()=>{const[t,s]=l.useState(1200),o=i=>s(i),[r,d]=u.useAtom(c.previewUrlAtom);if(!r)return null;const h=()=>{d("")};return e.jsxs("div",{className:"absolute inset-0 z-[999999] flex h-screen w-screen flex-col overflow-hidden bg-gray-100",children:[e.jsxs("div",{className:"flex h-[50px] items-center justify-center border-b border-gray-200 px-4 shadow-sm",children:[e.jsx("div",{className:"flex items-center justify-center rounded-md border border-gray-300",children:x.map(m,i=>l.createElement(w,{...i,setIframeWidth:o,key:i.title,currentWidth:t}))})," ",e.jsx(c.Tooltip,{content:"Exit Preview",delayDuration:0,children:e.jsx(a.Button,{variant:"destructive",size:"sm",onClick:h,children:e.jsx("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M2 3C2 2.44772 2.44772 2 3 2H12C12.5523 2 13 2.44772 13 3V12C13 12.5523 12.5523 13 12 13H3C2.44772 13 2 12.5523 2 12V3ZM12 3H3V12H12V3Z",fill:"currentColor",fillRule:"evenodd","clip-rule":"evenodd"})})})})]}),e.jsx("iframe",{style:{width:`${t}px`,transition:"width 0.3s ease-in-out"},className:"no-scrollbar mx-auto h-full overflow-y-auto border bg-white",src:r})]})};exports.default=p;

package/package.json

@@ -5,7 +5,7 @@
   "author": "Suraj Air",
   "license": "BSD-3-Clause",
   "homepage": "https://chaibuilder.com",
-  "version": "4.0.0-beta.7",
+  "version": "4.0.0-beta.8",
   "type": "module",
   "repository": {
     "type": "git",
@@ -47,6 +47,11 @@
       "import": "./dist/runtime.js",
       "require": "./dist/runtime.cjs"
     },
+    "./runtime/client": {
+      "types": "./dist/runtime-client.d.ts",
+      "import": "./dist/runtime-client.js",
+      "require": "./dist/runtime-client.cjs"
+    },
     "./actions/supabase": {
       "types": "./dist/supabase-actions.d.ts",
       "import": "./dist/supabase-actions.js",
@@ -71,8 +76,7 @@
     "postgres": "^3.4.8",
     "react": "^18.0 || ^19.0 || ^19.1 || ^19.2",
     "react-dom": "^18.0 || ^19.0 || ^19.1 || ^19.2",
-    "sharp": "^0.34.5",
-    "streamdown": "^1.6.10"
+    "sharp": "^0.34.5"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -90,9 +94,6 @@
     "ai": {
       "optional": true
     },
-    "streamdown": {
-      "optional": true
-    },
     "sharp": {
       "optional": true
     },
@@ -188,6 +189,7 @@
     "react-i18next": "16.0.0",
     "react-wrap-balancer": "^1.1.1",
     "sonner": "^2.0.7",
+    "streamdown": "^1.6.10",
     "tailwind-merge": "^3.4.0",
     "tree-model": "^1.0.7",
     "undo-manager": "1.1.1",
@@ -246,7 +248,6 @@
     "react-router-dom": "^7.11.0",
     "shadcn": "2.3.0",
     "sharp": "^0.34.5",
-    "streamdown": "^1.6.10",
     "tailwindcss": "^3.4.19",
     "ts-jest": "^29.4.6",
     "ts-node": "^10.9.2",

package/dist/css-import-modal-kHB0ramf.cjs

@@ -1,13 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),y=require("./register-chai-top-bar-BqwKw4uy.cjs"),f=require("./index-xYnNKovy.cjs"),T=require("culori"),V=require("./fonts-B-Xt29pe.cjs"),N=require("react"),R=require("react-i18next");function j(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const b=j(T),C=j(N),d=e=>e?e%1===0?e:e.toFixed(4):"0",E=e=>`hsl(${d(e.h)} ${d(e.s*100)}% ${d(e.l*100)}%)`,I=(e,o="hsl",t="4")=>{try{const r=b.parse(e);if(!r)throw new Error("Invalid color input");switch(o){case"hsl":{const s=b.converter("hsl")(r);return t==="4"?E(s):`${d(s.h)} ${d(s.s*100)}% ${d(s.l*100)}%`}case"rgb":return b.formatRgb(r);case"oklch":{const s=b.converter("oklch")(r);return`oklch(${d(s.l)} ${d(s.c)} ${d(s.h)})`}case"hex":return b.formatHex(r);default:return e}}catch(r){return console.error(`Failed to convert color: ${e}`,r),e}},x=e=>I(e,"hex"),q=e=>{const o={fontFamily:{heading:"",body:""},borderRadius:"",colors:{}};try{const t=w(e);if(!t.isValid)return console.warn("CSS validation failed:",t.error),$();const r=v(e,":root"),s=v(e,".dark"),c=u(r,"--font-sans")||u(r,"--font-family")||u(r,"--font-heading")||u(r,"--font-body"),a=D(c);o.fontFamily={heading:a,body:a};const h=u(r,"--radius")||u(r,"--border-radius")||"0.5rem";o.borderRadius=P(h),["background","foreground","primary","primary-foreground","secondary","secondary-foreground","muted","muted-foreground","accent","accent-foreground","destructive","destructive-foreground","border","input","ring","card","card-foreground","popover","popover-foreground"].forEach(i=>{const p=u(r,`--${i}`),g=u(s,`--${i}`);if(p||g){const l=p?k(p):"#000000",S=g?k(g):l;o.colors[i]=[l,S]}})}catch(t){return console.error("Error parsing CSS to ChaiThemeValues:",t),$()}return o},v=(e,o)=>{var r,s;const t=new RegExp(`${F(o)}\\s*{([^}]+)}`);return((s=(r=e.match(t))==null?void 0:r[1])==null?void 0:s.trim())||null},u=(e,o)=>{var s;if(!e)return null;const t=new RegExp(`${F(o)}\\s*:\\s*([^;]+)`),r=e.match(t);return((s=r==null?void 0:r[1])==null?void 0:s.trim())||null},k=e=>{if(!e||typeof e!="string")return"#000000";try{const o=e.replace(/var\([^)]+\)/g,"").trim();if(!o)return"#000000";if(/^[a-z]+$/i.test(o))return x(o)||"#000000";if(/^#?([0-9A-F]{3,4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(o.replace(/#/g,""))){const r=o.startsWith("#")?o:`#${o}`;return r.length<=5?`#${r.slice(1).split("").map(s=>s+s).join("")}`.slice(0,7):r.length>7?r.slice(0,7):r}if(/^(rgb|hsl|oklch)a?\(/i.test(o))return x(o)||"#000000";const t=o.match(/^(\d+\.?\d*)\s+(\d+\.?\d*)%\s+(\d+\.?\d*)%$/);if(t){const[,r,s,c]=t,a=`hsl(${r} ${s}% ${c}%)`;return x(a)||"#000000"}if(/^[\d.]+[\s,]+[\d.]+[\s,]+[\d.]+(?:[\s,/]+[\d.]+)?$/.test(o)){const r=o.split(/[\s,]+/).filter(Boolean);if(r.length>=3){const c=r.some(a=>a.includes("%"))?`hsl(${r[0]} ${r[1]} ${r[2]})`:`rgb(${r[0]}, ${r[1]}, ${r[2]})`;return x(c)||"#000000"}}return x(o)||"#000000"}catch(o){return console.warn("Failed to process color:",e,o),"#000000"}},D=e=>{const o=V.getAllRegisteredFonts();if(!e)return"ui-sans-serif, system-ui, sans-serif";try{const r=e.replace(/["']/g,"").trim().split(",")[0].trim(),s=o.find(c=>c.family.toLowerCase()===r.toLowerCase());return(s==null?void 0:s.family)||"ui-sans-serif, system-ui, sans-serif"}catch(t){return console.warn("Error processing font family:",e,t),"ui-sans-serif, system-ui, sans-serif"}},P=e=>{try{const o=e.trim();if(o.endsWith("px"))return o;if(o.endsWith("rem")){const r=parseFloat(o.replace("rem",""));if(!isNaN(r))return`${Math.round(r*16)}px`}if(o.endsWith("em")){const r=parseFloat(o.replace("em",""));if(!isNaN(r))return`${Math.round(r*16)}px`}const t=parseFloat(o);return isNaN(t)?"8px":`${Math.round(t)}px`}catch(o){return console.warn("Error converting border radius to px:",e,o),"8px"}},$=()=>({fontFamily:{heading:"ui-sans-serif, system-ui, sans-serif",body:"ui-sans-serif, system-ui, sans-serif"},borderRadius:"8px",colors:{background:["#ffffff","#000000"],foreground:["#000000","#ffffff"],primary:["#3b82f6","#60a5fa"],"primary-foreground":["#ffffff","#1e293b"],secondary:["#f1f5f9","#334155"],"secondary-foreground":["#0f172a","#f8fafc"],muted:["#f8fafc","#1e293b"],"muted-foreground":["#64748b","#94a3b8"],accent:["#f1f5f9","#334155"],"accent-foreground":["#0f172a","#f8fafc"],destructive:["#ef4444","#f87171"],"destructive-foreground":["#ffffff","#1e293b"],border:["#e2e8f0","#475569"],input:["#e2e8f0","#475569"],ring:["#3b82f6","#60a5fa"],card:["#ffffff","#0f172a"],"card-foreground":["#000000","#f8fafc"],popover:["#ffffff","#0f172a"],"popover-foreground":["#000000","#f8fafc"]}}),F=e=>e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),B=e=>["background","foreground","primary","primary-foreground"].every(r=>e.colors[r]&&Array.isArray(e.colors[r])&&e.colors[r].length>=2)&&!!e.fontFamily.heading&&!!e.fontFamily.body&&!!e.borderRadius,w=e=>{if(!e||typeof e!="string")return{isValid:!1,error:"Please enter valid CSS content"};const o=e.trim();if(!o)return{isValid:!1,error:"Please enter CSS content"};try{if(!o.includes("{")||!o.includes("}"))return{isValid:!1,error:"Invalid CSS format. CSS should contain proper block structure with { }"};const t=(o.match(/{/g)||[]).length,r=(o.match(/}/g)||[]).length;return t!==r?{isValid:!1,error:"Invalid CSS format. Unmatched braces detected"}:!o.includes("--")||!o.includes(":")?{isValid:!1,error:"Invalid CSS format. CSS should contain variable definitions like --primary: #color"}:!o.includes(":root")&&!o.includes(".dark")?{isValid:!1,error:"CSS should contain at least :root or .dark selector with theme variables"}:{isValid:!0}}catch(t){return console.error("CSS validation error:",t),{isValid:!1,error:"Failed to parse CSS. Please check your syntax."}}},M=`:root {
-  --background: 0 0% 100%;
-  --foreground: oklch(0.52 0.13 144.17);
-  --primary: #3e2723;
-  --primary-foreground: #ffffff;
-  }
-
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: hsl(37.50 36.36% 95.69%);
-  --primary: rgb(46, 125, 50);
-  --primary-foreground: #ffffff;
-}`,_=({open:e,onOpenChange:o,onImport:t})=>{const[r,s]=C.useState(""),[c,a]=C.useState(null),[h,m]=C.useState(!1),{t:i}=R.useTranslation(),p=async()=>{m(!0),a(null);try{const l=w(r);if(!l.isValid){a(l.error||i("Invalid CSS format")),setTimeout(()=>{a(null)},5e3),m(!1);return}const S=q(r);if(!B(S)){a(i("The CSS doesn't contain enough theme information. Please ensure it includes at least background, foreground, primary, and primary-foreground colors.")),setTimeout(()=>{a(null)},5e3),m(!1);return}t(S),s(""),a(null),o(!1)}catch(l){console.error("Error importing CSS:",l),a(i("Failed to parse CSS. Please check your syntax and try again.")),setTimeout(()=>{a(null)},5e3)}finally{m(!1)}},g=()=>{s(""),a(null),o(!1)};return n.jsx(f.Dialog,{open:e,onOpenChange:o,children:n.jsxs(f.DialogContent,{className:"flex max-h-[80vh] max-w-2xl flex-col",children:[n.jsxs(f.DialogHeader,{children:[n.jsx(f.DialogTitle,{children:i("Import CSS Theme")}),n.jsxs(f.DialogDescription,{className:"space-y-2",children:[n.jsx("p",{children:i("Paste your CSS variables to import a custom theme. The CSS should contain :root and .dark blocks with CSS custom properties.")}),n.jsxs("div",{className:"flex items-center",children:[n.jsx("p",{className:"font-bold",children:"Get theme resources:"}),n.jsx(y.Button,{variant:"link",size:"sm",onClick:()=>window.open("https://tweakcn.com/","_blank"),children:"TweakCN"}),n.jsx(y.Button,{variant:"link",size:"sm",onClick:()=>window.open("https://ui.shadcn.com/themes#themes","_blank"),children:"shadcn/ui Themes"}),n.jsx(y.Button,{variant:"link",size:"sm",onClick:()=>window.open("https://zippystarter.com/tools/shadcn-ui-theme-generator","_blank"),children:"ZippyStarter"})]})]})]}),n.jsxs("div",{className:"flex-1 space-y-4 overflow-hidden",children:[n.jsxs("div",{className:"space-y-2",children:[n.jsx(f.Label,{htmlFor:"css-input",children:i("CSS Variables")}),n.jsx(f.Textarea,{id:"css-input",placeholder:M,value:r,onChange:l=>s(l.target.value),className:"min-h-[300px] resize-none font-mono text-sm",disabled:h})]}),c&&n.jsx("div",{className:"rounded-md border border-red-200 bg-red-50 p-3",children:n.jsx("p",{className:"text-sm text-red-600",children:c})})]}),n.jsxs(f.DialogFooter,{className:"gap-2",children:[n.jsx(y.Button,{variant:"outline",onClick:g,disabled:h,children:i("Cancel")}),n.jsx(y.Button,{onClick:p,disabled:!r.trim()||h,children:i(h?"Importing...":"Import Theme")})]})]})})};exports.CssImportModal=_;

package/dist/index-B-rSiAp_.cjs

@@ -1 +0,0 @@
-"use strict";const t=require("lodash-es"),s="#styles:",l=e=>{const n=["_type","_id","_parent","_bindings","_name"],o=["$loading","blockProps","inBuilder","lang","draft","pageProps","pageData","children"],r=t.keys(e.properties);if(t.intersection(r,n).length>0)throw new Error(`Reserved props are not allowed: ${t.intersection(r,n).join(", ")}`);if(t.intersection(r,o).length>0)throw new Error(`Runtime props are not allowed in schema: ${t.intersection(r,o).join(", ")}`);const i=t.get(e,"properties",{}),u={};return t.each(i,(p,a)=>{t.isEmpty(p.ui)||(u[a]={...p.ui},delete i[a].ui)}),{schema:t.isEmpty(i)?{}:{...t.omit(e,["ui"])},uiSchema:{...t.get(e,"ui",{}),...u}}},d=(e="")=>({type:"string",styles:!0,default:`${s},${e}`,ui:{"ui:widget":"hidden"}}),c=(e="")=>({type:"string",styles:!0,default:`${s},${e}`,ui:{"ui:widget":"hidden"}}),h=e=>(console.warn("runtimeProp is deprecated, use builderProp instead"),{runtime:!0,...e}),g=e=>({builderProp:!0,...e}),y=e=>`${s},${e}`;exports.StylesProp=d;exports.builderProp=g;exports.defaultChaiStyles=y;exports.registerChaiBlockSchema=l;exports.runtimeProp=h;exports.stylesProp=c;

package/dist/index-Dxfyt4d4.js

@@ -1,39 +0,0 @@
-import { keys as c, intersection as t, get as d, each as g, isEmpty as l, omit as h } from "lodash-es";
-const i = "#styles:", y = (e) => {
-  const n = ["_type", "_id", "_parent", "_bindings", "_name"], o = ["$loading", "blockProps", "inBuilder", "lang", "draft", "pageProps", "pageData", "children"], r = c(e.properties);
-  if (t(r, n).length > 0)
-    throw new Error(`Reserved props are not allowed: ${t(r, n).join(", ")}`);
-  if (t(r, o).length > 0)
-    throw new Error(`Runtime props are not allowed in schema: ${t(r, o).join(", ")}`);
-  const s = d(e, "properties", {}), u = {};
-  return g(s, (a, p) => {
-    l(a.ui) || (u[p] = { ...a.ui }, delete s[p].ui);
-  }), {
-    schema: l(s) ? {} : { ...h(e, ["ui"]) },
-    uiSchema: { ...d(e, "ui", {}), ...u }
-  };
-}, P = (e = "") => ({
-  type: "string",
-  styles: !0,
-  default: `${i},${e}`,
-  ui: { "ui:widget": "hidden" }
-}), w = (e = "") => ({
-  type: "string",
-  styles: !0,
-  default: `${i},${e}`,
-  ui: { "ui:widget": "hidden" }
-}), $ = (e) => (console.warn("runtimeProp is deprecated, use builderProp instead"), {
-  runtime: !0,
-  ...e
-}), f = (e) => ({
-  builderProp: !0,
-  ...e
-}), _ = (e) => `${i},${e}`;
-export {
-  P as S,
-  $ as a,
-  f as b,
-  _ as d,
-  y as r,
-  w as s
-};