@chaibuilder/sdk 2.0.0-beta.90 → 2.0.0-beta.93

package/dist/core.js

@@ -6,7 +6,7 @@ import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, Component, Children, useState, useRef, Suspense, createElement, memo, lazy } from "react";
 import { ag as useToast, S as Skeleton, B as Button, L as Label, D as Dialog, s as DialogTrigger, a as DialogContent, h as Badge, T as Textarea, O as Tooltip, P as TooltipTrigger, Q as TooltipContent, V as Popover, W as PopoverTrigger, X as PopoverContent, I as Input$1, U as TooltipPortal, e as AccordionItem, f as AccordionTrigger, g as AccordionContent, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, G as ScrollArea, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, A as Accordion, C as Card, x as CardHeader, E as CardDescription, F as CardContent, y as CardFooter, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, aj as ContextMenu, ak as ContextMenuTrigger, al as ContextMenuContent, am as ContextMenuItem, j as AlertDialog, k as AlertDialogTrigger, l as AlertDialogContent, m as AlertDialogHeader, o as AlertDialogTitle, p as AlertDialogDescription, n as AlertDialogFooter, r as AlertDialogCancel, q as AlertDialogAction, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, b as Switch, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-DHla8ofZ.js";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, useSetAtom as useSetAtom$1, getDefaultStore as getDefaultStore$1 } from "jotai";
-import { find, filter, flatten, map, omit, isString, has, get, includes, first, without, compact, isEmpty, each, set, isObject, memoize, noop, keys, range, values, flattenDeep, startsWith, isNull, forEach, unset, chunk, cloneDeep, pick, throttle, isFunction, reverse, startCase, debounce, capitalize, split, findIndex, take, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, uniq, flatMapDeep, some, reject, sortBy, toUpper, round } from "lodash-es";
+import { has, get, find, filter, flatten, map, omit, isString, includes, without, compact, each, set, first, isObject, memoize, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, forEach, unset, chunk, cloneDeep, pick, throttle, isFunction as isFunction$1, reverse, startCase, debounce, capitalize, split, findIndex, take, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, uniq, flatMapDeep, some, reject, sortBy, toUpper, round } from "lodash-es";
 import { Provider } from "react-wrap-balancer";
 import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-CWgVxu0A.js";
 import { useTranslation, initReactI18next } from "react-i18next";
@@ -14,12 +14,12 @@ import { useTranslation as useTranslation2 } from "react-i18next";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
 import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, ReaderIcon, DropdownMenuIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, TextIcon, RowsIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
-import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
+import { useThrottledCallback, useDebouncedCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { useFeature, FlagsProvider } from "flagged";
 import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
 import { registerChaiBlock } from "@chaibuilder/runtime";
-import TreeModel from "tree-model";
 import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThemeOptions, p as plugin, a as getChaiThemeCssVariables, c as getThemeFontsLinkMarkup } from "./ChaiThemeFn-DzirXKjI.js";
+import TreeModel from "tree-model";
 import { useHotkeys } from "react-hotkeys-hook";
 import { PlusIcon as PlusIcon$1, PanelRightClose, PanelRightOpen, AppWindowIcon, AlignHorizontalJustifyStart, UnfoldHorizontal, DatabaseIcon, Columns, Rows, GlobeIcon, ChevronRight, X, Plus, ChevronLeft, PlusCircle, ChevronDown, List, Loader, SparklesIcon, EyeOff, Eye, SmileIcon, ShuffleIcon, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import ReactQuill, { Quill } from "react-quill";
@@ -571,6 +571,142 @@ const getDefaultStore = () => {
 const RESET = Symbol(
   ""
 );
+const getCached$1 = (c, m, k) => (m.has(k) ? m : m.set(k, c())).get(k);
+const cache1$2 = /* @__PURE__ */ new WeakMap();
+const memo2$1 = (create, dep1, dep2) => {
+  const cache2 = getCached$1(() => /* @__PURE__ */ new WeakMap(), cache1$2, dep1);
+  return getCached$1(create, cache2, dep2);
+};
+const cacheKeyForEmptyKeyExtractor = {};
+const isWritable = (atom2) => !!atom2.write;
+const isFunction = (x) => typeof x === "function";
+function splitAtom(arrAtom, keyExtractor) {
+  return memo2$1(
+    () => {
+      const mappingCache = /* @__PURE__ */ new WeakMap();
+      const getMapping = (arr, prev) => {
+        let mapping = mappingCache.get(arr);
+        if (mapping) {
+          return mapping;
+        }
+        const prevMapping = prev && mappingCache.get(prev);
+        const atomList = [];
+        const keyList = [];
+        arr.forEach((item, index) => {
+          const key = index;
+          keyList[index] = key;
+          const cachedAtom = prevMapping && prevMapping.atomList[prevMapping.keyList.indexOf(key)];
+          if (cachedAtom) {
+            atomList[index] = cachedAtom;
+            return;
+          }
+          const read = (get2) => {
+            const prev2 = get2(mappingAtom);
+            const currArr = get2(arrAtom);
+            const mapping2 = getMapping(currArr, prev2 == null ? void 0 : prev2.arr);
+            const index2 = mapping2.keyList.indexOf(key);
+            if (index2 < 0 || index2 >= currArr.length) {
+              const prevItem = arr[getMapping(arr).keyList.indexOf(key)];
+              if (prevItem) {
+                return prevItem;
+              }
+              throw new Error("splitAtom: index out of bounds for read");
+            }
+            return currArr[index2];
+          };
+          const write = (get2, set2, update) => {
+            const prev2 = get2(mappingAtom);
+            const arr2 = get2(arrAtom);
+            const mapping2 = getMapping(arr2, prev2 == null ? void 0 : prev2.arr);
+            const index2 = mapping2.keyList.indexOf(key);
+            if (index2 < 0 || index2 >= arr2.length) {
+              throw new Error("splitAtom: index out of bounds for write");
+            }
+            const nextItem = isFunction(update) ? update(arr2[index2]) : update;
+            if (!Object.is(arr2[index2], nextItem)) {
+              set2(arrAtom, [
+                ...arr2.slice(0, index2),
+                nextItem,
+                ...arr2.slice(index2 + 1)
+              ]);
+            }
+          };
+          atomList[index] = isWritable(arrAtom) ? atom(read, write) : atom(read);
+        });
+        if (prevMapping && prevMapping.keyList.length === keyList.length && prevMapping.keyList.every((x, i) => x === keyList[i])) {
+          mapping = prevMapping;
+        } else {
+          mapping = { arr, atomList, keyList };
+        }
+        mappingCache.set(arr, mapping);
+        return mapping;
+      };
+      const mappingAtom = atom((get2) => {
+        const prev = get2(mappingAtom);
+        const arr = get2(arrAtom);
+        const mapping = getMapping(arr, prev == null ? void 0 : prev.arr);
+        return mapping;
+      });
+      mappingAtom.init = void 0;
+      const splittedAtom = isWritable(arrAtom) ? atom(
+        (get2) => get2(mappingAtom).atomList,
+        (get2, set2, action) => {
+          switch (action.type) {
+            case "remove": {
+              const index = get2(splittedAtom).indexOf(action.atom);
+              if (index >= 0) {
+                const arr = get2(arrAtom);
+                set2(arrAtom, [
+                  ...arr.slice(0, index),
+                  ...arr.slice(index + 1)
+                ]);
+              }
+              break;
+            }
+            case "insert": {
+              const index = action.before ? get2(splittedAtom).indexOf(action.before) : get2(splittedAtom).length;
+              if (index >= 0) {
+                const arr = get2(arrAtom);
+                set2(arrAtom, [
+                  ...arr.slice(0, index),
+                  action.value,
+                  ...arr.slice(index)
+                ]);
+              }
+              break;
+            }
+            case "move": {
+              const index1 = get2(splittedAtom).indexOf(action.atom);
+              const index2 = action.before ? get2(splittedAtom).indexOf(action.before) : get2(splittedAtom).length;
+              if (index1 >= 0 && index2 >= 0) {
+                const arr = get2(arrAtom);
+                if (index1 < index2) {
+                  set2(arrAtom, [
+                    ...arr.slice(0, index1),
+                    ...arr.slice(index1 + 1, index2),
+                    arr[index1],
+                    ...arr.slice(index2)
+                  ]);
+                } else {
+                  set2(arrAtom, [
+                    ...arr.slice(0, index2),
+                    arr[index1],
+                    ...arr.slice(index2, index1),
+                    ...arr.slice(index1 + 1)
+                  ]);
+                }
+              }
+              break;
+            }
+          }
+        }
+      ) : atom((get2) => get2(mappingAtom).atomList);
+      return splittedAtom;
+    },
+    arrAtom,
+    cacheKeyForEmptyKeyExtractor
+  );
+}
 const isPromiseLike$1 = (x) => typeof (x == null ? void 0 : x.then) === "function";
 function createJSONStorage(getStringStorage = () => {
   try {
@@ -963,10 +1099,61 @@ __publicField(Frame, "defaultProps", {
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
 const ChaiFrame = React__default.forwardRef((props, ref) => /* @__PURE__ */ jsx(Frame, { ...props, forwardedRef: ref }));
+const canAcceptChildBlock = (parentType, childType) => {
+  if (!parentType) return true;
+  const blockDefinition = getRegisteredChaiBlock(parentType);
+  if (!blockDefinition) return false;
+  return has(blockDefinition, "canAcceptBlock") ? blockDefinition.canAcceptBlock(childType) : false;
+};
+const canAddChildBlock = (parentType) => {
+  const blockDefinition = getRegisteredChaiBlock(parentType);
+  if (!blockDefinition) return false;
+  return has(blockDefinition, "canAcceptBlock");
+};
+const canBeNestedInside = (parentType, childType) => {
+  const blockDefinition = getRegisteredChaiBlock(childType);
+  if (!blockDefinition) return true;
+  return has(blockDefinition, "canBeNested") ? blockDefinition.canBeNested(parentType) : true;
+};
+const canDuplicateBlock = (type) => {
+  const blockDefinition = getRegisteredChaiBlock(type);
+  if (!blockDefinition) return true;
+  return has(blockDefinition, "canDuplicate") ? blockDefinition.canDuplicate() : true;
+};
+const canDeleteBlock = (type) => {
+  const blockDefinition = getRegisteredChaiBlock(type);
+  if (!blockDefinition) return true;
+  return has(blockDefinition, "canDelete") ? blockDefinition.canDelete() : true;
+};
+const canDropBlock = (_currentTree, { dragSource, dropTarget: dropTarget2 }) => {
+  const dragSourceType = get(dragSource, "data._type", "");
+  const dropTargetType = get(dropTarget2, "data._type", "");
+  return canAcceptChildBlock(dropTargetType, dragSourceType);
+};
+if (import.meta.vitest) {
+  describe("canDropBlock Function", () => {
+    it('should return false if dragSourceType is "Slot"', () => {
+      const dragSource = { data: { _type: "Slot" } };
+      const dropTarget2 = { data: {} };
+      expect(canDropBlock({}, { dragSource, dropTarget: dropTarget2 })).toBe(true);
+    });
+    it("should return true if dropTargetType is empty", () => {
+      const dragSource = { data: { _type: "Box" } };
+      const dropTarget2 = { data: {} };
+      expect(canDropBlock({}, { dragSource, dropTarget: dropTarget2 })).toBe(true);
+    });
+  });
+}
 function duplicateBlocks(blocks, id, _parent) {
   const children = filter(blocks, (c) => c._parent === id);
   const newBlocks = [];
   for (let i = 0; i < children.length; i++) {
+    const slots = getSlots(children[i]);
+    if (Object.keys(slots).length > 0) {
+      Object.keys(slots).forEach((key) => {
+        children[i][key] = `slot:${generateUUID()}`;
+      });
+    }
     if (filter(blocks, { _parent: children[i]._id }).length > 0) {
       const newId = generateUUID();
       newBlocks.push({ ...children[i], oldId: children[i]._id, ...{ _id: newId, _parent } });
@@ -1031,21 +1218,15 @@ const getDuplicatedBlocks = (currentBlocks, id, newParentId = null) => {
     return omit(newBlock, ["global", "oldId"]);
   });
 };
-const pageBlocksAtom = atom$1([]);
-pageBlocksAtom.debugLabel = "pageBlocksAtom";
-const convertToBlocksAtoms = (blocks) => {
-  return blocks.map((block) => ({
-    _type: block._type,
-    _id: block._id,
-    _parent: block._parent ?? null,
-    _atom: atom$1(block)
-  }));
-};
+const presentBlocksAtom = atom$1([]);
+presentBlocksAtom.debugLabel = "presentBlocksAtom";
 const treeDSBlocks = atom$1((get2) => {
-  const presentBlocks = get2(pageBlocksAtom).map((block) => get2(block._atom));
-  return convertToBlocksTree(presentBlocks);
+  const presentBlocks = get2(presentBlocksAtom);
+  return convertToBlocksTree([...presentBlocks]);
 });
 treeDSBlocks.debugLabel = "treeDSBlocks";
+const pageBlocksAtomsAtom = splitAtom(presentBlocksAtom);
+pageBlocksAtomsAtom.debugLabel = "pageBlocksAtomsAtom";
 const builderActivePageAtom = atom$1("");
 builderActivePageAtom.debugLabel = "builderActivePageAtom";
 const destinationDropIndexAtom = atom$1(-1);
@@ -1057,87 +1238,10 @@ const globalBlocksAtom = atom$1((get2) => {
   return filter(globalBlocks, (block) => has(block, "blockId"));
 });
 globalBlocksAtom.debugLabel = "globalBlocksAtom";
-const canAcceptChildBlock = (parentType, childType) => {
-  if (!parentType) return true;
-  const blockDefinition = getRegisteredChaiBlock(parentType);
-  if (!blockDefinition) return false;
-  return has(blockDefinition, "canAcceptBlock") ? blockDefinition.canAcceptBlock(childType) : false;
-};
-const canAddChildBlock = (parentType) => {
-  const blockDefinition = getRegisteredChaiBlock(parentType);
-  if (!blockDefinition) return false;
-  return has(blockDefinition, "canAcceptBlock");
-};
-const canBeNestedInside = (parentType, childType) => {
-  const blockDefinition = getRegisteredChaiBlock(childType);
-  if (!blockDefinition) return true;
-  return has(blockDefinition, "canBeNested") ? blockDefinition.canBeNested(parentType) : true;
-};
-const canDuplicateBlock = (type) => {
-  const blockDefinition = getRegisteredChaiBlock(type);
-  if (!blockDefinition) return true;
-  return has(blockDefinition, "canDuplicate") ? blockDefinition.canDuplicate() : true;
-};
-const canDeleteBlock = (type) => {
-  const blockDefinition = getRegisteredChaiBlock(type);
-  if (!blockDefinition) return true;
-  return has(blockDefinition, "canDelete") ? blockDefinition.canDelete() : true;
-};
-const canDropBlock = (_currentTree, { dragSource, dropTarget: dropTarget2 }) => {
-  const dragSourceType = get(dragSource, "data._type", "");
-  const dropTargetType = get(dropTarget2, "data._type", "");
-  return canAcceptChildBlock(dropTargetType, dragSourceType);
-};
-if (import.meta.vitest) {
-  describe("canDropBlock Function", () => {
-    it('should return false if dragSourceType is "Slot"', () => {
-      const dragSource = { data: { _type: "Slot" } };
-      const dropTarget2 = { data: {} };
-      expect(canDropBlock({}, { dragSource, dropTarget: dropTarget2 })).toBe(true);
-    });
-    it("should return true if dropTargetType is empty", () => {
-      const dragSource = { data: { _type: "Box" } };
-      const dropTarget2 = { data: {} };
-      expect(canDropBlock({}, { dragSource, dropTarget: dropTarget2 })).toBe(true);
-    });
-  });
-}
-const broadcastChannel = new BroadcastChannel("chaibuilder");
-const useBroadcastChannel = () => {
-  const pageId = useBuilderProp("pageId", "chaibuilder_page");
-  const postMessage = useDebouncedCallback(
-    (message) => broadcastChannel.postMessage({ ...message, pageId }),
-    [pageId],
-    200
-  );
-  return { postMessage };
-};
-const useUnmountBroadcastChannel = () => {
-  const [, setBlocks] = useBlocksStore();
-  const pageId = useBuilderProp("pageId", "chaibuilder_page");
-  const { updateBlocksProps } = useBlocksStoreManager();
-  useEffect(() => {
-    broadcastChannel.onmessageerror = (event) => {
-      console.log("error", event);
-    };
-    broadcastChannel.onmessage = (event) => {
-      if (event.data.type === "blocks-updated" && event.data.pageId === pageId) {
-        setBlocks(event.data.blocks);
-      }
-      if (event.data.type === "blocks-props-updated" && event.data.pageId === pageId) {
-        updateBlocksProps(event.data.blocks);
-      }
-    };
-    return () => {
-      broadcastChannel.onmessage = null;
-      broadcastChannel.onmessageerror = null;
-    };
-  }, [setBlocks, pageId]);
-};
 const selectedBlockIdsAtom = atom$1([]);
 selectedBlockIdsAtom.debugLabel = "selectedBlockIdsAtom";
 const selectedBlocksAtom = atom$1((get2) => {
-  const blocks = get2(pageBlocksAtom);
+  const blocks = get2(presentBlocksAtom);
   const blockIds = get2(selectedBlockIdsAtom);
   return map(
     filter(blocks, ({ _id }) => includes(blockIds, _id)),
@@ -1151,7 +1255,7 @@ const selectedBlockAtom = atom$1((get2) => {
     return null;
   }
   if (blocks.length === 1) {
-    return get2(first(blocks)._atom);
+    return blocks[0];
   }
 });
 selectedBlockAtom.debugLabel = "selectedBlockAtom";
@@ -1159,7 +1263,7 @@ const getParentId = (block) => get(block, "_parent", null);
 const selectedBlocksParentsAtom = atom$1((get2) => {
   const selectedBlocks = get2(selectedBlocksAtom);
   const parentIds = map(selectedBlocks, getParentId);
-  return filter(get2(pageBlocksAtom), (block) => includes(parentIds, block._id));
+  return filter(get2(presentBlocksAtom), (block) => includes(parentIds, block._id));
 });
 selectedBlocksParentsAtom.debugLabel = "selectedBlocksParentsAtom";
 const selectedBlockFlexChildAtom = atom$1(() => {
@@ -1181,7 +1285,7 @@ const useSelectedBlocksDisplayChild = () => ({
 const useSelectedBlock = () => useAtomValue$1(selectedBlockAtom);
 const selectedBlockHierarchy = atom$1((get2) => {
   const selectedBlock = get2(selectedBlockAtom);
-  const allBlocks = get2(pageBlocksAtom);
+  const allBlocks = get2(presentBlocksAtom);
   let block = selectedBlock;
   const blocks = [selectedBlock];
   do {
@@ -1207,247 +1311,6 @@ const useSelectedBlockIds = () => {
   );
   return [blockIds, setBlockIds, toggleSelectedBlockId];
 };
-const removeNestedBlocks = (blocks, blockIds) => {
-  const _blockIds = [];
-  const _blocks = filter(blocks, (block) => {
-    if (includes(blockIds, block._id) || includes(blockIds, block._parent)) {
-      _blockIds.push(block._id);
-      return false;
-    }
-    return true;
-  });
-  if (!isEmpty(_blockIds)) return removeNestedBlocks(_blocks, _blockIds);
-  return _blocks;
-};
-const useRemoveBlocks = () => {
-  const [presentBlocks] = useBlocksStore();
-  const [ids2, setSelectedIds] = useSelectedBlockIds();
-  const { setNewBlocks } = useBlocksStoreUndoableActions();
-  return useCallback(
-    (blockIds) => {
-      var _a;
-      const parentBlockId = ((_a = find(presentBlocks, { _id: blockIds[0] })) == null ? void 0 : _a._parent) || null;
-      setNewBlocks(removeNestedBlocks(presentBlocks, blockIds));
-      setTimeout(() => setSelectedIds(parentBlockId ? [parentBlockId] : []), 200);
-    },
-    [presentBlocks, setSelectedIds, ids2]
-  );
-};
-const useUpdateBlockAtom = () => {
-  const [blocks] = useBlocksStore();
-  console.log("Default Blocks: ", blocks);
-  return useAtomCallback(
-    useCallback(
-      (get2, set2, { id, props }) => {
-        const blockAsAtoms = get2(pageBlocksAtom);
-        console.log("From Atom callback", blocks);
-        const blockAtom = find(blockAsAtoms, (b) => b._id === id);
-        if (!blockAtom) {
-          console.warn(`Block with id ${id} not found`);
-          return;
-        }
-        return set2(blockAtom._atom, { ...get2(blockAtom._atom), ...props });
-      },
-      [pageBlocksAtom]
-    )
-  );
-};
-const useGetBlockAtomValue = () => {
-  return useAtomCallback(
-    useCallback((get2, _set, id) => {
-      const blockAsAtoms = get2(pageBlocksAtom);
-      const blockAtom = find(blockAsAtoms, (b) => b._id === id);
-      if (!blockAtom) {
-        console.warn(`Block with id ${id} not found`);
-        return;
-      }
-      return get2(blockAtom._atom);
-    }, [])
-  );
-};
-function insertBlocksAtPosition(allBlocks, newBlocks, parentId, position) {
-  let parentBlocks = allBlocks.filter((block) => !block._parent);
-  if (parentId) {
-    parentBlocks = allBlocks.filter((block) => block._parent === parentId);
-  }
-  const insertPosition = !isNaN(position) || position > -1 ? Math.min(position, parentBlocks.length) : parentBlocks.length;
-  let insertIndex = allBlocks.length;
-  for (let i = 0, count = 0; i < allBlocks.length; i++) {
-    if (allBlocks[i]._parent === parentId) {
-      if (count === insertPosition) {
-        insertIndex = i;
-        break;
-      }
-      count++;
-    }
-  }
-  if (!parentId && position !== void 0 && position >= parentBlocks.length) {
-    insertIndex = allBlocks.length;
-  }
-  return [...allBlocks.slice(0, insertIndex), ...newBlocks, ...allBlocks.slice(insertIndex)];
-}
-function getBlocksTree(blocks) {
-  return convertToBlocksTree(blocks);
-}
-const nestedToFlatArray = (nestedJson, parent) => flatten(
-  nestedJson.map((block) => {
-    block = parent ? { ...block, _parent: parent } : { ...block };
-    if (block.children) {
-      const children = [...block.children];
-      delete block.children;
-      return flatten([block, ...nestedToFlatArray(children, block._id)]);
-    }
-    return block;
-  })
-);
-function setProjectBlocksInMemory(nodes, initial = false) {
-  for (let i = 0; i < nodes.length; i++) {
-    const element = nodes[i];
-    if (element.global && !initial) {
-      nodes[i] = {
-        type: "GlobalBlock",
-        blockId: element.blockId,
-        _parent: get(element, "_parent", null),
-        _id: element._id
-      };
-    } else if (element.children && element.children.length) {
-      setProjectBlocksInMemory(element.children);
-    }
-  }
-}
-function getInnerBlocks(flatArr) {
-  let blocks = [];
-  let pBlocks = filter(flatArr, { type: "GlobalBlock" });
-  if (pBlocks.length > 0) {
-    pBlocks = map(pBlocks, getPBlocks);
-    each(pBlocks, (pBlock) => {
-      blocks = [...blocks, ...getSingleBlock(pBlock)];
-    });
-  }
-  return blocks;
-}
-function getSingleBlock(flatArray) {
-  let blocks = [];
-  const parent = get(first(flatArray), "_parent", null);
-  set(first(flatArray), "_parent", null);
-  const block = [flatToNestedInstance.convert(clone(flatArray))];
-  setProjectBlocksInMemory(block, true);
-  let flat = nestedToFlatArray(block, flatArray[0]._id);
-  flat = set(flat, "0._parent", parent);
-  blocks = [...blocks, flat, ...getInnerBlocks(flat)];
-  return blocks;
-}
-function getPBlocks(block) {
-  const rootBlock = find(FLAT_ARRAY, { _id: block._id });
-  if (!rootBlock) return [];
-  const blocks = [rootBlock];
-  const children = filter(FLAT_ARRAY, { _parent: block._id });
-  if (children.length) {
-    return flatten([...blocks, ...flatten(map(children, getPBlocks))]);
-  }
-  return flatten(blocks);
-}
-const clone = (obj) => JSON.parse(JSON.stringify(obj));
-let FLAT_ARRAY = [];
-function splitPageBlocks(allPageBlocks) {
-  FLAT_ARRAY = allPageBlocks;
-  const clonedTree = getBlocksTree(clone(allPageBlocks));
-  setProjectBlocksInMemory(clonedTree);
-  const pageBlocks = nestedToFlatArray(clonedTree, null);
-  const globalBlocks = getInnerBlocks(pageBlocks);
-  const mappedBlocks = {};
-  each(globalBlocks, (projectBlock) => set(mappedBlocks, first(projectBlock).blockId, projectBlock));
-  return [pageBlocks, mappedBlocks];
-}
-function flattenTree(node) {
-  let flatArray = [];
-  node.walk((n) => {
-    delete n.model.children;
-    flatArray.push(n.model);
-    return true;
-  });
-  return flatArray;
-}
-function findNodeById(node, id) {
-  return node.first((n) => n.model._id === id) || null;
-}
-function moveNode(rootNode, nodeIdToMove, newParentId, position) {
-  const nodeToMove = findNodeById(rootNode, nodeIdToMove);
-  const newParentNode = findNodeById(rootNode, newParentId);
-  if (nodeToMove && newParentNode) {
-    nodeToMove.drop();
-    if (!newParentNode.children) {
-      newParentNode.model.children = [];
-    }
-    try {
-      newParentNode.addChildAtIndex(nodeToMove, position);
-    } catch (error) {
-      console.error("Error adding child to parent:", error);
-      return false;
-    }
-    return true;
-  }
-  return false;
-}
-function moveBlocksWithChildren(_blocks, idToMove, newParentId, newPosition, updateBlockAtom) {
-  if (!idToMove) return _blocks;
-  newParentId = newParentId || "root";
-  const tree2 = new TreeModel();
-  const root = tree2.parse({ _id: "root", children: getBlocksTree(_blocks) });
-  if (moveNode(root, idToMove, newParentId, newPosition)) {
-    const newBlocks = flattenTree(root);
-    const movedBlock = newBlocks.find((block) => block._id === idToMove);
-    if (movedBlock) {
-      movedBlock._parent = newParentId === "root" ? null : newParentId;
-      updateBlockAtom({ id: movedBlock._id, props: { _parent: movedBlock._parent } });
-    }
-    newBlocks.shift();
-    return convertToBlocksAtoms(newBlocks);
-  }
-  return _blocks;
-}
-const useBlocksStoreManager = () => {
-  const [, setBlocks] = useBlocksStore();
-  const { postMessage } = useBroadcastChannel();
-  const updateBlockAtom = useUpdateBlockAtom();
-  return {
-    setNewBlocks: (newBlocks) => {
-      setBlocks(newBlocks);
-      postMessage({ type: "blocks-updated", blocks: newBlocks });
-    },
-    addBlocks: (newBlocks, parent, position) => {
-      setBlocks((prevBlocks) => {
-        const blocks = insertBlocksAtPosition(prevBlocks, newBlocks, parent, position);
-        postMessage({ type: "blocks-updated", blocks });
-        return blocks;
-      });
-    },
-    removeBlocks: (blockIds) => {
-      setBlocks((prevBlocks) => {
-        const blocks = removeNestedBlocks(prevBlocks, blockIds);
-        postMessage({ type: "blocks-updated", blocks });
-        return blocks;
-      });
-    },
-    moveBlocks: (blockIds, newParent, position) => {
-      setBlocks((prevBlocks) => {
-        let blocks = prevBlocks;
-        for (let i = 0; i < blockIds.length; i++) {
-          blocks = moveBlocksWithChildren(blocks, blockIds[i], newParent, position, updateBlockAtom);
-        }
-        postMessage({ type: "blocks-updated", blocks });
-        return blocks;
-      });
-    },
-    updateBlocksProps: (blocks) => {
-      blocks.forEach((block) => {
-        const updatedBlock = omit(block, "_id");
-        updateBlockAtom({ id: block._id, props: updatedBlock });
-      });
-      postMessage({ type: "blocks-props-updated", blocks });
-    }
-  };
-};
 var undomanager = { exports: {} };
 var hasRequiredUndomanager;
 function requireUndomanager() {
@@ -1601,8 +1464,81 @@ function requireUndomanager() {
   })(undomanager);
   return undomanager.exports;
 }
-var undomanagerExports = requireUndomanager();
-const UndoManager = /* @__PURE__ */ getDefaultExportFromCjs(undomanagerExports);
+var undomanagerExports = requireUndomanager();
+const UndoManager = /* @__PURE__ */ getDefaultExportFromCjs(undomanagerExports);
+function getBlocksTree(blocks) {
+  return convertToBlocksTree(blocks);
+}
+const nestedToFlatArray = (nestedJson, parent) => flatten(
+  nestedJson.map((block) => {
+    block = parent ? { ...block, _parent: parent } : { ...block };
+    if (block.children) {
+      const children = [...block.children];
+      delete block.children;
+      return flatten([block, ...nestedToFlatArray(children, block._id)]);
+    }
+    return block;
+  })
+);
+function setProjectBlocksInMemory(nodes, initial = false) {
+  for (let i = 0; i < nodes.length; i++) {
+    const element = nodes[i];
+    if (element.global && !initial) {
+      nodes[i] = {
+        type: "GlobalBlock",
+        blockId: element.blockId,
+        _parent: get(element, "_parent", null),
+        _id: element._id
+      };
+    } else if (element.children && element.children.length) {
+      setProjectBlocksInMemory(element.children);
+    }
+  }
+}
+function getInnerBlocks(flatArr) {
+  let blocks = [];
+  let pBlocks = filter(flatArr, { type: "GlobalBlock" });
+  if (pBlocks.length > 0) {
+    pBlocks = map(pBlocks, getPBlocks);
+    each(pBlocks, (pBlock) => {
+      blocks = [...blocks, ...getSingleBlock(pBlock)];
+    });
+  }
+  return blocks;
+}
+function getSingleBlock(flatArray) {
+  let blocks = [];
+  const parent = get(first(flatArray), "_parent", null);
+  set(first(flatArray), "_parent", null);
+  const block = [flatToNestedInstance.convert(clone(flatArray))];
+  setProjectBlocksInMemory(block, true);
+  let flat = nestedToFlatArray(block, flatArray[0]._id);
+  flat = set(flat, "0._parent", parent);
+  blocks = [...blocks, flat, ...getInnerBlocks(flat)];
+  return blocks;
+}
+function getPBlocks(block) {
+  const rootBlock = find(FLAT_ARRAY, { _id: block._id });
+  if (!rootBlock) return [];
+  const blocks = [rootBlock];
+  const children = filter(FLAT_ARRAY, { _parent: block._id });
+  if (children.length) {
+    return flatten([...blocks, ...flatten(map(children, getPBlocks))]);
+  }
+  return flatten(blocks);
+}
+const clone = (obj) => JSON.parse(JSON.stringify(obj));
+let FLAT_ARRAY = [];
+function splitPageBlocks(allPageBlocks) {
+  FLAT_ARRAY = allPageBlocks;
+  const clonedTree = getBlocksTree(clone(allPageBlocks));
+  setProjectBlocksInMemory(clonedTree);
+  const pageBlocks = nestedToFlatArray(clonedTree, null);
+  const globalBlocks = getInnerBlocks(pageBlocks);
+  const mappedBlocks = {};
+  each(globalBlocks, (projectBlock) => set(mappedBlocks, first(projectBlock).blockId, projectBlock));
+  return [pageBlocks, mappedBlocks];
+}
 const MODIFIERS = [
   "hover",
   "focus",
@@ -1683,10 +1619,9 @@ const useGetPageData = () => {
   const [projectOptions] = useBrandingOptions();
   const { currentPage } = useCurrentPage();
   const [presentBlocks] = useBlocksStore();
-  const getBlockAtomValue = useGetBlockAtomValue();
   return useCallback(() => {
     const blocks = map(presentBlocks, (block) => {
-      return omit(getBlockAtomValue(block._id), getBlockBuilderProps(block._type));
+      return omit(block, getBlockBuilderProps(block._type));
     });
     const [pageFilteredBlocks = []] = splitPageBlocks(blocks);
     return {
@@ -1814,8 +1749,232 @@ const useUndoManager = () => {
     clear: undoManager.clear
   };
 };
+const broadcastChannel = new BroadcastChannel("chaibuilder");
+const useBroadcastChannel = () => {
+  const pageId = useBuilderProp("pageId", "chaibuilder_page");
+  const postMessage = useDebouncedCallback(
+    (message) => broadcastChannel.postMessage({ ...message, pageId }),
+    [pageId],
+    200
+  );
+  return { postMessage };
+};
+const useUnmountBroadcastChannel = () => {
+  const [, setBlocks] = useBlocksStore();
+  const pageId = useBuilderProp("pageId", "chaibuilder_page");
+  const { updateBlocksProps } = useBlocksStoreManager();
+  useEffect(() => {
+    broadcastChannel.onmessageerror = (event) => {
+      console.log("error", event);
+    };
+    broadcastChannel.onmessage = (event) => {
+      if (event.data.type === "blocks-updated" && event.data.pageId === pageId) {
+        setBlocks(event.data.blocks);
+      }
+      if (event.data.type === "blocks-props-updated" && event.data.pageId === pageId) {
+        updateBlocksProps(event.data.blocks);
+      }
+    };
+    return () => {
+      broadcastChannel.onmessage = null;
+      broadcastChannel.onmessageerror = null;
+    };
+  }, [setBlocks, pageId]);
+};
+const removeNestedBlocks = (blocks, blockIds) => {
+  const _blockIds = [];
+  const _blocks = filter(blocks, (block) => {
+    if (includes(blockIds, block._id) || includes(blockIds, block._parent)) {
+      _blockIds.push(block._id);
+      return false;
+    }
+    return true;
+  });
+  if (!isEmpty(_blockIds)) return removeNestedBlocks(_blocks, _blockIds);
+  return _blocks;
+};
+const useRemoveBlocks = () => {
+  const [presentBlocks] = useBlocksStore();
+  const [ids2, setSelectedIds] = useSelectedBlockIds();
+  const { setNewBlocks } = useBlocksStoreUndoableActions();
+  return useCallback(
+    (blockIds) => {
+      var _a;
+      const parentBlockId = ((_a = find(presentBlocks, { _id: blockIds[0] })) == null ? void 0 : _a._parent) || null;
+      setNewBlocks(removeNestedBlocks(presentBlocks, blockIds));
+      setTimeout(() => setSelectedIds(parentBlockId ? [parentBlockId] : []), 200);
+    },
+    [presentBlocks, setSelectedIds, ids2]
+  );
+};
+const writeAtomValue = atom$1(
+  null,
+  // it's a convention to pass `null` for the first argument
+  (get2, set2, { id, props }) => {
+    const blockAsAtoms = get2(pageBlocksAtomsAtom);
+    const blockAtom = find(blockAsAtoms, (b) => get2(b)._id === id);
+    if (!blockAtom) {
+      throw new Error(`Block with id ${id} not found`);
+    }
+    return set2(blockAtom, { ...get2(blockAtom), ...props });
+  }
+);
+const useUpdateBlockAtom = () => {
+  return useSetAtom$1(writeAtomValue);
+};
+const useGetBlockAtomValue = (splitAtoms) => {
+  return useAtomCallback(
+    useCallback(
+      (get2, _set, idOrAtom) => {
+        const blockAsAtoms = get2(pageBlocksAtomsAtom);
+        const blockAtom = find(
+          blockAsAtoms,
+          (b) => get2(b)._id === (isString(idOrAtom) ? idOrAtom : get2(idOrAtom)._id)
+        );
+        if (!blockAtom) {
+          console.warn(`Block with id ${idOrAtom} not found`);
+          return;
+        }
+        return get2(blockAtom);
+      },
+      [splitAtoms]
+    )
+  );
+};
+const useGetBlockAtom = (splitAtoms) => {
+  return useAtomCallback(
+    useCallback(
+      (get2, _set, idOrAtom) => {
+        const blockAsAtoms = get2(splitAtoms ?? pageBlocksAtomsAtom);
+        const blockAtom = find(
+          blockAsAtoms,
+          (b) => get2(b)._id === (isString(idOrAtom) ? idOrAtom : get2(idOrAtom)._id)
+        );
+        if (!blockAtom) {
+          console.warn(`Block with id ${idOrAtom} not found`);
+          return;
+        }
+        return blockAtom;
+      },
+      [splitAtoms]
+    )
+  );
+};
+function insertBlocksAtPosition(allBlocks, newBlocks, parentId, position) {
+  let parentBlocks = allBlocks.filter((block) => !block._parent);
+  if (parentId) {
+    parentBlocks = allBlocks.filter((block) => block._parent === parentId);
+  }
+  const insertPosition = !isNaN(position) || position > -1 ? Math.min(position, parentBlocks.length) : parentBlocks.length;
+  let insertIndex = allBlocks.length;
+  for (let i = 0, count = 0; i < allBlocks.length; i++) {
+    if (allBlocks[i]._parent === parentId) {
+      if (count === insertPosition) {
+        insertIndex = i;
+        break;
+      }
+      count++;
+    }
+  }
+  if (!parentId && position !== void 0 && position >= parentBlocks.length) {
+    insertIndex = allBlocks.length;
+  }
+  return [...allBlocks.slice(0, insertIndex), ...newBlocks, ...allBlocks.slice(insertIndex)];
+}
+function flattenTree(node) {
+  let flatArray = [];
+  node.walk((n) => {
+    delete n.model.children;
+    flatArray.push(n.model);
+    return true;
+  });
+  return flatArray;
+}
+function findNodeById(node, id) {
+  return node.first((n) => n.model._id === id) || null;
+}
+function moveNode(rootNode, nodeIdToMove, newParentId, position) {
+  const nodeToMove = findNodeById(rootNode, nodeIdToMove);
+  const newParentNode = findNodeById(rootNode, newParentId);
+  if (nodeToMove && newParentNode) {
+    nodeToMove.drop();
+    if (!newParentNode.children) {
+      newParentNode.model.children = [];
+    }
+    try {
+      newParentNode.addChildAtIndex(nodeToMove, position);
+    } catch (error) {
+      console.error("Error adding child to parent:", error);
+      return false;
+    }
+    return true;
+  }
+  return false;
+}
+function moveBlocksWithChildren(_blocks, idToMove, newParentId, newPosition) {
+  if (!idToMove) return _blocks;
+  newParentId = newParentId || "root";
+  const tree2 = new TreeModel();
+  const root = tree2.parse({ _id: "root", children: getBlocksTree(_blocks) });
+  if (moveNode(root, idToMove, newParentId, newPosition)) {
+    const newBlocks = flattenTree(root);
+    const movedBlock = newBlocks.find((block) => block._id === idToMove);
+    if (movedBlock) movedBlock._parent = newParentId === "root" ? null : newParentId;
+    newBlocks.shift();
+    return newBlocks;
+  }
+  return _blocks;
+}
+const useBlocksStoreManager = () => {
+  const [, setBlocks] = useBlocksStore();
+  const { postMessage } = useBroadcastChannel();
+  const updateBlockAtom = useUpdateBlockAtom();
+  return {
+    setNewBlocks: (newBlocks) => {
+      setBlocks(newBlocks);
+      postMessage({ type: "blocks-updated", blocks: newBlocks });
+    },
+    addBlocks: (newBlocks, parent, position) => {
+      setBlocks((prevBlocks) => {
+        const blocks = insertBlocksAtPosition(prevBlocks, newBlocks, parent, position);
+        postMessage({ type: "blocks-updated", blocks });
+        return blocks;
+      });
+    },
+    removeBlocks: (blockIds) => {
+      setBlocks((prevBlocks) => {
+        const blocks = removeNestedBlocks(prevBlocks, blockIds);
+        postMessage({ type: "blocks-updated", blocks });
+        return blocks;
+      });
+    },
+    moveBlocks: (blockIds, newParent, position) => {
+      setBlocks((prevBlocks) => {
+        let blocks = [...prevBlocks];
+        for (let i = 0; i < blockIds.length; i++) {
+          blocks = moveBlocksWithChildren(blocks, blockIds[i], newParent, position);
+        }
+        each(blockIds, (id) => {
+          const block = find(blocks, (b) => b._id === id);
+          if (block) {
+            updateBlockAtom({ id, props: { _parent: block._parent || null } });
+          }
+        });
+        postMessage({ type: "blocks-updated", blocks });
+        return blocks;
+      });
+    },
+    updateBlocksProps: (blocks) => {
+      blocks.forEach((block) => {
+        const updatedBlock = omit(block, "_id");
+        updateBlockAtom({ id: block._id, props: updatedBlock });
+      });
+      postMessage({ type: "blocks-props-updated", blocks });
+    }
+  };
+};
 const useBlocksStore = () => {
-  return useAtom$1(pageBlocksAtom);
+  return useAtom$1(presentBlocksAtom);
 };
 const useBlocksStoreUndoableActions = () => {
   const { add } = useUndoManager();
@@ -1949,7 +2108,7 @@ const useAddBlock = () => {
         blocks[0]._parent = parentBlock._parent;
         parentBlockId = parentBlock._parent;
       }
-      addBlocks(convertToBlocksAtoms(blocks), parentBlockId, position);
+      addBlocks(blocks, parentBlockId, position);
       setSelected([(_a = first(blocks)) == null ? void 0 : _a._id]);
       return first(blocks);
     },
@@ -1981,7 +2140,7 @@ const useAddBlock = () => {
         parentBlockId = parentBlock._parent;
       }
       const newBlocks = [newBlock];
-      addBlocks(convertToBlocksAtoms(newBlocks), parentBlockId, position);
+      addBlocks(newBlocks, parentBlockId, position);
       setSelected([newBlock._id]);
       return newBlock;
     },
@@ -3179,9 +3338,12 @@ const selectedStylingBlocksAtom = atom$1([]);
 selectedStylingBlocksAtom.debugLabel = "selectedStylingBlocksAtom";
 const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom);
 const addClassesToBlocksAtom = atom$1(null, (get$1, _set, { blockIds, newClasses }) => {
-  const blockAtoms = map(
-    filter(get$1(pageBlocksAtom), (block) => blockIds.includes(block._id)),
-    (block) => block._atom
+  const blockAtoms = filter(
+    get$1(pageBlocksAtomsAtom),
+    (blockAtom) => (
+      // @ts-ignore
+      blockIds.includes(get$1(blockAtom)._id)
+    )
   );
   const styleBlock = first(get$1(selectedStylingBlocksAtom));
   return map(blockAtoms, (blockAtom) => {
@@ -3295,7 +3457,7 @@ const useDuplicateBlocks = () => {
         const blockPosition = siblingBlocks.indexOf(block);
         const newBlockPosition = blockPosition + 1;
         const newBlocks = getDuplicatedBlocks(presentBlocks, blockId, parentId);
-        addBlocks(convertToBlocksAtoms(newBlocks), parentId, newBlockPosition);
+        addBlocks(newBlocks, parentId, newBlockPosition);
         newBlockIds.push(get(newBlocks, "0._id", ""));
       });
       setSelected(newBlockIds);
@@ -3329,7 +3491,7 @@ const useCanPaste = () => {
   };
 };
 const useMoveCutBlocks = () => {
-  const presentBlocks = useAtomValue$1(pageBlocksAtom);
+  const presentBlocks = useAtomValue$1(presentBlocksAtom);
   const { moveBlocks: moveBlocks2 } = useBlocksStoreUndoableActions();
   return useCallback(
     (blockIds, newParentId) => {
@@ -3407,9 +3569,12 @@ const usePreviewMode = () => {
 };
 const removeClassFromBlocksAtom = atom$1(null, (get$1, _set, { blockIds, fullClasses }) => {
   const styleBlock = first(get$1(selectedStylingBlocksAtom));
-  const blockAtoms = map(
-    filter(get$1(pageBlocksAtom), (block) => blockIds.includes(block._id)),
-    (block) => block._atom
+  const blockAtoms = filter(
+    get$1(pageBlocksAtomsAtom),
+    (blockAtom) => (
+      // @ts-ignore
+      blockIds.includes(get$1(blockAtom)._id)
+    )
   );
   return map(blockAtoms, (blockAtom) => {
     const block = get$1(blockAtom);
@@ -3612,23 +3777,27 @@ const useBlockHighlight = () => {
     var _a;
     return (iframe == null ? void 0 : iframe.contentDocument) || ((_a = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _a.document);
   }, [iframe]);
-  const highlightBlock = (elementOrID) => {
-    if (lastHighlighted) {
-      lastHighlighted.removeAttribute("data-highlighted");
-    }
-    if (typeof elementOrID !== "string") {
-      elementOrID.setAttribute("data-highlighted", "true");
-      lastHighlighted = elementOrID;
-    } else if (typeof elementOrID === "string") {
-      const element = innerDoc.querySelector(`[data-block-id="${elementOrID}"]`);
-      if (element) {
-        element.setAttribute("data-highlighted", "true");
-        lastHighlighted = element;
+  const highlightBlock = useCallback(
+    (elementOrID) => {
+      if (!innerDoc) return;
+      if (lastHighlighted) {
+        lastHighlighted.removeAttribute("data-highlighted");
+      }
+      if (typeof elementOrID !== "string") {
+        elementOrID.setAttribute("data-highlighted", "true");
+        lastHighlighted = elementOrID;
+      } else if (typeof elementOrID === "string") {
+        const element = innerDoc.querySelector(`[data-block-id="${elementOrID}"]`);
+        if (element) {
+          element.setAttribute("data-highlighted", "true");
+          lastHighlighted = element;
+        }
+      } else {
+        lastHighlighted = null;
       }
-    } else {
-      lastHighlighted = null;
-    }
-  };
+    },
+    [innerDoc]
+  );
   const clearHighlight = () => {
     if (lastHighlighted) {
       lastHighlighted.removeAttribute("data-highlighted");
@@ -3641,7 +3810,7 @@ const globalBlocksStoreAtom = atom({});
 const globalBlocksLoadingStateAtom = atom({});
 const useGlobalBlocksStore = () => {
   const [globalBlocks, setGlobalBlocks] = useAtom(globalBlocksStoreAtom);
-  const getGlobalBlocks = useCallback((globalBlockId) => get(globalBlocks, globalBlockId, []), [globalBlocks]);
+  const getGlobalBlocks = useCallback((globalBlock) => get(globalBlocks, globalBlock, []), [globalBlocks]);
   const reset = useCallback(() => setGlobalBlocks({}), [setGlobalBlocks]);
   return { getGlobalBlocks, reset };
 };
@@ -3649,14 +3818,10 @@ const useWatchGlobalBlocks = () => {
   const [blocksStore] = useBlocksStore();
   const [globalBlocks, setGlobalBlocks] = useAtom(globalBlocksStoreAtom);
   const [globalBlocksLoadingState, setGlobalBlocksLoadingState] = useAtom(globalBlocksLoadingStateAtom);
-  const getBlockAtomValue = useGetBlockAtomValue();
   const getGlobalBlockBlocks = useBuilderProp("getGlobalBlockBlocks", async (_key) => []);
   const globalBlocksList = useMemo(() => {
     const globalBlocks2 = blocksStore.filter((block) => block._type === "GlobalBlock");
-    return globalBlocks2.filter((block) => block._type === "GlobalBlock").map((block) => {
-      const blockValue = getBlockAtomValue(block._id);
-      return blockValue.globalBlock;
-    });
+    return globalBlocks2.filter((block) => block._type === "GlobalBlock").map((block) => block.globalBlock);
   }, [blocksStore]);
   useEffect(() => {
     forEach(globalBlocksList, (globalBlock) => {
@@ -4058,7 +4223,7 @@ const useAiAssistant = () => {
 };
 const wrapperBlockAtom = atom$1((get2) => {
   var _a;
-  const blocks = get2(pageBlocksAtom);
+  const blocks = get2(presentBlocksAtom);
   const blockIds = get2(selectedBlockIdsAtom);
   const blockId = blockIds.length === 1 ? blockIds[0] : null;
   if (!blockId) return null;
@@ -4892,7 +5057,7 @@ const BlockRenderer = ({ blockAtom, children }) => {
   const blockAttributesProps = useMemo(() => getBlockTagAttributes(block), [block]);
   const runtimeProps = useMemo(() => getRuntimePropValues(block._id, getBlockRuntimeProps(block._type)), [block]);
   const dataProviderProps = useMemo(() => {
-    if (!has(registeredChaiBlock, "dataProvider") || !isFunction(registeredChaiBlock.dataProvider)) return {};
+    if (!has(registeredChaiBlock, "dataProvider") || !isFunction$1(registeredChaiBlock.dataProvider)) return {};
     return registeredChaiBlock.dataProvider(block, selectedLang);
   }, [block, selectedLang, registeredChaiBlock]);
   const props = useMemo(
@@ -4916,23 +5081,28 @@ const BlockRenderer = ({ blockAtom, children }) => {
 const GlobalBlocksRenderer = ({ blockAtom }) => {
   const { getGlobalBlocks } = useGlobalBlocksStore();
   const [block] = useAtom$1(blockAtom);
-  const globalBlocks = useMemo(() => getGlobalBlocks(block == null ? void 0 : block.globalBlock), [block == null ? void 0 : block.globalBlock, getGlobalBlocks]);
-  const globalBlocksAtoms = useMemo(() => convertToBlocksAtoms(globalBlocks), [globalBlocks]);
-  return /* @__PURE__ */ jsx(BlocksRenderer, { blocks: globalBlocksAtoms, filterFn: (block2) => isEmpty(block2._parent) });
+  const globalBlocks = useMemo(() => getGlobalBlocks((block == null ? void 0 : block.globalBlock) ?? ""), [getGlobalBlocks, block == null ? void 0 : block.globalBlock]);
+  const blocksAtoms = useMemo(() => splitAtom(atom$1(globalBlocks)), [globalBlocks]);
+  return /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: blocksAtoms, blocks: globalBlocks });
 };
 const BlocksRenderer = ({
   blocks,
-  filterFn
+  parent = null,
+  splitAtoms = void 0
 }) => {
-  const filteredBlocks = useMemo(() => filter(blocks, filterFn), [blocks, filterFn]);
-  const hasChildren = (blockId) => filter(blocks, (b) => b._parent === blockId).length > 0;
+  const getAtomValue = useGetBlockAtom(splitAtoms);
+  const filteredBlocks = useMemo(
+    () => filter(blocks, (block) => isString(parent) ? block._parent === parent : !block._parent),
+    [blocks, parent]
+  );
+  const hasChildren = useCallback((block) => filter(blocks, (b) => b._parent === block._id).length > 0, [blocks]);
   return map(filteredBlocks, (block) => {
-    return /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: block._atom, children: block._type === "GlobalBlock" ? /* @__PURE__ */ jsx(GlobalBlocksRenderer, { blockAtom: block._atom }) : hasChildren(block._id) ? /* @__PURE__ */ jsx(BlocksRenderer, { blocks, filterFn: (b) => b._parent === block._id }) : null }, block._id);
+    return /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: getAtomValue(block._id), children: block._type === "GlobalBlock" ? /* @__PURE__ */ jsx(GlobalBlocksRenderer, { blockAtom: getAtomValue(block._id) }) : hasChildren(block) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms, blocks, parent: block._id }) : null }, block._id);
   });
 };
 const PageBlocksRenderer = () => {
   const [blocks] = useBlocksStore();
-  return /* @__PURE__ */ jsx(BlocksRenderer, { blocks, filterFn: (block) => isEmpty(block._parent) });
+  return /* @__PURE__ */ jsx(BlocksRenderer, { blocks });
 };
 const StaticBlocksRenderer = () => {
   const [blocks] = useBlocksStore();
@@ -6144,7 +6314,7 @@ const JSONForm = memo(({ blockId, schema, uiSchema, formData, onChange }) => {
       onChange({ formData: formData2 }, id);
     },
     [onChange, selectedLang],
-    400
+    1e3
     // save only every 5 seconds
   );
   return /* @__PURE__ */ jsx(
@@ -8386,7 +8556,7 @@ const CoreBlock = ({
   const { clearHighlight } = useBlockHighlight();
   const addBlockToPage = () => {
     if (has(block, "blocks")) {
-      const blocks = isFunction(block.blocks) ? block.blocks() : block.blocks;
+      const blocks = isFunction$1(block.blocks) ? block.blocks() : block.blocks;
       addPredefinedBlock(syncBlocksWithDefaults(blocks), parentId || null, position);
     } else {
       addCoreBlock(block, parentId || null, position);
@@ -10870,7 +11040,7 @@ const getParentNodeIds = (blocks, id) => {
 const expandedIdsAtom = atom$1([]);
 const useExpandTree = () => {
   const [ids2] = useSelectedBlockIds();
-  const pageBlocks = useAtomValue$1(pageBlocksAtom);
+  const pageBlocks = useAtomValue$1(presentBlocksAtom);
   const [, setExpandedIds] = useAtom$1(expandedIdsAtom);
   useEffect(() => {
     let expandedIds = [];
@@ -11511,7 +11681,7 @@ const ChaiBuilderComponent = (props) => {
   useEffect(() => {
     setTimeout(() => {
       const withDefaults = syncBlocksWithDefaults(props.blocks || []);
-      setAllBlocks(convertToBlocksAtoms(withDefaults));
+      setAllBlocks(withDefaults);
       if (withDefaults && withDefaults.length > 0) {
         postMessage({ type: "blocks-updated", blocks: withDefaults });
       }