@chaibuilder/sdk 2.0.0-beta.9 → 2.0.0-beta.91

package/README.md

@@ -4,9 +4,7 @@ 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. 
 
-#### [View Demo](https://chaibuilder.com/demos/web)
-#### [Documentation](https://chaibuilder.com/docs/sdk/introduction)
-#### [API References](https://api-reference.chaibuilder.com)
+Demo: https://chaibuilder-sdk.vercel.app/
 
 ---
 

package/dist/ChaiThemeFn-DcE5RdLQ.cjs

@@ -0,0 +1,236 @@
+"use strict";
+const lodashEs = require("lodash-es");
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+const defaultThemeOptions = {
+  fontFamily: {
+    "font-heading": "Inter",
+    "font-body": "Inter"
+  },
+  borderRadius: "10px",
+  colors: [
+    {
+      group: "Body",
+      items: {
+        background: ["#FFFFFF", "#121212"],
+        foreground: ["#121212", "#FFFFFF"]
+      }
+    },
+    {
+      group: "Primary",
+      items: {
+        primary: ["#2563EB", "#3B82F6"],
+        "primary-foreground": ["#FFFFFF", "#FFFFFF"]
+      }
+    },
+    {
+      group: "Secondary",
+      items: {
+        secondary: ["#F3F4F6", "#374151"],
+        "secondary-foreground": ["#1F2937", "#F9FAFB"]
+      }
+    },
+    {
+      group: "Border, Input & Ring",
+      items: {
+        border: ["#E5E7EB", "#374151"],
+        input: ["#E5E7EB", "#374151"],
+        ring: ["#2563EB", "#3B82F6"]
+      }
+    },
+    {
+      group: "Card",
+      items: {
+        card: ["#FFFFFF", "#1F2937"],
+        "card-foreground": ["#121212", "#FFFFFF"]
+      }
+    },
+    {
+      group: "Popover",
+      items: {
+        popover: ["#FFFFFF", "#1F2937"],
+        "popover-foreground": ["#121212", "#FFFFFF"]
+      }
+    },
+    {
+      group: "Muted",
+      items: {
+        muted: ["#F3F4F6", "#374151"],
+        "muted-foreground": ["#6B7280", "#9CA3AF"]
+      }
+    },
+    {
+      group: "Accent",
+      items: {
+        accent: ["#F3F4F6", "#374151"],
+        "accent-foreground": ["#1F2937", "#FFFFFF"]
+      }
+    },
+    {
+      group: "Destructive",
+      items: {
+        destructive: ["#DC2626", "#EF4444"],
+        "destructive-foreground": ["#FFFFFF", "#FFFFFF"]
+      }
+    }
+  ]
+};
+var createPlugin$1 = {};
+var createPlugin = {};
+var hasRequiredCreatePlugin$1;
+function requireCreatePlugin$1() {
+  if (hasRequiredCreatePlugin$1) return createPlugin;
+  hasRequiredCreatePlugin$1 = 1;
+  (function(exports2) {
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    function createPlugin2(plugin2, config) {
+      return {
+        handler: plugin2,
+        config
+      };
+    }
+    createPlugin2.withOptions = function(pluginFunction, configFunction = () => ({})) {
+      const optionsFunction = function(options) {
+        return {
+          __options: options,
+          handler: pluginFunction(options),
+          config: configFunction(options)
+        };
+      };
+      optionsFunction.__isOptionsFunction = true;
+      optionsFunction.__pluginFunction = pluginFunction;
+      optionsFunction.__configFunction = configFunction;
+      return optionsFunction;
+    };
+    const _default = createPlugin2;
+  })(createPlugin);
+  return createPlugin;
+}
+var hasRequiredCreatePlugin;
+function requireCreatePlugin() {
+  if (hasRequiredCreatePlugin) return createPlugin$1;
+  hasRequiredCreatePlugin = 1;
+  (function(exports2) {
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    const _createPlugin = /* @__PURE__ */ _interop_require_default(requireCreatePlugin$1());
+    function _interop_require_default(obj) {
+      return obj && obj.__esModule ? obj : {
+        default: obj
+      };
+    }
+    const _default = _createPlugin.default;
+  })(createPlugin$1);
+  return createPlugin$1;
+}
+var plugin$1;
+var hasRequiredPlugin;
+function requirePlugin() {
+  if (hasRequiredPlugin) return plugin$1;
+  hasRequiredPlugin = 1;
+  let createPlugin2 = requireCreatePlugin();
+  plugin$1 = (createPlugin2.__esModule ? createPlugin2 : { default: createPlugin2 }).default;
+  return plugin$1;
+}
+var pluginExports = requirePlugin();
+const plugin = /* @__PURE__ */ getDefaultExportFromCjs(pluginExports);
+const getChaiThemeOptions = (chaiThemeOptions) => {
+  const theme = {
+    fontFamily: chaiThemeOptions.fontFamily ? lodashEs.keys(chaiThemeOptions.fontFamily).reduce(
+      (acc, key) => ({
+        ...acc,
+        [key.replace("font-", "")]: `var(--${key})`
+      }),
+      {}
+    ) : {},
+    borderRadius: chaiThemeOptions.borderRadius ? {
+      lg: `var(--radius)`,
+      md: `calc(var(--radius) - 2px)`,
+      sm: `calc(var(--radius) - 4px)`
+    } : {},
+    colors: chaiThemeOptions.colors ? lodashEs.flatten(chaiThemeOptions.colors.map((color) => Object.entries(color.items))).reduce(
+      (acc, [key]) => ({ ...acc, [key]: `hsl(var(--${key}))` }),
+      {}
+    ) : {}
+  };
+  return theme;
+};
+function hexToHSL(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let r = parseInt(result[1], 16);
+  let g = parseInt(result[2], 16);
+  let b = parseInt(result[3], 16);
+  r /= 255, g /= 255, b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h;
+  let s;
+  const l = (max + min) / 2;
+  if (max == min) {
+    h = s = 0;
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+const getChaiThemeCssVariables = (chaiTheme) => {
+  return `:root {
+    ${chaiTheme.fontFamily && Object.entries(chaiTheme.fontFamily).map(([key, value]) => `--font-${key}: "${value}";`).join("\n    ")}
+    ${chaiTheme.borderRadius && `--radius: ${chaiTheme.borderRadius};`}
+    ${chaiTheme.colors && Object.entries(chaiTheme.colors).map(([key, value]) => `--${key}: ${hexToHSL(value[0])};`).join("\n    ")}
+  }
+  .dark {
+    ${chaiTheme.colors && Object.entries(chaiTheme.colors).map(([key, value]) => `--${key}: ${hexToHSL(value[1])};`).join("\n    ")}
+  }`;
+};
+const getThemeFontsLinkMarkup = (chaiTheme) => {
+  if (lodashEs.isEmpty(chaiTheme.fontFamily)) return "";
+  const links = lodashEs.uniq(Object.entries(chaiTheme.fontFamily).map(([, value]) => value));
+  return links.map((link) => {
+    const googleFontUrl = `https://fonts.googleapis.com/css2?family=${link.replace(/\s+/g, "+")}&display=swap`;
+    return `<link rel="stylesheet" href="${googleFontUrl}">`;
+  }).join("\n");
+};
+const getThemeFontsCSSImport = (chaiTheme) => {
+  if (lodashEs.isEmpty(chaiTheme.fontFamily)) return "";
+  const links = lodashEs.uniq(Object.entries(chaiTheme.fontFamily).map(([, value]) => value));
+  return links.map((link) => {
+    const googleFontUrl = `https://fonts.googleapis.com/css2?family=${link.replace(/\s+/g, "+")}&display=swap`;
+    return `@import url("${googleFontUrl}");`;
+  }).join("\n");
+};
+exports.defaultThemeOptions = defaultThemeOptions;
+exports.getChaiThemeCssVariables = getChaiThemeCssVariables;
+exports.getChaiThemeOptions = getChaiThemeOptions;
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+exports.getThemeFontsCSSImport = getThemeFontsCSSImport;
+exports.getThemeFontsLinkMarkup = getThemeFontsLinkMarkup;
+exports.plugin = plugin;

package/dist/ChaiThemeFn-DzirXKjI.js

@@ -0,0 +1,237 @@
+import { isEmpty, uniq, keys, flatten } from "lodash-es";
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+const defaultThemeOptions = {
+  fontFamily: {
+    "font-heading": "Inter",
+    "font-body": "Inter"
+  },
+  borderRadius: "10px",
+  colors: [
+    {
+      group: "Body",
+      items: {
+        background: ["#FFFFFF", "#121212"],
+        foreground: ["#121212", "#FFFFFF"]
+      }
+    },
+    {
+      group: "Primary",
+      items: {
+        primary: ["#2563EB", "#3B82F6"],
+        "primary-foreground": ["#FFFFFF", "#FFFFFF"]
+      }
+    },
+    {
+      group: "Secondary",
+      items: {
+        secondary: ["#F3F4F6", "#374151"],
+        "secondary-foreground": ["#1F2937", "#F9FAFB"]
+      }
+    },
+    {
+      group: "Border, Input & Ring",
+      items: {
+        border: ["#E5E7EB", "#374151"],
+        input: ["#E5E7EB", "#374151"],
+        ring: ["#2563EB", "#3B82F6"]
+      }
+    },
+    {
+      group: "Card",
+      items: {
+        card: ["#FFFFFF", "#1F2937"],
+        "card-foreground": ["#121212", "#FFFFFF"]
+      }
+    },
+    {
+      group: "Popover",
+      items: {
+        popover: ["#FFFFFF", "#1F2937"],
+        "popover-foreground": ["#121212", "#FFFFFF"]
+      }
+    },
+    {
+      group: "Muted",
+      items: {
+        muted: ["#F3F4F6", "#374151"],
+        "muted-foreground": ["#6B7280", "#9CA3AF"]
+      }
+    },
+    {
+      group: "Accent",
+      items: {
+        accent: ["#F3F4F6", "#374151"],
+        "accent-foreground": ["#1F2937", "#FFFFFF"]
+      }
+    },
+    {
+      group: "Destructive",
+      items: {
+        destructive: ["#DC2626", "#EF4444"],
+        "destructive-foreground": ["#FFFFFF", "#FFFFFF"]
+      }
+    }
+  ]
+};
+var createPlugin$1 = {};
+var createPlugin = {};
+var hasRequiredCreatePlugin$1;
+function requireCreatePlugin$1() {
+  if (hasRequiredCreatePlugin$1) return createPlugin;
+  hasRequiredCreatePlugin$1 = 1;
+  (function(exports) {
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    function createPlugin2(plugin2, config) {
+      return {
+        handler: plugin2,
+        config
+      };
+    }
+    createPlugin2.withOptions = function(pluginFunction, configFunction = () => ({})) {
+      const optionsFunction = function(options) {
+        return {
+          __options: options,
+          handler: pluginFunction(options),
+          config: configFunction(options)
+        };
+      };
+      optionsFunction.__isOptionsFunction = true;
+      optionsFunction.__pluginFunction = pluginFunction;
+      optionsFunction.__configFunction = configFunction;
+      return optionsFunction;
+    };
+    const _default = createPlugin2;
+  })(createPlugin);
+  return createPlugin;
+}
+var hasRequiredCreatePlugin;
+function requireCreatePlugin() {
+  if (hasRequiredCreatePlugin) return createPlugin$1;
+  hasRequiredCreatePlugin = 1;
+  (function(exports) {
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    const _createPlugin = /* @__PURE__ */ _interop_require_default(requireCreatePlugin$1());
+    function _interop_require_default(obj) {
+      return obj && obj.__esModule ? obj : {
+        default: obj
+      };
+    }
+    const _default = _createPlugin.default;
+  })(createPlugin$1);
+  return createPlugin$1;
+}
+var plugin$1;
+var hasRequiredPlugin;
+function requirePlugin() {
+  if (hasRequiredPlugin) return plugin$1;
+  hasRequiredPlugin = 1;
+  let createPlugin2 = requireCreatePlugin();
+  plugin$1 = (createPlugin2.__esModule ? createPlugin2 : { default: createPlugin2 }).default;
+  return plugin$1;
+}
+var pluginExports = requirePlugin();
+const plugin = /* @__PURE__ */ getDefaultExportFromCjs(pluginExports);
+const getChaiThemeOptions = (chaiThemeOptions) => {
+  const theme = {
+    fontFamily: chaiThemeOptions.fontFamily ? keys(chaiThemeOptions.fontFamily).reduce(
+      (acc, key) => ({
+        ...acc,
+        [key.replace("font-", "")]: `var(--${key})`
+      }),
+      {}
+    ) : {},
+    borderRadius: chaiThemeOptions.borderRadius ? {
+      lg: `var(--radius)`,
+      md: `calc(var(--radius) - 2px)`,
+      sm: `calc(var(--radius) - 4px)`
+    } : {},
+    colors: chaiThemeOptions.colors ? flatten(chaiThemeOptions.colors.map((color) => Object.entries(color.items))).reduce(
+      (acc, [key]) => ({ ...acc, [key]: `hsl(var(--${key}))` }),
+      {}
+    ) : {}
+  };
+  return theme;
+};
+function hexToHSL(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let r = parseInt(result[1], 16);
+  let g = parseInt(result[2], 16);
+  let b = parseInt(result[3], 16);
+  r /= 255, g /= 255, b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h;
+  let s;
+  const l = (max + min) / 2;
+  if (max == min) {
+    h = s = 0;
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+const getChaiThemeCssVariables = (chaiTheme) => {
+  return `:root {
+    ${chaiTheme.fontFamily && Object.entries(chaiTheme.fontFamily).map(([key, value]) => `--font-${key}: "${value}";`).join("\n    ")}
+    ${chaiTheme.borderRadius && `--radius: ${chaiTheme.borderRadius};`}
+    ${chaiTheme.colors && Object.entries(chaiTheme.colors).map(([key, value]) => `--${key}: ${hexToHSL(value[0])};`).join("\n    ")}
+  }
+  .dark {
+    ${chaiTheme.colors && Object.entries(chaiTheme.colors).map(([key, value]) => `--${key}: ${hexToHSL(value[1])};`).join("\n    ")}
+  }`;
+};
+const getThemeFontsLinkMarkup = (chaiTheme) => {
+  if (isEmpty(chaiTheme.fontFamily)) return "";
+  const links = uniq(Object.entries(chaiTheme.fontFamily).map(([, value]) => value));
+  return links.map((link) => {
+    const googleFontUrl = `https://fonts.googleapis.com/css2?family=${link.replace(/\s+/g, "+")}&display=swap`;
+    return `<link rel="stylesheet" href="${googleFontUrl}">`;
+  }).join("\n");
+};
+const getThemeFontsCSSImport = (chaiTheme) => {
+  if (isEmpty(chaiTheme.fontFamily)) return "";
+  const links = uniq(Object.entries(chaiTheme.fontFamily).map(([, value]) => value));
+  return links.map((link) => {
+    const googleFontUrl = `https://fonts.googleapis.com/css2?family=${link.replace(/\s+/g, "+")}&display=swap`;
+    return `@import url("${googleFontUrl}");`;
+  }).join("\n");
+};
+export {
+  getChaiThemeCssVariables as a,
+  getThemeFontsCSSImport as b,
+  getThemeFontsLinkMarkup as c,
+  defaultThemeOptions as d,
+  getDefaultExportFromCjs as e,
+  getChaiThemeOptions as g,
+  plugin as p
+};

package/dist/CodeEditor-C8_JzwHn.cjs

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactIcons = require("@radix-ui/react-icons");
+const web = require("@react-hookz/web");
+const React = require("react");
+const reactI18next = require("react-i18next");
+const contextMenu = require("./context-menu-DawHUIXd.cjs");
+const core = require("./core.cjs");
+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.jsxs("div", { className: "h-full text-white bg-black border-t-4 border-black rounded-t-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClickOutside, className: "fixed inset-0 z-[100000] cursor-default bg-gray-400/20" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-[100001] h-full w-full flex-col gap-y-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-2 py-2 -mt-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "space-x-3 text-sm font-semibold", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("HTML Code Editor |") }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: t("Scripts will be only executed in preview and live mode.") })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-x-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          contextMenu.Button,
+          {
+            onClick: () => setCodeEditor(null),
+            size: "sm",
+            variant: "destructive",
+            className: "h-6 w-fit",
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Cross2Icon, {})
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          className: "w-full h-full p-2 font-mono text-xs bg-black text-white/90",
+          value: code || codeEditor.initialCode,
+          onChange: (e) => {
+            const value = e.target.value;
+            setDirty(true);
+            setCode(value);
+            saveCodeContentRealTime(value);
+          }
+        }
+      )
+    ] })
+  ] });
+}
+exports.default = CodeEditor;

package/dist/CodeEditor-DdIk_PEV.js

@@ -0,0 +1,81 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { useThrottledCallback } from "@react-hookz/web";
+import { useState, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { B as Button } from "./context-menu-DHla8ofZ.js";
+import { useCodeEditor, useSelectedBlockIds, useUpdateBlocksProps, useUpdateBlocksPropsRealtime } from "./core.js";
+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__ */ jsxs("div", { className: "h-full text-white bg-black border-t-4 border-black rounded-t-lg", children: [
+    /* @__PURE__ */ jsx("button", { onClick: handleClickOutside, className: "fixed inset-0 z-[100000] cursor-default bg-gray-400/20" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-[100001] h-full w-full flex-col gap-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-2 -mt-1", children: [
+        /* @__PURE__ */ jsxs("h3", { className: "space-x-3 text-sm font-semibold", children: [
+          /* @__PURE__ */ jsx("span", { children: t("HTML Code Editor |") }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400", children: t("Scripts will be only executed in preview and live mode.") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-x-2", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => setCodeEditor(null),
+            size: "sm",
+            variant: "destructive",
+            className: "h-6 w-fit",
+            children: /* @__PURE__ */ jsx(Cross2Icon, {})
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: "w-full h-full p-2 font-mono text-xs bg-black text-white/90",
+          value: code || codeEditor.initialCode,
+          onChange: (e) => {
+            const value = e.target.value;
+            setDirty(true);
+            setCode(value);
+            saveCodeContentRealTime(value);
+          }
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  CodeEditor as default
+};

package/dist/Topbar-62QmCKWL.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const contextMenu = require("./context-menu-DawHUIXd.cjs");
+require("react-i18next");
+const core = require("./core.cjs");
+const Topbar = () => {
+  const leftComponents = core.useBuilderProp("topBarComponents.left", []);
+  const centerComponents = core.useBuilderProp("topBarComponents.center", []);
+  const rightComponents = core.useBuilderProp("topBarComponents.right", []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-14 items-center justify-between px-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2 font-bold", children: leftComponents.map((Component, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(contextMenu.Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsxRuntime.jsx(Component, {}) }, `left-${index}`)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2", children: centerComponents.map((Component, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(contextMenu.Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsxRuntime.jsx(Component, {}) }, `center-${index}`)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-1", children: rightComponents.map((Component, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(contextMenu.Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsxRuntime.jsx(Component, {}) }, `right-${index}`)) })
+  ] });
+};
+exports.default = Topbar;

package/dist/Topbar-Cqt0j3Yt.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { S as Skeleton } from "./context-menu-DHla8ofZ.js";
+import "react-i18next";
+import { useBuilderProp } from "./core.js";
+const Topbar = () => {
+  const leftComponents = useBuilderProp("topBarComponents.left", []);
+  const centerComponents = useBuilderProp("topBarComponents.center", []);
+  const rightComponents = useBuilderProp("topBarComponents.right", []);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center justify-between px-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-2 font-bold", children: leftComponents.map((Component, index) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsx(Component, {}) }, `left-${index}`)) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-2", children: centerComponents.map((Component, index) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsx(Component, {}) }, `center-${index}`)) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-1", children: rightComponents.map((Component, index) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-10" }), children: /* @__PURE__ */ jsx(Component, {}) }, `right-${index}`)) })
+  ] });
+};
+export {
+  Topbar as default
+};