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

package/package.json

@@ -5,7 +5,7 @@
   "author": "Suraj Air",
   "license": "BSD-3-Clause",
   "homepage": "https://chaibuilder.com",
-  "version": "1.3.0-beta.8",
+  "version": "1.3.0-beta.9",
   "type": "module",
   "repository": {
     "type": "git",

package/dist/CodeEditor-1LboGb1I.cjs

@@ -1,91 +0,0 @@
-"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

@@ -1,91 +0,0 @@
-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

@@ -1,9 +0,0 @@
-"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

@@ -1,10 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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

@@ -1,135 +0,0 @@
-"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;