@chaibuilder/sdk 1.2.8 → 1.2.10-7.beta.1

package/README.md

@@ -1,25 +1,27 @@
-# Chai Builder - Low-Code Visual Builder
+# Chai Builder - Open Source Tailwind Builder
 
-Chai Builder is an Open Source Low Code React + Tailwind CSS Visual Builder. Its a simple React component which can be integrated into any React based framework.
+Chai Builder is an Open Source Low Code React + Tailwind CSS Visual Builder. 
+It allows you to create web pages visually by dragging and dropping elements onto the canvas. 
+It is a simple React component that renders a full-fledged visual builder into any React application. 
 
-### Try Chai Builder:
-[Demo Link](https://chaibuilder-demo.vercel.app)
-   |      [GitHub](https://github.com/surajair/demo)
+#### [View Demo](https://chaibuilder.com/demos/web)
+#### [Documentation](https://chaibuilder.com/docs/sdk/introduction)
+#### [API References](https://api-reference.chaibuilder.com)
 
 ---
 
-### Getting Started:
+### Manual installation:
 
 Step 1: Install the packages
 ```bash
-npm install @chaibuilder/sdk @chaibuilder/runtime tailwindcss
+npm install @chaibuilder/sdk
 ```
 
 Step 2: Add a custom tailwind config.
 Create a new file: `tailwind.chaibuilder.config.ts`. <br /> Pass the path to your source files.
 ```tsx
-import { chaiBuilderTailwindConfig } from "@chaibuilder/sdk/tailwind";
-export default chaiBuilderTailwindConfig(["./src/**/*.{js,ts,jsx,tsx}"]);
+import { getChaiBuilderTailwindConfig } from "@chaibuilder/sdk/tailwind";
+export default getChaiBuilderTailwindConfig(["./src/**/*.{js,ts,jsx,tsx}"]);
 
 ```
 
@@ -36,34 +38,37 @@ Step 4: Add the builder to your page.
 ```tsx
 import "./chaibuilder.tailwind.css";
 import "@chaibuilder/sdk/styles";
-import {ChaiBuilderEditor} from "@chaibuilder/sdk";
+import {loadWebBlocks} from "@chaibuilder/sdk/web-blocks";
+import { ChaiBuilderEditor } from "@chaibuilder/sdk";
+
+loadWebBlocks();
 
 const BuilderFullPage = () => {
   return  (
       <ChaiBuilderEditor
-          blocks={[]}
-          onSavePage={async (blocks) => await saveBlocks(blocks)}
-          onSaveBrandingOptions={async (branding) => await saveBranding(branding)}
+          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
+          }}
       />
   );
 }
 ```
     
-Step 5: Render the blocks on your page.
+### Render the blocks on your page.
+
 ```tsx
-export default async () => {
-    const styles = await getStylesForBlocks(blocks, brandingOptions);
-    return <>
-        <style>{styles}</style>
-        <RenderChaiBlocks blocks={blocks} />
-    </>
+export default () => {
+    return <RenderChaiBlocks blocks={blocks}/>
 }
 ```
 
+---
 ## Support
 If you like the project, you can assist us in expanding. ChaiBuilder is a collaborative endeavor crafted by developers in their free time. We value every contribution, no matter how modest, as each one represents a significant step forward in various ways, particularly in fueling our drive to enhance this tool continually.
 
-<a href="https://www.buymeacoffee.com/chaibuilder" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+<a href="https://www.buymeacoffee.com/chaibuilder" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 30px !important;width: 117px !important;" ></a>
 
 
 ## Acknowledgments

package/dist/CodeEditor-3Vp79cuE.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-JYMCiFoE.cjs"),b=require("@monaco-editor/react"),k=require("./context-menu-sQn7ryJ6.cjs"),C=require("react-i18next"),u=require("react"),n=require("./index-qTKBamQ6.cjs"),E=require("@radix-ui/react-icons"),R=require("@react-hookz/web");require("@radix-ui/react-switch");require("@radix-ui/react-accordion");require("class-variance-authority");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-slot");require("@radix-ui/react-label");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-tooltip");require("@radix-ui/react-popover");require("@radix-ui/react-hover-card");require("@radix-ui/react-select");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-separator");require("@radix-ui/react-toast");require("cmdk");require("@radix-ui/react-dialog");require("@radix-ui/react-context-menu");require("clsx");require("tailwind-merge");require("lodash-es");require("jotai");require("./iconBase-aZzpqff_.cjs");require("@chaibuilder/runtime");require("./plugin-xOpS-UNV.cjs");require("tree-model");require("react-quill");require("./STRINGS-Yl7cSWDc.cjs");require("flagged");require("react-hotkeys-hook");require("@floating-ui/dom");require("@floating-ui/react-dom");require("react-event-hook");require("@tailwindcss/typography");require("@tailwindcss/forms");require("@tailwindcss/aspect-ratio");require("react-wrap-balancer");require("react-dom");require("prop-types");require("react-error-boundary");require("re-resizable");require("lucide-react");require("@rjsf/validator-ajv8");require("@rjsf/core");require("./controls-p9IwFnPx.cjs");require("react-arborist");require("himalaya");require("react-icons-picker");require("react-autosuggest");require("fuse.js");require("i18next");require("framer-motion");const a=s=>{const i=document.createElement("div");return i.innerHTML=s,i.innerHTML};function g(){const{t:s}=C.useTranslation(),[i,d]=u.useState(!1),[l,q]=u.useState(""),[r,o]=n.useCodeEditor(),[c]=n.useSelectedBlockIds(),x=n.useUpdateBlocksProps(),m=n.useUpdateBlocksPropsRealtime(),p=R.useThrottledCallback(t=>{const h=a(t);m([r.blockId],{[r.blockProp]:h})},[],300),j=u.useCallback(()=>{if(i){const t=a(l);x([r.blockId],{[r.blockProp]:t})}},[i,l]);u.useEffect(()=>{c.includes(r==null?void 0:r.blockId)||(j(),o(null))},[c]);const f=()=>{o(null)};return e.jsxRuntimeExports.jsxs("div",{className:"h-full rounded-t-lg border-t-4 border-black bg-black text-white",children:[e.jsxRuntimeExports.jsx("button",{onClick:f,className:"fixed inset-0 z-[100000] cursor-default bg-gray-400/20"}),e.jsxRuntimeExports.jsxs("div",{className:"relative z-[100001] h-full w-full flex-col gap-y-1",children:[e.jsxRuntimeExports.jsxs("div",{className:"-mt-1 flex items-center justify-between px-2 py-2",children:[e.jsxRuntimeExports.jsxs("h3",{className:"space-x-3 text-sm font-semibold",children:[e.jsxRuntimeExports.jsx("span",{children:s("HTML Code Editor |")}),e.jsxRuntimeExports.jsx("span",{className:"text-xs text-gray-400",children:s("Scripts will be only executed in preview and live mode.")})]}),e.jsxRuntimeExports.jsx("div",{className:"flex gap-x-2",children:e.jsxRuntimeExports.jsx(k.Button,{onClick:()=>o(null),size:"sm",variant:"destructive",className:"h-6 w-fit",children:e.jsxRuntimeExports.jsx(E.Cross2Icon,{})})})]}),e.jsxRuntimeExports.jsx(b,{onMount:t=>{t.setValue(r.initialCode)},onChange:t=>{d(!0),q(t),p(t)},height:"100%",defaultLanguage:"html",theme:"vs-dark",defaultValue:"",options:{minimap:{enabled:!1}}})]})]})}exports.default=g;

package/dist/CodeEditor-bUqM7eCa.js

@@ -0,0 +1,129 @@
+import { j as t } from "./jsx-runtime-Sp0orL4X.js";
+import k from "@monaco-editor/react";
+import { B as C } from "./context-menu-YGd09SE1.js";
+import { useTranslation as j } from "react-i18next";
+import { useState as l, useCallback as v, useEffect as g } from "react";
+import { u as y, a as N, b as T, c as E } from "./index-3NV_rst1.js";
+import { Cross2Icon as w } from "@radix-ui/react-icons";
+import { useThrottledCallback as B } from "@react-hookz/web";
+import "@radix-ui/react-switch";
+import "@radix-ui/react-accordion";
+import "class-variance-authority";
+import "@radix-ui/react-alert-dialog";
+import "@radix-ui/react-slot";
+import "@radix-ui/react-label";
+import "@radix-ui/react-scroll-area";
+import "@radix-ui/react-tabs";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-popover";
+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-dialog";
+import "@radix-ui/react-context-menu";
+import "clsx";
+import "tailwind-merge";
+import "lodash-es";
+import "jotai";
+import "./iconBase-Ief2hJUZ.js";
+import "@chaibuilder/runtime";
+import "./plugin-f6SDZ_Or.js";
+import "tree-model";
+import "react-quill";
+import "./STRINGS-Xxstm-7I.js";
+import "flagged";
+import "react-hotkeys-hook";
+import "@floating-ui/dom";
+import "@floating-ui/react-dom";
+import "react-event-hook";
+import "@tailwindcss/typography";
+import "@tailwindcss/forms";
+import "@tailwindcss/aspect-ratio";
+import "react-wrap-balancer";
+import "react-dom";
+import "prop-types";
+import "react-error-boundary";
+import "re-resizable";
+import "lucide-react";
+import "@rjsf/validator-ajv8";
+import "@rjsf/core";
+import "./controls-lEwMTdPQ.js";
+import "react-arborist";
+import "himalaya";
+import "react-icons-picker";
+import "react-autosuggest";
+import "fuse.js";
+import "i18next";
+import "framer-motion";
+const a = (r) => {
+  const i = document.createElement("div");
+  return i.innerHTML = r, i.innerHTML;
+};
+function Rt() {
+  const { t: r } = j(), [i, n] = l(!1), [m, c] = l(""), [o, s] = y(), [p] = N(), d = T(), u = E(), f = B(
+    (e) => {
+      const b = a(e);
+      u([o.blockId], { [o.blockProp]: b });
+    },
+    [],
+    300
+  ), x = v(() => {
+    if (i) {
+      const e = a(m);
+      d([o.blockId], { [o.blockProp]: e });
+    }
+  }, [i, m]);
+  g(() => {
+    p.includes(o == null ? void 0 : o.blockId) || (x(), s(null));
+  }, [p]);
+  const h = () => {
+    s(null);
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: "h-full rounded-t-lg border-t-4 border-black bg-black text-white", children: [
+    /* @__PURE__ */ t.jsx("button", { onClick: h, className: "fixed inset-0 z-[100000] cursor-default bg-gray-400/20" }),
+    /* @__PURE__ */ t.jsxs("div", { className: "relative z-[100001] h-full w-full flex-col gap-y-1", children: [
+      /* @__PURE__ */ t.jsxs("div", { className: "-mt-1 flex items-center justify-between px-2 py-2", children: [
+        /* @__PURE__ */ t.jsxs("h3", { className: "space-x-3 text-sm font-semibold", children: [
+          /* @__PURE__ */ t.jsx("span", { children: r("HTML Code Editor |") }),
+          /* @__PURE__ */ t.jsx("span", { className: "text-xs text-gray-400", children: r("Scripts will be only executed in preview and live mode.") })
+        ] }),
+        /* @__PURE__ */ t.jsx("div", { className: "flex gap-x-2", children: /* @__PURE__ */ t.jsx(
+          C,
+          {
+            onClick: () => s(null),
+            size: "sm",
+            variant: "destructive",
+            className: "h-6 w-fit",
+            children: /* @__PURE__ */ t.jsx(w, {})
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ t.jsx(
+        k,
+        {
+          onMount: (e) => {
+            e.setValue(o.initialCode);
+          },
+          onChange: (e) => {
+            n(!0), c(e), f(e);
+          },
+          height: "100%",
+          defaultLanguage: "html",
+          theme: "vs-dark",
+          defaultValue: "",
+          options: {
+            minimap: {
+              enabled: !1
+            }
+          }
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Rt as default
+};

package/dist/STRINGS-Xxstm-7I.js

@@ -0,0 +1,7 @@
+const s = "#styles:", _ = "#slots:", t = "#i18n", E = "__ADD_BLOCK_INTERNAL_ROOT";
+export {
+  t as I,
+  E as R,
+  s as S,
+  _ as a
+};

package/dist/STRINGS-Yl7cSWDc.cjs

@@ -0,0 +1 @@
+"use strict";const _="#styles:",E="#slots:",s="#i18n",T="__ADD_BLOCK_INTERNAL_ROOT";exports.I18N_KEY=s;exports.ROOT_TEMP_KEY=T;exports.SLOT_KEY=E;exports.STYLES_KEY=_;

package/dist/Topbar-P7-9Rps1.js

@@ -0,0 +1,124 @@
+import { j as t } from "./jsx-runtime-Sp0orL4X.js";
+import m, { Suspense as p } from "react";
+import { B as l, a as n, b as x } from "./context-menu-YGd09SE1.js";
+import { e as d, F as h, d as o, f } from "./index-3NV_rst1.js";
+import { useTranslation as c } from "react-i18next";
+import { c as u } from "./iconBase-Ief2hJUZ.js";
+import { EyeOpenIcon as v } from "@radix-ui/react-icons";
+import "@radix-ui/react-switch";
+import "@radix-ui/react-accordion";
+import "class-variance-authority";
+import "@radix-ui/react-alert-dialog";
+import "@radix-ui/react-slot";
+import "@radix-ui/react-label";
+import "@radix-ui/react-scroll-area";
+import "@radix-ui/react-tabs";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-popover";
+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-dialog";
+import "@radix-ui/react-context-menu";
+import "clsx";
+import "tailwind-merge";
+import "lodash-es";
+import "jotai";
+import "@chaibuilder/runtime";
+import "./plugin-f6SDZ_Or.js";
+import "@react-hookz/web";
+import "tree-model";
+import "react-quill";
+import "./STRINGS-Xxstm-7I.js";
+import "flagged";
+import "react-hotkeys-hook";
+import "@floating-ui/dom";
+import "@floating-ui/react-dom";
+import "react-event-hook";
+import "@tailwindcss/typography";
+import "@tailwindcss/forms";
+import "@tailwindcss/aspect-ratio";
+import "react-wrap-balancer";
+import "react-dom";
+import "prop-types";
+import "react-error-boundary";
+import "re-resizable";
+import "lucide-react";
+import "@rjsf/validator-ajv8";
+import "@rjsf/core";
+import "./controls-lEwMTdPQ.js";
+import "react-arborist";
+import "himalaya";
+import "react-icons-picker";
+import "react-autosuggest";
+import "fuse.js";
+import "i18next";
+import "framer-motion";
+const j = () => {
+  const { savePage: a, saveState: e } = d(), { t: s } = c(), i = /* @__PURE__ */ t.jsxs(
+    l,
+    {
+      disabled: e === "SAVING",
+      onClick: (r) => {
+        r.preventDefault(), a();
+      },
+      className: u(
+        "flex h-auto w-fit items-center gap-x-2 p-1 px-2",
+        // UNSAVED sate
+        "bg-gray-200 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400",
+        {
+          "animate-pulse bg-gray-300 text-gray-900": e === "SAVING",
+          "bg-green-500 text-white hover:bg-green-600 hover:text-white dark:bg-green-600 dark:text-white": e === "SAVED"
+        }
+      ),
+      size: "sm",
+      variant: "outline",
+      children: [
+        /* @__PURE__ */ t.jsx(h, { className: "text-sm text-white" }),
+        /* @__PURE__ */ t.jsx("span", { className: "text-sm", children: s(e === "SAVING" ? "saving" : e === "SAVED" ? "saved" : "unsaved") })
+      ]
+    }
+  );
+  return /* @__PURE__ */ t.jsx("div", { className: "flex items-center", children: i });
+}, g = function() {
+  const e = o("previewComponent"), [, s] = f(), { t: i } = c();
+  return e ? /* @__PURE__ */ t.jsxs(
+    l,
+    {
+      onClick: (r) => {
+        r.preventDefault(), s(!0);
+      },
+      className: "flex h-auto w-fit items-center gap-x-2 p-1 px-2",
+      size: "sm",
+      variant: "outline",
+      children: [
+        /* @__PURE__ */ t.jsx(v, { className: "text-xs" }),
+        /* @__PURE__ */ t.jsx("span", { className: "text-sm", children: i("preview") })
+      ]
+    }
+  ) : null;
+}, kt = () => {
+  const a = o("topBarComponents.left", []), e = o("topBarComponents.center", []), s = o("topBarComponents.right", []), i = o("editable", !0);
+  return /* @__PURE__ */ t.jsxs("div", { className: "flex h-14 items-center justify-between px-2", children: [
+    /* @__PURE__ */ t.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ t.jsx("div", { className: "flex items-center space-x-2 font-bold", children: m.Children.toArray(
+      a.map((r) => /* @__PURE__ */ t.jsx(p, { fallback: /* @__PURE__ */ t.jsx(n, { className: "h-10" }), children: /* @__PURE__ */ t.jsx(r, {}) }))
+    ) }) }),
+    /* @__PURE__ */ t.jsx("div", { className: "flex items-center space-x-2", children: m.Children.toArray(
+      e.map((r) => /* @__PURE__ */ t.jsx(p, { fallback: /* @__PURE__ */ t.jsx(n, { className: "h-10" }), children: /* @__PURE__ */ t.jsx(r, {}) }))
+    ) }),
+    /* @__PURE__ */ t.jsxs("div", { className: "flex items-center space-x-1", children: [
+      /* @__PURE__ */ t.jsx(g, {}),
+      /* @__PURE__ */ t.jsx(x, { orientation: "vertical" }),
+      i ? /* @__PURE__ */ t.jsx(j, {}) : null,
+      m.Children.toArray(
+        s.map((r) => /* @__PURE__ */ t.jsx(p, { fallback: /* @__PURE__ */ t.jsx(n, { className: "h-10" }), children: /* @__PURE__ */ t.jsx(r, {}) }))
+      )
+    ] })
+  ] });
+};
+export {
+  kt as default
+};

package/dist/Topbar-xwQ4JUZD.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-JYMCiFoE.cjs"),n=require("react"),u=require("./context-menu-sQn7ryJ6.cjs"),s=require("./index-qTKBamQ6.cjs"),x=require("react-i18next"),c=require("./iconBase-aZzpqff_.cjs"),l=require("@radix-ui/react-icons");require("@radix-ui/react-switch");require("@radix-ui/react-accordion");require("class-variance-authority");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-slot");require("@radix-ui/react-label");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-tooltip");require("@radix-ui/react-popover");require("@radix-ui/react-hover-card");require("@radix-ui/react-select");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-separator");require("@radix-ui/react-toast");require("cmdk");require("@radix-ui/react-dialog");require("@radix-ui/react-context-menu");require("clsx");require("tailwind-merge");require("lodash-es");require("jotai");require("@chaibuilder/runtime");require("./plugin-xOpS-UNV.cjs");require("@react-hookz/web");require("tree-model");require("react-quill");require("./STRINGS-Yl7cSWDc.cjs");require("flagged");require("react-hotkeys-hook");require("@floating-ui/dom");require("@floating-ui/react-dom");require("react-event-hook");require("@tailwindcss/typography");require("@tailwindcss/forms");require("@tailwindcss/aspect-ratio");require("react-wrap-balancer");require("react-dom");require("prop-types");require("react-error-boundary");require("re-resizable");require("lucide-react");require("@rjsf/validator-ajv8");require("@rjsf/core");require("./controls-p9IwFnPx.cjs");require("react-arborist");require("himalaya");require("react-icons-picker");require("react-autosuggest");require("fuse.js");require("i18next");require("framer-motion");const p=()=>{const{savePage:a,saveState:r}=s.useSavePage(),{t:i}=x.useTranslation(),o=e.jsxRuntimeExports.jsxs(u.Button,{disabled:r==="SAVING",onClick:t=>{t.preventDefault(),a()},className:c.cn("flex h-auto w-fit items-center gap-x-2 p-1 px-2","bg-gray-200 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400",{"animate-pulse bg-gray-300 text-gray-900":r==="SAVING","bg-green-500 text-white hover:bg-green-600 hover:text-white dark:bg-green-600 dark:text-white":r==="SAVED"}),size:"sm",variant:"outline",children:[e.jsxRuntimeExports.jsx(s.FaCheck,{className:"text-sm text-white"}),e.jsxRuntimeExports.jsx("span",{className:"text-sm",children:i(r==="SAVING"?"saving":r==="SAVED"?"saved":"unsaved")})]});return e.jsxRuntimeExports.jsx("div",{className:"flex items-center",children:o})},m=function(){const r=s.useBuilderProp("previewComponent"),[,i]=s.usePreviewMode(),{t:o}=x.useTranslation();return r?e.jsxRuntimeExports.jsxs(u.Button,{onClick:t=>{t.preventDefault(),i(!0)},className:"flex h-auto w-fit items-center gap-x-2 p-1 px-2",size:"sm",variant:"outline",children:[e.jsxRuntimeExports.jsx(l.EyeOpenIcon,{className:"text-xs"}),e.jsxRuntimeExports.jsx("span",{className:"text-sm",children:o("preview")})]}):null},q=()=>{const a=s.useBuilderProp("topBarComponents.left",[]),r=s.useBuilderProp("topBarComponents.center",[]),i=s.useBuilderProp("topBarComponents.right",[]),o=s.useBuilderProp("editable",!0);return e.jsxRuntimeExports.jsxs("div",{className:"flex h-14 items-center justify-between px-2",children:[e.jsxRuntimeExports.jsx("div",{className:"flex items-center space-x-2",children:e.jsxRuntimeExports.jsx("div",{className:"flex items-center space-x-2 font-bold",children:n.Children.toArray(a.map(t=>e.jsxRuntimeExports.jsx(n.Suspense,{fallback:e.jsxRuntimeExports.jsx(u.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(t,{})})))})}),e.jsxRuntimeExports.jsx("div",{className:"flex items-center space-x-2",children:n.Children.toArray(r.map(t=>e.jsxRuntimeExports.jsx(n.Suspense,{fallback:e.jsxRuntimeExports.jsx(u.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(t,{})})))}),e.jsxRuntimeExports.jsxs("div",{className:"flex items-center space-x-1",children:[e.jsxRuntimeExports.jsx(m,{}),e.jsxRuntimeExports.jsx(u.Separator,{orientation:"vertical"}),o?e.jsxRuntimeExports.jsx(p,{}):null,n.Children.toArray(i.map(t=>e.jsxRuntimeExports.jsx(n.Suspense,{fallback:e.jsxRuntimeExports.jsx(u.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(t,{})})))]})]})};exports.default=q;

package/dist/UnsplashImages-BxgbXGB6.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-JYMCiFoE.cjs"),n=require("react"),p=require("lodash-es"),A=require("unsplash-js"),f=require("./context-menu-sQn7ryJ6.cjs"),_=require("react-i18next"),g=require("./index-qTKBamQ6.cjs"),T=require("@react-hookz/web"),B=require("lucide-react");require("@radix-ui/react-switch");require("@radix-ui/react-accordion");require("@radix-ui/react-icons");require("class-variance-authority");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-slot");require("@radix-ui/react-label");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-tooltip");require("@radix-ui/react-popover");require("@radix-ui/react-hover-card");require("@radix-ui/react-select");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-separator");require("@radix-ui/react-toast");require("cmdk");require("@radix-ui/react-dialog");require("@radix-ui/react-context-menu");require("clsx");require("tailwind-merge");require("jotai");require("./iconBase-aZzpqff_.cjs");require("@chaibuilder/runtime");require("./plugin-xOpS-UNV.cjs");require("tree-model");require("react-quill");require("./STRINGS-Yl7cSWDc.cjs");require("flagged");require("react-hotkeys-hook");require("@floating-ui/dom");require("@floating-ui/react-dom");require("react-event-hook");require("@tailwindcss/typography");require("@tailwindcss/forms");require("@tailwindcss/aspect-ratio");require("react-wrap-balancer");require("react-dom");require("prop-types");require("react-error-boundary");require("re-resizable");require("@rjsf/validator-ajv8");require("@rjsf/core");require("./controls-p9IwFnPx.cjs");require("react-arborist");require("himalaya");require("react-icons-picker");require("react-autosuggest");require("fuse.js");require("i18next");require("framer-motion");const v=async(h,j)=>new Promise((i,a)=>{A.createApi({accessKey:j}).search.getPhotos(h).then(l=>{i(l)}).catch(l=>a(l))}),D=({isModalView:h,onSelect:j})=>{const i=g.useBuilderProp("unsplashAccessKey",""),[a,q]=n.useState([]),[l,b]=n.useState(0),[o,w]=n.useState(),[u,k]=n.useState(),[C,y]=n.useState(0),[d,P]=T.useDebouncedState("",1e3),[m,c]=n.useState(!1),{t:E}=_.useTranslation(),I=async r=>{if(p.isEmpty(d))return;let t=l+1;r&&(r.preventDefault(),t=1),c(!0),b(t);const x={query:d,page:t};o&&(x.orientation=o),u&&(x.color=u),v(x,i).then(s=>{var R,N,S;q(t===1?((R=s==null?void 0:s.response)==null?void 0:R.results)||[]:[...a,...((N=s==null?void 0:s.response)==null?void 0:N.results)||[]]),y((S=s==null?void 0:s.response)==null?void 0:S.total_pages),c(!1)}).catch(()=>{c(!1)})};return n.useEffect(()=>{if(!p.isEmpty(d)&&i){c(!0);const r={query:d,page:1};o&&(r.orientation=o),u&&(r.color=u),b(1),v(r,i).then(t=>{var x,s;q(((x=t==null?void 0:t.response)==null?void 0:x.results)||[]),y((s=t==null?void 0:t.response)==null?void 0:s.total_pages),c(!1)}).catch(()=>{c(!1)})}},[o,u,d,i]),p.isEmpty(i)?e.jsxRuntimeExports.jsx("div",{className:"flex h-full flex-col items-center justify-center",children:e.jsxRuntimeExports.jsxs("p",{className:"max-w-3xl text-center text-gray-500",children:["To enable Unsplash, kindly provide your",e.jsxRuntimeExports.jsx("a",{href:"https://unsplash.com/documentation#public-authentication",className:"px-1 underline hover:text-blue-400",target:"_blank",rel:"noopener noreferrer",children:"Unsplash Access Key"})]})}):e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs("form",{className:"flex items-center gap-x-2 rounded-md border border-border bg-background p-px",children:[e.jsxRuntimeExports.jsx(f.Input,{type:"text",name:"query",className:"text-foreground",placeholder:'Try "dog" or "apple"',onChange:r=>P(r.target.value)}),e.jsxRuntimeExports.jsx("div",{children:e.jsxRuntimeExports.jsx(g.ChaiSelect,{className:"w-40",placeholder:E("Orientation"),options:[{value:"",label:"All"},{value:"landscape",label:"Landscape"},{value:"portrait",label:"Portrait"},{value:"squarish",label:"Square"}],defaultValue:o,onValueChange:r=>w(r)})}),e.jsxRuntimeExports.jsx("div",{children:e.jsxRuntimeExports.jsx(g.ChaiSelect,{placeholder:E("Color"),options:[{value:"",label:"All"},{value:"black_and_white",label:"Black and White"},{value:"black",label:"Black"},{value:"white",label:"White"},{value:"night",label:"Night"},{value:"warm",label:"Warm"},{value:"cool",label:"Cool"},{value:"sepia",label:"Sepia"}],defaultValue:u,onValueChange:r=>k(r)})})]}),e.jsxRuntimeExports.jsxs(f.ScrollArea,{className:`h-full ${h&&!p.isEmpty(a)?"-mx-2 flex flex-wrap px-2":"-mx-2 flex flex-col pb-8 pt-2"}`,children:[p.isEmpty(a)&&!m&&e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col items-center justify-center py-6",children:[e.jsxRuntimeExports.jsx("div",{className:"font-medium",children:"No Data"}),e.jsxRuntimeExports.jsx("div",{className:"text-sm text-gray-500",children:"Enter query and press enter"})]}),h?e.jsxRuntimeExports.jsx("div",{className:"h-full columns-5 py-2",children:a.map(r=>e.jsxRuntimeExports.jsx("div",{role:"button",tabIndex:0,className:"my-1 flex",onClick:()=>j(r.urls.regular),children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",alt:r.alt_description,src:r.urls.small})})},r.id))}):a.map(r=>e.jsxRuntimeExports.jsx("div",{className:"w-full px-2 py-1",children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto cursor-pointer transition duration-300 ease-in-out hover:scale-105",alt:r.alt_description,src:r.urls.small})})},r.id)),m&&e.jsxRuntimeExports.jsxs("div",{className:"flex items-center justify-center py-8",children:[e.jsxRuntimeExports.jsx(B.Loader,{className:"h-6 w-6 animate-spin"}),"  Loading..."]}),!p.isEmpty(a)&&l<C&&!m&&e.jsxRuntimeExports.jsx(f.Button,{size:"sm",variant:"link",className:"w-full",onClick:()=>I(void 0),disabled:m,children:m?"":"Load More"})]})]})};exports.default=D;exports.fetchImage=v;

package/dist/UnsplashImages-nQSvWPU0.js

@@ -0,0 +1,244 @@
+import { j as e } from "./jsx-runtime-Sp0orL4X.js";
+import { useState as c, useEffect as q } from "react";
+import { isEmpty as d } from "lodash-es";
+import { createApi as B } from "unsplash-js";
+import { I as D, S as E, B as L } from "./context-menu-YGd09SE1.js";
+import { useTranslation as T } from "react-i18next";
+import { d as F, C as k } from "./index-3NV_rst1.js";
+import { useDebouncedState as K } from "@react-hookz/web";
+import { Loader as U } from "lucide-react";
+import "@radix-ui/react-switch";
+import "@radix-ui/react-accordion";
+import "@radix-ui/react-icons";
+import "class-variance-authority";
+import "@radix-ui/react-alert-dialog";
+import "@radix-ui/react-slot";
+import "@radix-ui/react-label";
+import "@radix-ui/react-scroll-area";
+import "@radix-ui/react-tabs";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-popover";
+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-dialog";
+import "@radix-ui/react-context-menu";
+import "clsx";
+import "tailwind-merge";
+import "jotai";
+import "./iconBase-Ief2hJUZ.js";
+import "@chaibuilder/runtime";
+import "./plugin-f6SDZ_Or.js";
+import "tree-model";
+import "react-quill";
+import "./STRINGS-Xxstm-7I.js";
+import "flagged";
+import "react-hotkeys-hook";
+import "@floating-ui/dom";
+import "@floating-ui/react-dom";
+import "react-event-hook";
+import "@tailwindcss/typography";
+import "@tailwindcss/forms";
+import "@tailwindcss/aspect-ratio";
+import "react-wrap-balancer";
+import "react-dom";
+import "prop-types";
+import "react-error-boundary";
+import "re-resizable";
+import "@rjsf/validator-ajv8";
+import "@rjsf/core";
+import "./controls-lEwMTdPQ.js";
+import "react-arborist";
+import "himalaya";
+import "react-icons-picker";
+import "react-autosuggest";
+import "fuse.js";
+import "i18next";
+import "framer-motion";
+const C = async (f, g) => new Promise((s, r) => {
+  B({ accessKey: g }).search.getPhotos(f).then((i) => {
+    s(i);
+  }).catch((i) => r(i));
+}), $e = ({ isModalView: f, onSelect: g }) => {
+  const s = F("unsplashAccessKey", ""), [r, x] = c([]), [i, v] = c(0), [l, P] = c(), [n, A] = c(), [I, b] = c(0), [h, S] = K("", 1e3), [u, m] = c(!1), { t: j } = T(), _ = async (a) => {
+    if (d(h))
+      return;
+    let t = i + 1;
+    a && (a.preventDefault(), t = 1), m(!0), v(t);
+    const p = { query: h, page: t };
+    l && (p.orientation = l), n && (p.color = n), C(p, s).then((o) => {
+      var y, N, w;
+      x(t === 1 ? ((y = o == null ? void 0 : o.response) == null ? void 0 : y.results) || [] : [...r, ...((N = o == null ? void 0 : o.response) == null ? void 0 : N.results) || []]), b((w = o == null ? void 0 : o.response) == null ? void 0 : w.total_pages), m(!1);
+    }).catch(() => {
+      m(!1);
+    });
+  };
+  return q(() => {
+    if (!d(h) && s) {
+      m(!0);
+      const a = { query: h, page: 1 };
+      l && (a.orientation = l), n && (a.color = n), v(1), C(a, s).then((t) => {
+        var p, o;
+        x(((p = t == null ? void 0 : t.response) == null ? void 0 : p.results) || []), b((o = t == null ? void 0 : t.response) == null ? void 0 : o.total_pages), m(!1);
+      }).catch(() => {
+        m(!1);
+      });
+    }
+  }, [l, n, h, s]), d(s) ? /* @__PURE__ */ e.jsx("div", { className: "flex h-full flex-col items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "max-w-3xl text-center text-gray-500", children: [
+    "To enable Unsplash, kindly provide your",
+    /* @__PURE__ */ e.jsx(
+      "a",
+      {
+        href: "https://unsplash.com/documentation#public-authentication",
+        className: "px-1 underline hover:text-blue-400",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: "Unsplash Access Key"
+      }
+    )
+  ] }) }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs("form", { className: "flex items-center gap-x-2 rounded-md border border-border bg-background p-px", children: [
+      /* @__PURE__ */ e.jsx(
+        D,
+        {
+          type: "text",
+          name: "query",
+          className: "text-foreground",
+          placeholder: 'Try "dog" or "apple"',
+          onChange: (a) => S(a.target.value)
+        }
+      ),
+      /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(
+        k,
+        {
+          className: "w-40",
+          placeholder: j("Orientation"),
+          options: [
+            {
+              value: "",
+              label: "All"
+            },
+            {
+              value: "landscape",
+              label: "Landscape"
+            },
+            {
+              value: "portrait",
+              label: "Portrait"
+            },
+            {
+              value: "squarish",
+              label: "Square"
+            }
+          ],
+          defaultValue: l,
+          onValueChange: (a) => P(a)
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(
+        k,
+        {
+          placeholder: j("Color"),
+          options: [
+            {
+              value: "",
+              label: "All"
+            },
+            {
+              value: "black_and_white",
+              label: "Black and White"
+            },
+            {
+              value: "black",
+              label: "Black"
+            },
+            {
+              value: "white",
+              label: "White"
+            },
+            {
+              value: "night",
+              label: "Night"
+            },
+            {
+              value: "warm",
+              label: "Warm"
+            },
+            {
+              value: "cool",
+              label: "Cool"
+            },
+            {
+              value: "sepia",
+              label: "Sepia"
+            }
+          ],
+          defaultValue: n,
+          onValueChange: (a) => A(a)
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e.jsxs(
+      E,
+      {
+        className: `h-full ${f && !d(r) ? "-mx-2 flex flex-wrap px-2" : "-mx-2 flex flex-col pb-8 pt-2"}`,
+        children: [
+          d(r) && !u && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
+            /* @__PURE__ */ e.jsx("div", { className: "font-medium", children: "No Data" }),
+            /* @__PURE__ */ e.jsx("div", { className: "text-sm text-gray-500", children: "Enter query and press enter" })
+          ] }),
+          f ? /* @__PURE__ */ e.jsx("div", { className: "h-full columns-5 py-2", children: r.map((a) => /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              className: "my-1 flex",
+              onClick: () => g(a.urls.regular),
+              children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
+                "img",
+                {
+                  className: "h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",
+                  alt: a.alt_description,
+                  src: a.urls.small
+                }
+              ) })
+            },
+            a.id
+          )) }) : r.map((a) => (
+            // TODO: Drag and Drop Image to Canvas from Here use `pic.urls.[small, regular, full]` for image quality
+            /* @__PURE__ */ e.jsx("div", { className: "w-full px-2 py-1", children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
+              "img",
+              {
+                className: "h-auto cursor-pointer transition duration-300 ease-in-out hover:scale-105",
+                alt: a.alt_description,
+                src: a.urls.small
+              }
+            ) }) }, a.id)
+          )),
+          u && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-center py-8", children: [
+            /* @__PURE__ */ e.jsx(U, { className: "h-6 w-6 animate-spin" }),
+            "  Loading..."
+          ] }),
+          !d(r) && i < I && !u && /* @__PURE__ */ e.jsx(
+            L,
+            {
+              size: "sm",
+              variant: "link",
+              className: "w-full",
+              onClick: () => _(void 0),
+              disabled: u,
+              children: u ? "" : "Load More"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  $e as default,
+  C as fetchImage
+};

package/dist/UploadImages-L9LlI-jl.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-JYMCiFoE.cjs"),i=require("react"),n=require("lodash-es"),E=require("jotai"),I=require("./context-menu-sQn7ryJ6.cjs"),w=require("react-i18next"),g=require("./index-qTKBamQ6.cjs"),b=require("lucide-react");require("@radix-ui/react-switch");require("@radix-ui/react-accordion");require("@radix-ui/react-icons");require("class-variance-authority");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-slot");require("@radix-ui/react-label");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-tooltip");require("@radix-ui/react-popover");require("@radix-ui/react-hover-card");require("@radix-ui/react-select");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-separator");require("@radix-ui/react-toast");require("cmdk");require("@radix-ui/react-dialog");require("@radix-ui/react-context-menu");require("clsx");require("tailwind-merge");require("./iconBase-aZzpqff_.cjs");require("@chaibuilder/runtime");require("./plugin-xOpS-UNV.cjs");require("@react-hookz/web");require("tree-model");require("react-quill");require("./STRINGS-Yl7cSWDc.cjs");require("flagged");require("react-hotkeys-hook");require("@floating-ui/dom");require("@floating-ui/react-dom");require("react-event-hook");require("@tailwindcss/typography");require("@tailwindcss/forms");require("@tailwindcss/aspect-ratio");require("react-wrap-balancer");require("react-dom");require("prop-types");require("react-error-boundary");require("re-resizable");require("@rjsf/validator-ajv8");require("@rjsf/core");require("./controls-p9IwFnPx.cjs");require("react-arborist");require("himalaya");require("react-icons-picker");require("react-autosuggest");require("fuse.js");require("i18next");require("framer-motion");const k=E.atom([]),S=({isModalView:a,onSelect:o})=>{const{t:s}=w.useTranslation(),d=g.useBuilderProp("uploadMediaCallback"),x=g.useBuilderProp("fetchMediaCallback"),[u,c]=E.useAtom(k),[R,p]=i.useState(!1),[j,q]=i.useState(!1),[,y]=i.useState(),[h,m]=i.useState("");i.useEffect(()=>{(async()=>{if(!x)return;q(!0);const r=await x();c(r||[]),q(!1)})()},[]);const N=r=>{var t,l;if(m(""),r&&((l=(t=r==null?void 0:r.target)==null?void 0:t.files)==null?void 0:l.length)>0){const f=r.target.files[0];f.type.startsWith("image")?v(f):m(s("Please select an image"))}},v=async r=>{if(d){p(!0);try{const{url:t}=await d(r);o(t),y(void 0);const l=await x();c(l)}catch(t){c([]),m((t==null?void 0:t.message)||"Something went wrong.")}p(!1)}};return e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsxs("label",{htmlFor:a?"upload-in-modal":"upload-in-panel",children:[e.jsxRuntimeExports.jsx("div",{className:"flex flex-col items-center rounded-lg",children:e.jsxRuntimeExports.jsxs("label",{htmlFor:"image-upload",className:"flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-border",children:[e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col items-center justify-center pb-6 pt-5",children:[e.jsxRuntimeExports.jsx(b.Upload,{className:"mb-3 h-10 w-10 text-gray-400"}),e.jsxRuntimeExports.jsx("p",{className:"mb-2 text-sm text-gray-500 dark:text-gray-400",children:e.jsxRuntimeExports.jsx("span",{className:"font-semibold",children:s("Click to upload")})}),e.jsxRuntimeExports.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:s("SVG, PNG, JPG or GIF (Max. 2mb)")})]}),R?e.jsxRuntimeExports.jsxs("div",{className:"flex h-full w-full items-center justify-center",children:[e.jsxRuntimeExports.jsx(b.Loader,{className:"h-6 w-6 animate-spin"}),e.jsxRuntimeExports.jsx("span",{className:"ml-2 text-sm text-gray-500",children:s("Uploading...")})]}):null,h&&e.jsxRuntimeExports.jsx("p",{className:"pb-2 text-xs text-red-500",children:h||s("Something went wrong")})]})}),e.jsxRuntimeExports.jsx("input",{type:"file",id:"image-upload",accept:"image/*",hidden:!0,onChange:N})]}),e.jsxRuntimeExports.jsxs(I.ScrollArea,{className:`-mx-2 flex h-full flex-col pb-8 pt-2 ${a?"px-2":""} pt-2`,children:[n.isEmpty(u)&&j&&e.jsxRuntimeExports.jsx("div",{className:"flex flex-col items-center justify-center py-6",children:e.jsxRuntimeExports.jsx("div",{className:"animate-pulse font-medium",children:s("Fetching...")})}),n.isEmpty(u)&&!j&&e.jsxRuntimeExports.jsxs("div",{className:"flex h-full flex-col items-center justify-center text-center",children:[e.jsxRuntimeExports.jsx("div",{className:"mb-4 h-12 rounded-full p-6"}),e.jsxRuntimeExports.jsx("h3",{className:"mb-2 text-sm font-semibold",children:s("No images found")}),e.jsxRuntimeExports.jsx("p",{className:"mb-4 max-w-sm text-muted-foreground",children:s("It looks like you haven't uploaded any images yet. Start by clicking the upload button above.")})]}),a?e.jsxRuntimeExports.jsx("div",{className:"h-full columns-5 py-2",children:n.map(u,r=>e.jsxRuntimeExports.jsx("div",{role:"button",tabIndex:0,className:"my-1 flex",onClick:()=>o(r.url),children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",alt:r.name,src:r.thumbUrl})})},r.id))}):n.map(u,r=>e.jsxRuntimeExports.jsx("div",{role:"button",tabIndex:0,className:"px-2 py-1",onClick:()=>o(r.url),children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto w-full cursor-pointer transition duration-300 ease-in-out hover:scale-105",alt:r.name,src:r.url})})},r.id))]})]})};exports.default=S;