@chaibuilder/sdk 2.0.0-beta.29 → 2.0.0-beta.30

package/dist/core.js

@@ -27,11 +27,11 @@ import aspectRatio from "@tailwindcss/aspect-ratio";
 import { twMerge } from "tailwind-merge";
 import { S as STYLES_KEY, R as ROOT_TEMP_KEY } from "./STRINGS-BnWT5XcX.js";
 import { Provider } from "react-wrap-balancer";
+import { PlusIcon as PlusIcon$1, DatabaseIcon, Columns, Rows, GlobeIcon, ChevronRight, EyeOff, Eye, X, Plus, ChevronDown, List, Loader, SparklesIcon, SmileIcon, ShuffleIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import { ErrorBoundary } from "react-error-boundary";
 import { Resizable } from "re-resizable";
-import { DatabaseIcon, Columns, Rows, GlobeIcon, ChevronRight, PlusIcon as PlusIcon$1, EyeOff, Eye, X, Plus, ChevronDown, List, Loader, SparklesIcon, SmileIcon, ShuffleIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import { Tree } from "react-arborist";
 import { parse, stringify } from "himalaya";
 import RjForm from "@rjsf/core";
@@ -116,8 +116,8 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
   }, p = (m, E, R) => {
     const C = /* @__PURE__ */ new Map();
     let N = !1;
-    R.forEach((T, w) => {
-      !T && w === m && (T = E), T ? (C.set(w, T), E.d.get(w) !== T && (N = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
+    R.forEach((I, w) => {
+      !I && w === m && (I = E), I ? (C.set(w, I), E.d.get(w) !== I && (N = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
     }), (N || E.d.size !== C.size) && (E.d = C);
   }, u = (m, E, R) => {
     const C = c(m), N = {
@@ -135,7 +135,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
   }, x = (m, E, R, C) => {
     if (isPromiseLike$2(E)) {
       let N;
-      const T = new Promise((w, $) => {
+      const I = new Promise((w, $) => {
         let L = !1;
         E.then(
           (M) => {
@@ -143,10 +143,10 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
               L = !0;
               const D = c(m), O = u(
                 m,
-                T,
+                I,
                 R
               );
-              resolvePromise(T, M), w(M), (D == null ? void 0 : D.d) !== O.d && I(m, O, D == null ? void 0 : D.d);
+              resolvePromise(I, M), w(M), (D == null ? void 0 : D.d) !== O.d && T(m, O, D == null ? void 0 : D.d);
             }
           },
           (M) => {
@@ -154,22 +154,22 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
               L = !0;
               const D = c(m), O = u(
                 m,
-                T,
+                I,
                 R
               );
-              rejectPromise(T, M), $(M), (D == null ? void 0 : D.d) !== O.d && I(m, O, D == null ? void 0 : D.d);
+              rejectPromise(I, M), $(M), (D == null ? void 0 : D.d) !== O.d && T(m, O, D == null ? void 0 : D.d);
             }
           }
         ), N = (M) => {
           L || (L = !0, M.then(
-            (D) => resolvePromise(T, D),
-            (D) => rejectPromise(T, D)
+            (D) => resolvePromise(I, D),
+            (D) => rejectPromise(I, D)
           ), w(M));
         };
       });
-      return T.orig = E, T.status = "pending", registerCancelPromise(T, (w) => {
+      return I.orig = E, I.status = "pending", registerCancelPromise(I, (w) => {
         w && N(w), C == null || C();
-      }), u(m, T, R);
+      }), u(m, I, R);
     }
     return u(m, E, R);
   }, h = (m, E, R) => {
@@ -202,10 +202,10 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       const M = g(L);
       return R.set(L, M), returnAtomValue(M);
     };
-    let T, w;
+    let I, w;
     const $ = {
       get signal() {
-        return T || (T = new AbortController()), T.signal;
+        return I || (I = new AbortController()), I.signal;
       },
       get setSelf() {
         return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(m) && console.warn("setSelf function cannot be used with read-only atom"), !w && isActuallyWritableAtom(m) && (w = (...L) => {
@@ -220,7 +220,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         m,
         L,
         R,
-        () => T == null ? void 0 : T.abort()
+        () => I == null ? void 0 : I.abort()
       );
     } catch (L) {
       return h(m, L, R);
@@ -234,21 +234,21 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     const E = r.get(m);
     E && f(m, E) && k(m);
   }, v = (m) => {
-    const E = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new WeakMap(), C = (T) => {
-      const w = r.get(T);
+    const E = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new WeakMap(), C = (I) => {
+      const w = r.get(I);
       w == null || w.t.forEach(($) => {
-        $ !== T && (E.set(
+        $ !== I && (E.set(
           $,
-          (E.get($) || /* @__PURE__ */ new Set()).add(T)
+          (E.get($) || /* @__PURE__ */ new Set()).add(I)
         ), R.set($, (R.get($) || 0) + 1), C($));
       });
     };
     C(m);
-    const N = (T) => {
-      const w = r.get(T);
+    const N = (I) => {
+      const w = r.get(I);
       w == null || w.t.forEach(($) => {
         var L;
-        if ($ !== T) {
+        if ($ !== I) {
           let M = R.get($);
           if (M && R.set($, --M), !M) {
             let D = !!((L = E.get($)) != null && L.size);
@@ -281,8 +281,8 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         );
       }
       return L;
-    }, T = m.write(C, N, ...E);
-    return R = !1, T;
+    }, I = m.write(C, N, ...E);
+    return R = !1, I;
   }, A = (m, ...E) => {
     const R = B(m, ...E), C = _();
     return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
@@ -294,8 +294,8 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       l: /* @__PURE__ */ new Set()
     };
     if (r.set(m, R), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(m), g(m).d.forEach((C, N) => {
-      const T = r.get(N);
-      T ? T.t.add(m) : N !== m && S(N, m);
+      const I = r.get(N);
+      I ? I.t.add(m) : N !== m && S(N, m);
     }), g(m), isActuallyWritableAtom(m) && m.onMount) {
       const C = m.onMount((...N) => A(m, ...N));
       C && (R.u = C);
@@ -306,24 +306,24 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     const R = (E = r.get(m)) == null ? void 0 : E.u;
     R && R(), r.delete(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(m);
     const C = c(m);
-    C ? (hasPromiseAtomValue(C) && cancelPromise(C.v), C.d.forEach((N, T) => {
-      if (T !== m) {
-        const w = r.get(T);
-        w && (w.t.delete(m), f(T, w) && k(T));
+    C ? (hasPromiseAtomValue(C) && cancelPromise(C.v), C.d.forEach((N, I) => {
+      if (I !== m) {
+        const w = r.get(I);
+        w && (w.t.delete(m), f(I, w) && k(I));
       }
     })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", m);
-  }, I = (m, E, R) => {
+  }, T = (m, E, R) => {
     const C = new Set(E.d.keys());
-    R == null || R.forEach((N, T) => {
-      if (C.has(T)) {
-        C.delete(T);
+    R == null || R.forEach((N, I) => {
+      if (C.has(I)) {
+        C.delete(I);
         return;
       }
-      const w = r.get(T);
-      w && (w.t.delete(m), f(T, w) && k(T));
+      const w = r.get(I);
+      w && (w.t.delete(m), f(I, w) && k(I));
     }), C.forEach((N) => {
-      const T = r.get(N);
-      T ? T.t.add(m) : r.has(m) && S(N, m);
+      const I = r.get(N);
+      I ? I.t.add(m) : r.has(m) && S(N, m);
     });
   }, _ = () => {
     let m;
@@ -332,11 +332,11 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       n.clear(), E.forEach(([R, C]) => {
         const N = c(R);
         if (N) {
-          N.d !== (C == null ? void 0 : C.d) && I(R, N, C == null ? void 0 : C.d);
-          const T = r.get(R);
-          T && !// TODO This seems pretty hacky. Hope to fix it.
+          N.d !== (C == null ? void 0 : C.d) && T(R, N, C == null ? void 0 : C.d);
+          const I = r.get(R);
+          I && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (C && !hasPromiseAtomValue(C) && (isEqualAtomValue(C, N) || isEqualAtomError(C, N))) && (T.l.forEach((w) => w()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && m.add(R));
+          (C && !hasPromiseAtomValue(C) && (isEqualAtomValue(C, N) || isEqualAtomError(C, N))) && (I.l.forEach((w) => w()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && m.add(R));
         } else
           (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] no atom state to flush");
       });
@@ -345,10 +345,10 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       return a.forEach((E) => E("state")), m;
   }, P = (m, E) => {
     const R = b(m), C = _(), N = R.l;
-    return N.add(E), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((T) => T("sub")), l.forEach(
-      (T) => T({ type: "sub", flushed: C })
+    return N.add(E), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((I) => I("sub")), l.forEach(
+      (I) => I({ type: "sub", flushed: C })
     )), () => {
-      N.delete(E), y(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((T) => T("unsub")), l.forEach((T) => T({ type: "unsub" })));
+      N.delete(E), y(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((I) => I("unsub")), l.forEach((I) => I({ type: "unsub" })));
     };
   };
   return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" ? {
@@ -404,23 +404,23 @@ function splitAtom(o, r) {
             return;
           }
           const y = (B) => {
-            const A = B(l), S = B(o), I = a(S, A == null ? void 0 : A.arr).keyList.indexOf(b);
-            if (I < 0 || I >= S.length) {
+            const A = B(l), S = B(o), T = a(S, A == null ? void 0 : A.arr).keyList.indexOf(b);
+            if (T < 0 || T >= S.length) {
               const _ = c[a(c).keyList.indexOf(b)];
               if (_)
                 return _;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return S[I];
+            return S[T];
           }, v = (B, A, S) => {
-            const k = B(l), I = B(o), P = a(I, k == null ? void 0 : k.arr).keyList.indexOf(b);
-            if (P < 0 || P >= I.length)
+            const k = B(l), T = B(o), P = a(T, k == null ? void 0 : k.arr).keyList.indexOf(b);
+            if (P < 0 || P >= T.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const m = isFunction(S) ? S(I[P]) : S;
+            const m = isFunction(S) ? S(T[P]) : S;
             A(o, [
-              ...I.slice(0, P),
+              ...T.slice(0, P),
               m,
-              ...I.slice(P + 1)
+              ...T.slice(P + 1)
             ]);
           };
           x[j] = isWritable(o) ? atom(y, v) : atom(y);
@@ -1167,8 +1167,8 @@ const useBlocksStoreManager = () => {
       else {
         const B = keys(f);
         v = map(b, (A) => {
-          const S = r.find((I) => I._id === A), k = { _id: A };
-          return each(B, (I) => k[I] = S[I]), k;
+          const S = r.find((T) => T._id === A), k = { _id: A };
+          return each(B, (T) => k[T] = S[T]), k;
         });
       }
       c(map(b, (B) => ({ _id: B, ...f }))), o({
@@ -3041,10 +3041,10 @@ const getBlockWithChildren = (o, r) => {
               return;
             }
             if (g === "styles") {
-              const k = A.map((I) => {
-                for (const _ in I)
-                  _ !== "_id" && (I[_] = `${STYLES_KEY},${I[_]}`);
-                return I;
+              const k = A.map((T) => {
+                for (const _ in T)
+                  _ !== "_id" && (T[_] = `${STYLES_KEY},${T[_]}`);
+                return T;
               });
               c(k);
             } else
@@ -3482,17 +3482,15 @@ const useHandleCanvasDblClick = () => {
     }
   );
 }, getElementByDataBlockId = (o, r) => o.querySelector(`[data-block-id="${r}"]`), useKeyEventWatcher = (o) => {
-  const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: x, pasteBlocks: h } = usePasteBlocks();
+  const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: x, pasteBlocks: h } = usePasteBlocks(), g = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(r), {}, [r, p]), useHotkeys("ctrl+c,command+c", () => u(r), {}, [r, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
       x(r[0]) && h(r);
     },
-    {},
+    { ...g, preventDefault: !0 },
     [r, x, h]
-  );
-  const g = o ? { document: o } : {};
-  useHotkeys("esc", () => n([]), g, [n]), useHotkeys("ctrl+d,command+d", () => i(r), { ...g, preventDefault: !0 }, [
+  ), useHotkeys("esc", () => n([]), g, [n]), useHotkeys("ctrl+d,command+d", () => i(r), { ...g, preventDefault: !0 }, [
     r,
     i
   ]), useHotkeys(
@@ -3759,7 +3757,7 @@ function BlocksRendererStatic({ blocks: o, allBlocks: r }) {
       const A = getRegisteredChaiBlock(f._type), S = get(A, "component", null);
       if (isNull(S))
         return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${f == null ? void 0 : f._type} not registered -->` });
-      const k = has(A, "getBlockStateFrom") ? A == null ? void 0 : A.getBlockStateFrom(f, r) : [], I = b(k), _ = h(f);
+      const k = has(A, "getBlockStateFrom") ? A == null ? void 0 : A.getBlockStateFrom(f, r) : [], T = b(k), _ = h(f);
       if (get(_, "__isHidden", !1) && !includes(a, f._id))
         return null;
       const P = i && isDescendant(i._id, f._id, r), E = {
@@ -3782,7 +3780,7 @@ function BlocksRendererStatic({ blocks: o, allBlocks: r }) {
         ...omit(_, ["__isHidden"]),
         ...v,
         inBuilder: !0,
-        blockState: I
+        blockState: T
       };
       if (has(A, "dataProvider"))
         return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3821,17 +3819,22 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: r });
 }, AddBlockAtBottom = () => {
   const { t: o } = useTranslation();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "button",
-    {
-      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK),
-      className: "mt-1 block w-full rounded-md bg-gray-100 p-2 text-black hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-700",
-      children: [
-        "+ ",
-        o("Add block")
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK),
+        className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-purple-500 px-3 py-1 text-xs leading-tight text-white hover:bg-purple-500", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "size-2.5 stroke-[3]" }),
+          " ",
+          o("Add block")
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
+  ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: r, onResize: n }) => {
   const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
     () => {
@@ -3851,23 +3854,23 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", onClick: d, className: "h-full w-full p-8 pb-0", ref: i, children: o });
 }, getElementByStyleId = (o, r) => o.querySelector(`[data-style-id="${r}"]`), StaticCanvas = () => {
   const [o] = useAtom$1(networkModeAtom), [r] = useCanvasWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, h] = useState([]), [, g] = useState([]), [, j] = useAtom$1(canvasIframeAtom), [b, f] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), B = (k) => {
-    p((I) => ({ ...I, width: k }));
+    p((T) => ({ ...T, width: k }));
   };
   useEffect(() => {
     if (!c.current)
       return;
-    const { clientWidth: k, clientHeight: I } = c.current;
-    p({ width: k, height: I });
+    const { clientWidth: k, clientHeight: T } = c.current;
+    p({ width: k, height: T });
   }, [c, r]);
-  const A = (k, I = 0) => {
+  const A = (k, T = 0) => {
     const { top: _ } = k.getBoundingClientRect();
-    return _ + I >= 0 && _ - I <= window.innerHeight;
+    return _ + T >= 0 && _ - T <= window.innerHeight;
   };
   useEffect(() => {
-    var k, I;
+    var k, T;
     if (a && a.type !== "Multiple" && i.current) {
       const _ = getElementByDataBlockId(i.current.contentDocument, a._id);
-      _ && (A(_) || (I = (k = i.current) == null ? void 0 : k.contentWindow) == null || I.scrollTo({ top: _.offsetTop, behavior: "smooth" }), h([_]));
+      _ && (A(_) || (T = (k = i.current) == null ? void 0 : k.contentWindow) == null || T.scrollTo({ top: _.offsetTop, behavior: "smooth" }), h([_]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(b) && i.current) {
@@ -4033,7 +4036,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       l !== o.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
     ] }, l))
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-NoUXWcBN.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-4lhmWkV8.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), r = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: r, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StaticCanvas$1, {}) }) }),
@@ -4435,7 +4438,7 @@ function BiExpandVertical(o) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "m12 19.24-4.95-4.95-1.41 1.42L12 22.07l6.36-6.36-1.41-1.42L12 19.24zM5.64 8.29l1.41 1.42L12 4.76l4.95 4.95 1.41-1.42L12 1.93 5.64 8.29z" }, child: [] }] })(o);
 }
 const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, dragHandle: n }) => {
-  var T;
+  var I;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
   const u = o.children.length > 0, { highlightBlock: x, clearHighlight: h } = useBlockHighlight(), { id: g, data: j, isSelected: b, willReceiveDrop: f, isDragging: y, isEditing: v, handleClick: B } = o, A = (w) => {
@@ -4444,7 +4447,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     w.isInternal && (p = w.isOpen, w.isOpen && w.close());
   }, k = (w) => {
     w.isInternal && p !== null && (p ? w.open() : w.close(), p = null);
-  }, [I, _] = useAtom$1(currentAddSelection), P = () => {
+  }, [T, _] = useAtom$1(currentAddSelection), P = () => {
     var w;
     m(), o.parent.isSelected || _((w = o == null ? void 0 : o.parent) == null ? void 0 : w.id);
   }, m = () => {
@@ -4512,7 +4515,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
         w.preventDefault(), C(g, "no");
       },
       children: [
-        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((I = o == null ? void 0 : o.parent) == null ? void 0 : I.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             onClick: (w) => {
@@ -4531,7 +4534,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
               b ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
               f && canAcceptChildBlock(j._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === I ? "bg-purple-100" : "",
+              (o == null ? void 0 : o.id) === T ? "bg-purple-100" : "",
               y && "opacity-20",
               i.includes(g) ? "opacity-50" : ""
             ),
@@ -4619,7 +4622,10 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     "input",
     {
       autoFocus: !0,
-      className: "ml-2 !h-4 w-full rounded-sm border border-border bg-background px-1 text-[11px] leading-tight outline-none",
+      className: cn(
+        "ml-2 !h-4 w-full rounded-sm border border-border bg-background px-1 text-[11px] leading-tight outline-none",
+        o.isSelected ? "text-black dark:text-white" : ""
+      ),
       type: "text",
       defaultValue: ((r = o.data) == null ? void 0 : r._name) || ((n = o.data) == null ? void 0 : n._type),
       onFocus: (a) => a.currentTarget.select(),
@@ -5073,7 +5079,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         IconPicker,
         {
-          value: o ? "BiSolidGrid" : null,
+          value: o || "BiSolidGrid",
           onChange: a,
           pickButtonStyle: {
             position: "relative",
@@ -5184,15 +5190,15 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
       className: "mt-1 rounded-md"
     }
   );
-}, CollectionField = ({
+}, PageTypeField = ({
   href: o,
-  collections: r,
+  pageTypes: r,
   onChange: n
 }) => {
   var P;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (m, E) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [h, g] = useState(""), [j, b] = useState([]), [f, y] = useState(-1), v = useRef(null), B = (P = r == null ? void 0 : r.find((m) => m.key === u)) == null ? void 0 : P.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (m, E) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [h, g] = useState(""), [j, b] = useState([]), [f, y] = useState(-1), v = useRef(null), B = (P = r == null ? void 0 : r.find((m) => m.key === u)) == null ? void 0 : P.name;
   useEffect(() => {
-    if (g(""), b([]), y(-1), p(!1), !o || i || !startsWith(o, "collection:"))
+    if (g(""), b([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:"))
       return;
     const m = split(o, ":"), E = get(m, 1, "page") || "page";
     x(E), (async () => {
@@ -5213,7 +5219,7 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     [u],
     300
   ), S = (m) => {
-    const E = ["collection", u, m.id];
+    const E = ["pageType", u, m.id];
     E[1] && (n(E.join(":")), g(m.name), p(!1), b([]), y(-1));
   }, k = (m) => {
     switch (m.key) {
@@ -5229,7 +5235,7 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
         f >= 0 && S(j[f]);
         break;
       case "Escape":
-        m.preventDefault(), I();
+        m.preventDefault(), T();
         break;
     }
   };
@@ -5239,13 +5245,13 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
       m == null || m.scrollIntoView({ block: "nearest" });
     }
   }, [f]);
-  const I = () => {
+  const T = () => {
     g(""), b([]), y(-1), p(!1), n("");
   }, _ = (m) => {
     g(m), p(!isEmpty(m)), c(!0), A(m);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "collection", value: u, onChange: (m) => x(m.target.value), children: map(r, (m) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: m.key, children: m.name }, m.key)) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "pageType", value: u, onChange: (m) => x(m.target.value), children: map(r, (m) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: m.key, children: m.name }, m.key)) }),
     u && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
@@ -5254,11 +5260,11 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
           value: h,
           onChange: (m) => _(m.target.value),
           onKeyDown: k,
-          placeholder: a(`Search ${B}`),
+          placeholder: a(`Search ${B ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: I, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: T, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(j) || d && isEmpty(j)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -5287,13 +5293,13 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: r, onChange: n }) => {
-  const { t: a } = useTranslation(), { type: l = "collection", href: i = "", target: c = "self" } = r, d = useBuilderProp("collections", []), p = l === "collection" && isEmpty(d) ? "url" : l;
+  const { t: a } = useTranslation(), { type: l = "pageType", href: i = "", target: c = "self" } = r, d = useBuilderProp("pageTypes", []), p = l === "pageType" && isEmpty(d) ? "url" : l;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium", children: (o == null ? void 0 : o.title) ?? "Link" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-1.5", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "type", value: l, onChange: (u) => n({ ...r, type: u.target.value }), children: map(
         [
-          ...isEmpty(d) ? [] : [{ const: "collection", title: a("Goto Page") }],
+          ...isEmpty(d) ? [] : [{ const: "pageType", title: a("Goto Page") }],
           { const: "url", title: a("Open URL") },
           { const: "email", title: a("Compose Email") },
           { const: "telephone", title: a("Call Phone") },
@@ -5301,11 +5307,11 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
         ],
         (u) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: u.const, children: u.title }, u.const)
       ) }),
-      p === "collection" && !isEmpty(d) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        CollectionField,
+      p === "pageType" && !isEmpty(d) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        PageTypeField,
         {
           href: i,
-          collections: d,
+          pageTypes: d,
           onChange: (u) => n({ ...r, href: u })
         }
       ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5392,7 +5398,7 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     return null;
   if (u.type === "boolean")
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: r, children: a });
-  const I = B == null ? void 0 : B.includes(o.replace("root.", ""));
+  const T = B == null ? void 0 : B.includes(o.replace("root.", ""));
   if (u.type === "array") {
     const _ = A === o;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${r} relative`, children: [
@@ -5423,7 +5429,7 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: o, className: u.type === "object" ? "pb-2" : "", children: [
       n,
       " ",
-      I && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+      T && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
         " ",
         f
       ] }),
@@ -5552,31 +5558,31 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   return set(n, o, r), n;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), x = useWrapperBlock(), h = getRegisteredChaiBlock(x == null ? void 0 : x._type), g = formDataWithSelectedLang(x, o, h), j = ({ formData: k }, I, _) => {
-    if (I && (c == null ? void 0 : c._id) === r._id) {
-      const P = I.replace("root.", "");
+  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), x = useWrapperBlock(), h = getRegisteredChaiBlock(x == null ? void 0 : x._type), g = formDataWithSelectedLang(x, o, h), j = ({ formData: k }, T, _) => {
+    if (T && (c == null ? void 0 : c._id) === r._id) {
+      const P = T.replace("root.", "");
       a([r._id], { [P]: get(k, P) }, _);
     }
   }, b = useCallback(
-    debounce(({ formData: k }, I, _) => {
-      j({ formData: k }, I, _), d(k);
+    debounce(({ formData: k }, T, _) => {
+      j({ formData: k }, T, _), d(k);
     }, 1500),
     [r == null ? void 0 : r._id, o]
-  ), f = ({ formData: k }, I) => {
-    if (I) {
-      const _ = I.replace("root.", "");
+  ), f = ({ formData: k }, T) => {
+    if (T) {
+      const _ = T.replace("root.", "");
       n(
         [r._id],
         convertDotNotationToObject(_, get(k, _.split(".")))
-      ), b({ formData: k }, I, { [_]: get(c, _) });
+      ), b({ formData: k }, T, { [_]: get(c, _) });
     }
-  }, y = ({ formData: k }, I) => {
-    if (I) {
-      const _ = I.replace("root.", "");
+  }, y = ({ formData: k }, T) => {
+    if (T) {
+      const _ = T.replace("root.", "");
       n(
         [x._id],
         convertDotNotationToObject(_, get(k, _.split(".")))
-      ), b({ formData: k }, I, { [_]: get(c, _) });
+      ), b({ formData: k }, T, { [_]: get(c, _) });
     }
   };
   keys(get(i, "_bindings", {}));
@@ -5587,8 +5593,8 @@ function BlockSettings() {
   }, [r]), { wrapperSchema: A, wrapperUiSchema: S } = useMemo(() => {
     if (!x || !(x != null && x._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const k = x == null ? void 0 : x._type, { schema: I = {}, uiSchema: _ = {} } = getBlockFormSchemas(k);
-    return { wrapperSchema: I, wrapperUiSchema: _ };
+    const k = x == null ? void 0 : x._type, { schema: T = {}, uiSchema: _ = {} } = getBlockFormSchemas(k);
+    return { wrapperSchema: T, wrapperUiSchema: _ };
   }, [x]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(x) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
@@ -5762,8 +5768,8 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var I;
-  const o = useFuseSearch(), { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), h = (I = first(n)) == null ? void 0 : I.prop, g = reject((get(a, h, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), j = () => {
+  var T;
+  const o = useFuseSearch(), { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), h = (T = first(n)) == null ? void 0 : T.prop, g = reject((get(a, h, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), j = () => {
     const _ = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l(c, _, !0), u("");
   }, [b, f] = useState([]), y = ({ value: _ }) => {
@@ -5771,9 +5777,9 @@ function ManualClasses() {
     let E = [];
     if (m && m.length > 0) {
       const [R] = m, C = P.replace(R, "");
-      E = o.search(C).map((T) => ({
-        ...T,
-        item: { ...T.item, name: R + T.item.name }
+      E = o.search(C).map((I) => ({
+        ...I,
+        item: { ...I.item, name: R + I.item.name }
       }));
     } else
       E = o.search(P);
@@ -6536,7 +6542,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
     }
     g(E), l(E === "class" || isEmpty(m) ? "" : m);
   }, [i, p, u]);
-  const k = useThrottledCallback((m) => c(m), [c], THROTTLE_TIME), I = useThrottledCallback((m) => c(m, !1), [c], THROTTLE_TIME), _ = useCallback(
+  const k = useThrottledCallback((m) => c(m), [c], THROTTLE_TIME), T = useThrottledCallback((m) => c(m, !1), [c], THROTTLE_TIME), _ = useCallback(
     (m = !1) => {
       const E = getUserInputValues(`${a}`, u);
       if (get(E, "error", !1)) {
@@ -6551,9 +6557,9 @@ const RangeChoices = ({ property: o, onChange: r }) => {
       if (get(E, "value") === "")
         return;
       const N = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
-      m ? I(N) : k(N);
+      m ? T(N) : k(N);
     },
-    [k, I, a, h, d, u]
+    [k, T, a, h, d, u]
   ), P = useCallback(
     (m) => {
       const E = getUserInputValues(`${a}`, u);
@@ -6601,8 +6607,8 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             const E = parseInt$1(m.target.value);
             let R = isNaN$1(E) ? 0 : E;
             m.keyCode === 38 && (R += 1), m.keyCode === 40 && (R -= 1);
-            const C = `${R}`, T = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
-            I(T);
+            const C = `${R}`, I = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
+            T(I);
           },
           onKeyUp: (m) => {
             A && (m.preventDefault(), S(!1));
@@ -6662,7 +6668,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             return;
           y(m);
           const E = `${m}`, C = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${h === "-" ? "" : h}]`;
-          I(C);
+          T(C);
         },
         currentValue: a,
         unit: h,
@@ -6760,8 +6766,8 @@ const RangeChoices = ({ property: o, onChange: r }) => {
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: r } = useTranslation(), { type: n = "icons", label: a, property: l, onEmitChange: i = () => {
   }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), h = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), j = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), f = useMemo(() => get(h, "fullCls", ""), [h]), y = useCallback(
-    (I, _ = !0) => {
-      const P = { dark: p, mq: x, mod: u, cls: I, property: l, fullCls: "" };
+    (T, _ = !0) => {
+      const P = { dark: p, mq: x, mod: u, cls: T, property: l, fullCls: "" };
       (p || u !== "") && (P.mq = "xs");
       const m = generateFullClsName(P);
       g(b, [m], _);
@@ -6774,7 +6780,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
     i(B, h);
   }, [B, i, h]);
   const [, , A] = useCanvasWidth(), S = useCallback(
-    (I) => {
+    (T) => {
       A({
         xs: 400,
         sm: 640,
@@ -6782,7 +6788,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[I]);
+      }[T]);
     },
     [A]
   ), k = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === x;
@@ -7706,7 +7712,7 @@ const BlockCard = ({
   "Open Code Editor": "Open Code Editor",
   "Clear search": "Clear search",
   "No results found for": "No results found for",
-  "Search {collectionName}": "Search {collectionName}"
+  "Search {pageTypeName}": "Search {pageTypeName}"
 };
 i18n.use(initReactI18next).init({
   // the translations
@@ -7831,7 +7837,7 @@ const CoreBlock = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "-mx-1.5 h-full max-h-full overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: n, position: a }) }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UILibraries, { parentId: n, position: a }) }),
           p ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ImportHTML$1, { parentId: n, position: a }) }) : null,
-          map(u, (h) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: h.key, children: React__default.createElement(h.tabContent, { close: x }) }))
+          map(u, (h) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: h.key, children: React__default.createElement(h.tabContent, { close: x, parentId: n, position: a }) }))
         ]
       }
     )
@@ -8145,7 +8151,7 @@ const AIUserPrompt = ({ blockId: o }) => {
       n(S), l(a), c(""), p(""), g("");
     }
   }, y = (S) => {
-    const k = a.filter((I, _) => _ !== S);
+    const k = a.filter((T, _) => _ !== S);
     n(k), l(k);
   }, v = (S) => {
     x(S), c(a[S].key), p(a[S].value);
@@ -8592,7 +8598,7 @@ const ChooseLayout = ({ open: o, close: r }) => {
       )
     ] }) })
   ] }) });
-}, TopBar = lazy(() => import("./Topbar-XOJDIb13.js")), ThemeConfigPanel = lazy(() => Promise.resolve().then(() => ThemeConfigPanel$3));
+}, TopBar = lazy(() => import("./Topbar-iARshVmF.js")), ThemeConfigPanel = lazy(() => Promise.resolve().then(() => ThemeConfigPanel$3));
 function useSidebarMenuItems() {
   return useMemo(() => compact([
     {