@chaibuilder/sdk 1.2.9 → 1.2.10-7.beta.2

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-2fowVPcS.cjs

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("./jsx-runtime-vPqyLgmD.cjs");
+const Editor = require("@monaco-editor/react");
+const contextMenu = require("./context-menu-VMB9i0d8.cjs");
+const reactI18next = require("react-i18next");
+const React = require("react");
+const core = require("./index-WHVUpVPa.cjs");
+const reactIcons = require("@radix-ui/react-icons");
+const web = 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-OGxLGBQ1.cjs");
+require("@chaibuilder/runtime");
+require("./plugin-RAiM74uD.cjs");
+require("tree-model");
+require("react-quill");
+require("./STRINGS-RCf9qnaS.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-4t-C_rP2.cjs");
+require("react-arborist");
+require("himalaya");
+require("react-icons-picker");
+require("react-autosuggest");
+require("fuse.js");
+require("i18next");
+require("framer-motion");
+const sanitizeHTML = (html) => {
+  const doc = document.createElement("div");
+  doc.innerHTML = html;
+  return doc.innerHTML;
+};
+function CodeEditor() {
+  const { t } = reactI18next.useTranslation();
+  const [dirty, setDirty] = React.useState(false);
+  const [code, setCode] = React.useState("");
+  const [codeEditor, setCodeEditor] = core.useCodeEditor();
+  const [ids] = core.useSelectedBlockIds();
+  const updateBlockProps = core.useUpdateBlocksProps();
+  const updateRealTime = core.useUpdateBlocksPropsRealtime();
+  const saveCodeContentRealTime = web.useThrottledCallback(
+    (value) => {
+      const html = sanitizeHTML(value);
+      updateRealTime([codeEditor.blockId], { [codeEditor.blockProp]: html });
+    },
+    [],
+    300
+  );
+  const saveCodeContent = React.useCallback(() => {
+    if (dirty) {
+      const html = sanitizeHTML(code);
+      updateBlockProps([codeEditor.blockId], { [codeEditor.blockProp]: html });
+    }
+  }, [dirty, code]);
+  React.useEffect(() => {
+    if (!ids.includes(codeEditor == null ? void 0 : codeEditor.blockId)) {
+      saveCodeContent();
+      setCodeEditor(null);
+    }
+  }, [ids]);
+  const handleClickOutside = () => {
+    setCodeEditor(null);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "h-full rounded-t-lg border-t-4 border-black bg-black text-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("button", { onClick: handleClickOutside, className: "fixed inset-0 z-[100000] cursor-default bg-gray-400/20" }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "relative z-[100001] h-full w-full flex-col gap-y-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "-mt-1 flex items-center justify-between px-2 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("h3", { className: "space-x-3 text-sm font-semibold", children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { children: t("HTML Code Editor |") }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400", children: t("Scripts will be only executed in preview and live mode.") })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex gap-x-2", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          contextMenu.Button,
+          {
+            onClick: () => setCodeEditor(null),
+            size: "sm",
+            variant: "destructive",
+            className: "h-6 w-fit",
+            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(reactIcons.Cross2Icon, {})
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        Editor,
+        {
+          onMount: (editor) => {
+            editor.setValue(codeEditor.initialCode);
+          },
+          onChange: (value) => {
+            setDirty(true);
+            setCode(value);
+            saveCodeContentRealTime(value);
+          },
+          height: "100%",
+          defaultLanguage: "html",
+          theme: "vs-dark",
+          defaultValue: "",
+          options: {
+            minimap: {
+              enabled: false
+            }
+          }
+        }
+      )
+    ] })
+  ] });
+}
+exports.default = CodeEditor;

package/dist/CodeEditor-b6uePnTe.js

@@ -0,0 +1,143 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-_yxTjXEh.js";
+import Editor from "@monaco-editor/react";
+import { B as Button } from "./context-menu-mp3Gu2KA.js";
+import { useTranslation } from "react-i18next";
+import { useState, useCallback, useEffect } from "react";
+import { u as useCodeEditor, a as useSelectedBlockIds, b as useUpdateBlocksProps, c as useUpdateBlocksPropsRealtime } from "./index-R7v8ZYnu.js";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { useThrottledCallback } 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-Ofd16yeE.js";
+import "@chaibuilder/runtime";
+import "./plugin-YcxlCmRm.js";
+import "tree-model";
+import "react-quill";
+import "./STRINGS-t8UhMYZ6.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-fQIu127i.js";
+import "react-arborist";
+import "himalaya";
+import "react-icons-picker";
+import "react-autosuggest";
+import "fuse.js";
+import "i18next";
+import "framer-motion";
+const sanitizeHTML = (html) => {
+  const doc = document.createElement("div");
+  doc.innerHTML = html;
+  return doc.innerHTML;
+};
+function CodeEditor() {
+  const { t } = useTranslation();
+  const [dirty, setDirty] = useState(false);
+  const [code, setCode] = useState("");
+  const [codeEditor, setCodeEditor] = useCodeEditor();
+  const [ids] = useSelectedBlockIds();
+  const updateBlockProps = useUpdateBlocksProps();
+  const updateRealTime = useUpdateBlocksPropsRealtime();
+  const saveCodeContentRealTime = useThrottledCallback(
+    (value) => {
+      const html = sanitizeHTML(value);
+      updateRealTime([codeEditor.blockId], { [codeEditor.blockProp]: html });
+    },
+    [],
+    300
+  );
+  const saveCodeContent = useCallback(() => {
+    if (dirty) {
+      const html = sanitizeHTML(code);
+      updateBlockProps([codeEditor.blockId], { [codeEditor.blockProp]: html });
+    }
+  }, [dirty, code]);
+  useEffect(() => {
+    if (!ids.includes(codeEditor == null ? void 0 : codeEditor.blockId)) {
+      saveCodeContent();
+      setCodeEditor(null);
+    }
+  }, [ids]);
+  const handleClickOutside = () => {
+    setCodeEditor(null);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full rounded-t-lg border-t-4 border-black bg-black text-white", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: handleClickOutside, className: "fixed inset-0 z-[100000] cursor-default bg-gray-400/20" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative z-[100001] h-full w-full flex-col gap-y-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "-mt-1 flex items-center justify-between px-2 py-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "space-x-3 text-sm font-semibold", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("HTML Code Editor |") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-400", children: t("Scripts will be only executed in preview and live mode.") })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            onClick: () => setCodeEditor(null),
+            size: "sm",
+            variant: "destructive",
+            className: "h-6 w-fit",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Cross2Icon, {})
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Editor,
+        {
+          onMount: (editor) => {
+            editor.setValue(codeEditor.initialCode);
+          },
+          onChange: (value) => {
+            setDirty(true);
+            setCode(value);
+            saveCodeContentRealTime(value);
+          },
+          height: "100%",
+          defaultLanguage: "html",
+          theme: "vs-dark",
+          defaultValue: "",
+          options: {
+            minimap: {
+              enabled: false
+            }
+          }
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  CodeEditor as default
+};

package/dist/STRINGS-RCf9qnaS.cjs

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

package/dist/STRINGS-t8UhMYZ6.js

@@ -0,0 +1,10 @@
+const STYLES_KEY = "#styles:";
+const SLOT_KEY = "#slots:";
+const I18N_KEY = "#i18n";
+const ROOT_TEMP_KEY = "__ADD_BLOCK_INTERNAL_ROOT";
+export {
+  I18N_KEY as I,
+  ROOT_TEMP_KEY as R,
+  STYLES_KEY as S,
+  SLOT_KEY as a
+};

package/dist/Topbar-O21Nrw2O.cjs

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("./jsx-runtime-vPqyLgmD.cjs");
+const React = require("react");
+const contextMenu = require("./context-menu-VMB9i0d8.cjs");
+const core = require("./index-WHVUpVPa.cjs");
+const reactI18next = require("react-i18next");
+const iconBase = require("./iconBase-OGxLGBQ1.cjs");
+const reactIcons = 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-RAiM74uD.cjs");
+require("@react-hookz/web");
+require("tree-model");
+require("react-quill");
+require("./STRINGS-RCf9qnaS.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-4t-C_rP2.cjs");
+require("react-arborist");
+require("himalaya");
+require("react-icons-picker");
+require("react-autosuggest");
+require("fuse.js");
+require("i18next");
+require("framer-motion");
+const SaveButton = () => {
+  const { savePage, saveState } = core.useSavePage();
+  const { t } = reactI18next.useTranslation();
+  const button = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    contextMenu.Button,
+    {
+      disabled: saveState === "SAVING",
+      onClick: (e) => {
+        e.preventDefault();
+        savePage();
+      },
+      className: iconBase.cn(
+        "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": saveState === "SAVING",
+          "bg-green-500 text-white hover:bg-green-600 hover:text-white dark:bg-green-600 dark:text-white": saveState === "SAVED"
+        }
+      ),
+      size: "sm",
+      variant: "outline",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(core.FaCheck, { className: "text-sm text-white" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "text-sm", children: saveState === "SAVING" ? t("saving") : saveState === "SAVED" ? t("saved") : t("unsaved") })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex items-center", children: button });
+};
+const Preview = function Preview2() {
+  const preview = core.useBuilderProp("previewComponent");
+  const [, setPreviewMode] = core.usePreviewMode();
+  const { t } = reactI18next.useTranslation();
+  if (!preview)
+    return null;
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    contextMenu.Button,
+    {
+      onClick: (e) => {
+        e.preventDefault();
+        setPreviewMode(true);
+      },
+      className: `flex h-auto w-fit items-center gap-x-2 p-1 px-2`,
+      size: "sm",
+      variant: "outline",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(reactIcons.EyeOpenIcon, { className: "text-xs" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "text-sm", children: t("preview") })
+      ]
+    }
+  );
+};
+const Topbar = () => {
+  const leftComponents = core.useBuilderProp("topBarComponents.left", []);
+  const centerComponents = core.useBuilderProp("topBarComponents.center", []);
+  const rightComponents = core.useBuilderProp("topBarComponents.right", []);
+  const editable = core.useBuilderProp("editable", true);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex h-14 items-center justify-between px-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2 font-bold", children: React.Children.toArray(
+      leftComponents.map((Component) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(contextMenu.Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Component, {}) }))
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2", children: React.Children.toArray(
+      centerComponents.map((Component) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(contextMenu.Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Component, {}) }))
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Preview, {}),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(contextMenu.Separator, { orientation: "vertical" }),
+      editable ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(SaveButton, {}) : null,
+      React.Children.toArray(
+        rightComponents.map((Component) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(contextMenu.Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Component, {}) }))
+      )
+    ] })
+  ] });
+};
+exports.default = Topbar;

package/dist/Topbar-xFfdTq1m.js

@@ -0,0 +1,137 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-_yxTjXEh.js";
+import React__default, { Suspense } from "react";
+import { B as Button, a as Skeleton, b as Separator } from "./context-menu-mp3Gu2KA.js";
+import { e as useSavePage, F as FaCheck, d as useBuilderProp, f as usePreviewMode } from "./index-R7v8ZYnu.js";
+import { useTranslation } from "react-i18next";
+import { c as cn } from "./iconBase-Ofd16yeE.js";
+import { EyeOpenIcon } 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-YcxlCmRm.js";
+import "@react-hookz/web";
+import "tree-model";
+import "react-quill";
+import "./STRINGS-t8UhMYZ6.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-fQIu127i.js";
+import "react-arborist";
+import "himalaya";
+import "react-icons-picker";
+import "react-autosuggest";
+import "fuse.js";
+import "i18next";
+import "framer-motion";
+const SaveButton = () => {
+  const { savePage, saveState } = useSavePage();
+  const { t } = useTranslation();
+  const button = /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Button,
+    {
+      disabled: saveState === "SAVING",
+      onClick: (e) => {
+        e.preventDefault();
+        savePage();
+      },
+      className: cn(
+        "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": saveState === "SAVING",
+          "bg-green-500 text-white hover:bg-green-600 hover:text-white dark:bg-green-600 dark:text-white": saveState === "SAVED"
+        }
+      ),
+      size: "sm",
+      variant: "outline",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(FaCheck, { className: "text-sm text-white" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: saveState === "SAVING" ? t("saving") : saveState === "SAVED" ? t("saved") : t("unsaved") })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: button });
+};
+const Preview = function Preview2() {
+  const preview = useBuilderProp("previewComponent");
+  const [, setPreviewMode] = usePreviewMode();
+  const { t } = useTranslation();
+  if (!preview)
+    return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Button,
+    {
+      onClick: (e) => {
+        e.preventDefault();
+        setPreviewMode(true);
+      },
+      className: `flex h-auto w-fit items-center gap-x-2 p-1 px-2`,
+      size: "sm",
+      variant: "outline",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOpenIcon, { className: "text-xs" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: t("preview") })
+      ]
+    }
+  );
+};
+const Topbar = () => {
+  const leftComponents = useBuilderProp("topBarComponents.left", []);
+  const centerComponents = useBuilderProp("topBarComponents.center", []);
+  const rightComponents = useBuilderProp("topBarComponents.right", []);
+  const editable = useBuilderProp("editable", true);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-14 items-center justify-between px-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2 font-bold", children: React__default.Children.toArray(
+      leftComponents.map((Component) => /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {}) }))
+    ) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-2", children: React__default.Children.toArray(
+      centerComponents.map((Component) => /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {}) }))
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Preview, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { orientation: "vertical" }),
+      editable ? /* @__PURE__ */ jsxRuntimeExports.jsx(SaveButton, {}) : null,
+      React__default.Children.toArray(
+        rightComponents.map((Component) => /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, {}) }))
+      )
+    ] })
+  ] });
+};
+export {
+  Topbar as default
+};