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

package/dist/CodeEditor-1LboGb1I.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("./jsx-runtime-B6vEU3CM.cjs");
+const Editor = require("@monaco-editor/react");
+const contextMenu = require("./context-menu-BLbuduri.cjs");
+const reactI18next = require("react-i18next");
+const React = require("react");
+const core = require("./index-Bjw2sUN2.cjs");
+const reactIcons = require("@radix-ui/react-icons");
+const web = require("@react-hookz/web");
+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-BKgZeXwz.js

@@ -0,0 +1,91 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-ClFauRgV.js";
+import Editor from "@monaco-editor/react";
+import { B as Button } from "./context-menu-BgtRnByf.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-D8_rAW8B.js";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { useThrottledCallback } from "@react-hookz/web";
+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-3Sn_NeX1.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-DdpfVlsV.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-B8IS6y4H.js

@@ -0,0 +1,135 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-ClFauRgV.js";
+import React__default, { useMemo, Suspense } from "react";
+import { B as Button, a6 as DropdownMenu, a7 as DropdownMenuTrigger, a8 as DropdownMenuContent, a9 as DropdownMenuItem, aq as Skeleton, al as Separator } from "./context-menu-BgtRnByf.js";
+import { e as useSavePage, F as FaCheck, d as useBuilderProp, f as usePreviewMode, g as useLanguages, L as LANGUAGES, h as FaLanguage, i as FaStar } from "./index-D8_rAW8B.js";
+import { useTranslation } from "react-i18next";
+import { c as cn } from "./iconBase-CWgVxu0A.js";
+import { EyeOpenIcon, ChevronDownIcon } from "@radix-ui/react-icons";
+import { forEach, uniq, get, isEmpty, map } from "lodash-es";
+import "@chaibuilder/runtime";
+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 LanguageSelector = () => {
+  const { fallbackLang, languages, selectedLang, setSelectedLang } = useLanguages();
+  const currentLang = (selectedLang == null ? void 0 : selectedLang.length) > 0 ? selectedLang : fallbackLang;
+  const langOptions = useMemo(() => {
+    const options = [];
+    forEach(uniq([fallbackLang, ...languages]), (key) => {
+      const value = get(LANGUAGES, key);
+      if (value) options.push({ key, value, default: key === fallbackLang });
+    });
+    return options;
+  }, [fallbackLang, languages]);
+  if (isEmpty(languages) && currentLang === "en") {
+    return null;
+  }
+  if (isEmpty(languages) && currentLang !== "en") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-1 text-sm text-blue-500 hover:text-blue-600", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(FaLanguage, { className: "h-4 w-4" }),
+      get(LANGUAGES, currentLang)
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { size: "sm", variant: "outline", className: "flex items-center gap-x-1 text-blue-500 hover:text-blue-600", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(FaLanguage, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          " ",
+          get(LANGUAGES, currentLang)
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDownIcon, { className: "h-4 w-4" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuContent, { className: "border-border", children: map(langOptions, (option) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      DropdownMenuItem,
+      {
+        className: cn(
+          "flex cursor-pointer items-center text-sm",
+          option.key === currentLang && "!bg-blue-500 text-white hover:!text-white"
+        ),
+        onClick: () => setSelectedLang(option.key),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: option.value }),
+          option.key === fallbackLang ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaStar, { className: "ml-2 h-4 w-4 text-yellow-400" }) : null
+        ]
+      }
+    )) })
+  ] });
+};
+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(LanguageSelector, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { orientation: "vertical" }),
+      /* @__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
+};

package/dist/Topbar-DXC7DFU1.cjs

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("./jsx-runtime-B6vEU3CM.cjs");
+const React = require("react");
+const contextMenu = require("./context-menu-BLbuduri.cjs");
+const core = require("./index-Bjw2sUN2.cjs");
+const reactI18next = require("react-i18next");
+const iconBase = require("./iconBase-BSrIcOaG.cjs");
+const reactIcons = require("@radix-ui/react-icons");
+const lodashEs = require("lodash-es");
+require("@chaibuilder/runtime");
+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 LanguageSelector = () => {
+  const { fallbackLang, languages, selectedLang, setSelectedLang } = core.useLanguages();
+  const currentLang = (selectedLang == null ? void 0 : selectedLang.length) > 0 ? selectedLang : fallbackLang;
+  const langOptions = React.useMemo(() => {
+    const options = [];
+    lodashEs.forEach(lodashEs.uniq([fallbackLang, ...languages]), (key) => {
+      const value = lodashEs.get(core.LANGUAGES, key);
+      if (value) options.push({ key, value, default: key === fallbackLang });
+    });
+    return options;
+  }, [fallbackLang, languages]);
+  if (lodashEs.isEmpty(languages) && currentLang === "en") {
+    return null;
+  }
+  if (lodashEs.isEmpty(languages) && currentLang !== "en") {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-1 text-sm text-blue-500 hover:text-blue-600", children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(core.FaLanguage, { className: "h-4 w-4" }),
+      lodashEs.get(core.LANGUAGES, currentLang)
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(contextMenu.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(contextMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(contextMenu.Button, { size: "sm", variant: "outline", className: "flex items-center gap-x-1 text-blue-500 hover:text-blue-600", children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(core.FaLanguage, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { children: [
+          " ",
+          lodashEs.get(core.LANGUAGES, currentLang)
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(reactIcons.ChevronDownIcon, { className: "h-4 w-4" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(contextMenu.DropdownMenuContent, { className: "border-border", children: lodashEs.map(langOptions, (option) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+      contextMenu.DropdownMenuItem,
+      {
+        className: iconBase.cn(
+          "flex cursor-pointer items-center text-sm",
+          option.key === currentLang && "!bg-blue-500 text-white hover:!text-white"
+        ),
+        onClick: () => setSelectedLang(option.key),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { children: option.value }),
+          option.key === fallbackLang ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(core.FaStar, { className: "ml-2 h-4 w-4 text-yellow-400" }) : null
+        ]
+      }
+    )) })
+  ] });
+};
+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(LanguageSelector, {}),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(contextMenu.Separator, { orientation: "vertical" }),
+      /* @__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;