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

package/dist/core.cjs

@@ -17,8 +17,8 @@ const reactIcons = require("@radix-ui/react-icons");
 const web = require("@react-hookz/web");
 const flagged = require("flagged");
 const runtime = require("@chaibuilder/runtime");
-const TreeModel = require("tree-model");
 const ChaiThemeFn = require("./ChaiThemeFn-DcE5RdLQ.cjs");
+const TreeModel = require("tree-model");
 const reactHotkeysHook = require("react-hotkeys-hook");
 const lucideReact = require("lucide-react");
 const ReactQuill = require("react-quill");
@@ -586,6 +586,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 = (get) => {
+            const prev2 = get(mappingAtom);
+            const currArr = get(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 = (get, set, update) => {
+            const prev2 = get(mappingAtom);
+            const arr2 = get(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)) {
+              set(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((get) => {
+        const prev = get(mappingAtom);
+        const arr = get(arrAtom);
+        const mapping = getMapping(arr, prev == null ? void 0 : prev.arr);
+        return mapping;
+      });
+      mappingAtom.init = void 0;
+      const splittedAtom = isWritable(arrAtom) ? atom(
+        (get) => get(mappingAtom).atomList,
+        (get, set, action) => {
+          switch (action.type) {
+            case "remove": {
+              const index = get(splittedAtom).indexOf(action.atom);
+              if (index >= 0) {
+                const arr = get(arrAtom);
+                set(arrAtom, [
+                  ...arr.slice(0, index),
+                  ...arr.slice(index + 1)
+                ]);
+              }
+              break;
+            }
+            case "insert": {
+              const index = action.before ? get(splittedAtom).indexOf(action.before) : get(splittedAtom).length;
+              if (index >= 0) {
+                const arr = get(arrAtom);
+                set(arrAtom, [
+                  ...arr.slice(0, index),
+                  action.value,
+                  ...arr.slice(index)
+                ]);
+              }
+              break;
+            }
+            case "move": {
+              const index1 = get(splittedAtom).indexOf(action.atom);
+              const index2 = action.before ? get(splittedAtom).indexOf(action.before) : get(splittedAtom).length;
+              if (index1 >= 0 && index2 >= 0) {
+                const arr = get(arrAtom);
+                if (index1 < index2) {
+                  set(arrAtom, [
+                    ...arr.slice(0, index1),
+                    ...arr.slice(index1 + 1, index2),
+                    arr[index1],
+                    ...arr.slice(index2)
+                  ]);
+                } else {
+                  set(arrAtom, [
+                    ...arr.slice(0, index2),
+                    arr[index1],
+                    ...arr.slice(index2, index1),
+                    ...arr.slice(index1 + 1)
+                  ]);
+                }
+              }
+              break;
+            }
+          }
+        }
+      ) : atom((get) => get(mappingAtom).atomList);
+      return splittedAtom;
+    },
+    arrAtom,
+    cacheKeyForEmptyKeyExtractor
+  );
+}
 const isPromiseLike$1 = (x) => typeof (x == null ? void 0 : x.then) === "function";
 function createJSONStorage(getStringStorage = () => {
   try {
@@ -978,10 +1114,61 @@ __publicField(Frame, "defaultProps", {
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
 const ChaiFrame = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Frame, { ...props, forwardedRef: ref }));
+const canAcceptChildBlock = (parentType, childType) => {
+  if (!parentType) return true;
+  const blockDefinition = runtime.getRegisteredChaiBlock(parentType);
+  if (!blockDefinition) return false;
+  return lodashEs.has(blockDefinition, "canAcceptBlock") ? blockDefinition.canAcceptBlock(childType) : false;
+};
+const canAddChildBlock = (parentType) => {
+  const blockDefinition = runtime.getRegisteredChaiBlock(parentType);
+  if (!blockDefinition) return false;
+  return lodashEs.has(blockDefinition, "canAcceptBlock");
+};
+const canBeNestedInside = (parentType, childType) => {
+  const blockDefinition = runtime.getRegisteredChaiBlock(childType);
+  if (!blockDefinition) return true;
+  return lodashEs.has(blockDefinition, "canBeNested") ? blockDefinition.canBeNested(parentType) : true;
+};
+const canDuplicateBlock = (type) => {
+  const blockDefinition = runtime.getRegisteredChaiBlock(type);
+  if (!blockDefinition) return true;
+  return lodashEs.has(blockDefinition, "canDuplicate") ? blockDefinition.canDuplicate() : true;
+};
+const canDeleteBlock = (type) => {
+  const blockDefinition = runtime.getRegisteredChaiBlock(type);
+  if (!blockDefinition) return true;
+  return lodashEs.has(blockDefinition, "canDelete") ? blockDefinition.canDelete() : true;
+};
+const canDropBlock = (_currentTree, { dragSource, dropTarget: dropTarget2 }) => {
+  const dragSourceType = lodashEs.get(dragSource, "data._type", "");
+  const dropTargetType = lodashEs.get(dropTarget2, "data._type", "");
+  return canAcceptChildBlock(dropTargetType, dragSourceType);
+};
+if (void 0) {
+  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 = lodashEs.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:${iconBase.generateUUID()}`;
+      });
+    }
     if (lodashEs.filter(blocks, { _parent: children[i]._id }).length > 0) {
       const newId = iconBase.generateUUID();
       newBlocks.push({ ...children[i], oldId: children[i]._id, ...{ _id: newId, _parent } });
@@ -1046,21 +1233,15 @@ const getDuplicatedBlocks = (currentBlocks, id, newParentId = null) => {
     return lodashEs.omit(newBlock, ["global", "oldId"]);
   });
 };
-const pageBlocksAtom = jotai.atom([]);
-pageBlocksAtom.debugLabel = "pageBlocksAtom";
-const convertToBlocksAtoms = (blocks) => {
-  return blocks.map((block) => ({
-    _type: block._type,
-    _id: block._id,
-    _parent: block._parent ?? null,
-    _atom: jotai.atom(block)
-  }));
-};
+const presentBlocksAtom = jotai.atom([]);
+presentBlocksAtom.debugLabel = "presentBlocksAtom";
 const treeDSBlocks = jotai.atom((get) => {
-  const presentBlocks = get(pageBlocksAtom).map((block) => get(block._atom));
-  return convertToBlocksTree(presentBlocks);
+  const presentBlocks = get(presentBlocksAtom);
+  return convertToBlocksTree([...presentBlocks]);
 });
 treeDSBlocks.debugLabel = "treeDSBlocks";
+const pageBlocksAtomsAtom = splitAtom(presentBlocksAtom);
+pageBlocksAtomsAtom.debugLabel = "pageBlocksAtomsAtom";
 const builderActivePageAtom = jotai.atom("");
 builderActivePageAtom.debugLabel = "builderActivePageAtom";
 const destinationDropIndexAtom = jotai.atom(-1);
@@ -1072,87 +1253,10 @@ const globalBlocksAtom = jotai.atom((get) => {
   return lodashEs.filter(globalBlocks, (block) => lodashEs.has(block, "blockId"));
 });
 globalBlocksAtom.debugLabel = "globalBlocksAtom";
-const canAcceptChildBlock = (parentType, childType) => {
-  if (!parentType) return true;
-  const blockDefinition = runtime.getRegisteredChaiBlock(parentType);
-  if (!blockDefinition) return false;
-  return lodashEs.has(blockDefinition, "canAcceptBlock") ? blockDefinition.canAcceptBlock(childType) : false;
-};
-const canAddChildBlock = (parentType) => {
-  const blockDefinition = runtime.getRegisteredChaiBlock(parentType);
-  if (!blockDefinition) return false;
-  return lodashEs.has(blockDefinition, "canAcceptBlock");
-};
-const canBeNestedInside = (parentType, childType) => {
-  const blockDefinition = runtime.getRegisteredChaiBlock(childType);
-  if (!blockDefinition) return true;
-  return lodashEs.has(blockDefinition, "canBeNested") ? blockDefinition.canBeNested(parentType) : true;
-};
-const canDuplicateBlock = (type) => {
-  const blockDefinition = runtime.getRegisteredChaiBlock(type);
-  if (!blockDefinition) return true;
-  return lodashEs.has(blockDefinition, "canDuplicate") ? blockDefinition.canDuplicate() : true;
-};
-const canDeleteBlock = (type) => {
-  const blockDefinition = runtime.getRegisteredChaiBlock(type);
-  if (!blockDefinition) return true;
-  return lodashEs.has(blockDefinition, "canDelete") ? blockDefinition.canDelete() : true;
-};
-const canDropBlock = (_currentTree, { dragSource, dropTarget: dropTarget2 }) => {
-  const dragSourceType = lodashEs.get(dragSource, "data._type", "");
-  const dropTargetType = lodashEs.get(dropTarget2, "data._type", "");
-  return canAcceptChildBlock(dropTargetType, dragSourceType);
-};
-if (void 0) {
-  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 = web.useDebouncedCallback(
-    (message) => broadcastChannel.postMessage({ ...message, pageId }),
-    [pageId],
-    200
-  );
-  return { postMessage };
-};
-const useUnmountBroadcastChannel = () => {
-  const [, setBlocks] = useBlocksStore();
-  const pageId = useBuilderProp("pageId", "chaibuilder_page");
-  const { updateBlocksProps } = useBlocksStoreManager();
-  React.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 = jotai.atom([]);
 selectedBlockIdsAtom.debugLabel = "selectedBlockIdsAtom";
 const selectedBlocksAtom = jotai.atom((get) => {
-  const blocks = get(pageBlocksAtom);
+  const blocks = get(presentBlocksAtom);
   const blockIds = get(selectedBlockIdsAtom);
   return lodashEs.map(
     lodashEs.filter(blocks, ({ _id }) => lodashEs.includes(blockIds, _id)),
@@ -1166,7 +1270,7 @@ const selectedBlockAtom = jotai.atom((get) => {
     return null;
   }
   if (blocks.length === 1) {
-    return get(lodashEs.first(blocks)._atom);
+    return blocks[0];
   }
 });
 selectedBlockAtom.debugLabel = "selectedBlockAtom";
@@ -1174,7 +1278,7 @@ const getParentId = (block) => lodashEs.get(block, "_parent", null);
 const selectedBlocksParentsAtom = jotai.atom((get) => {
   const selectedBlocks = get(selectedBlocksAtom);
   const parentIds = lodashEs.map(selectedBlocks, getParentId);
-  return lodashEs.filter(get(pageBlocksAtom), (block) => lodashEs.includes(parentIds, block._id));
+  return lodashEs.filter(get(presentBlocksAtom), (block) => lodashEs.includes(parentIds, block._id));
 });
 selectedBlocksParentsAtom.debugLabel = "selectedBlocksParentsAtom";
 const selectedBlockFlexChildAtom = jotai.atom(() => {
@@ -1196,7 +1300,7 @@ const useSelectedBlocksDisplayChild = () => ({
 const useSelectedBlock = () => jotai.useAtomValue(selectedBlockAtom);
 const selectedBlockHierarchy = jotai.atom((get) => {
   const selectedBlock = get(selectedBlockAtom);
-  const allBlocks = get(pageBlocksAtom);
+  const allBlocks = get(presentBlocksAtom);
   let block = selectedBlock;
   const blocks = [selectedBlock];
   do {
@@ -1222,244 +1326,6 @@ const useSelectedBlockIds = () => {
   );
   return [blockIds, setBlockIds, toggleSelectedBlockId];
 };
-const removeNestedBlocks = (blocks, blockIds) => {
-  const _blockIds = [];
-  const _blocks = lodashEs.filter(blocks, (block) => {
-    if (lodashEs.includes(blockIds, block._id) || lodashEs.includes(blockIds, block._parent)) {
-      _blockIds.push(block._id);
-      return false;
-    }
-    return true;
-  });
-  if (!lodashEs.isEmpty(_blockIds)) return removeNestedBlocks(_blocks, _blockIds);
-  return _blocks;
-};
-const useRemoveBlocks = () => {
-  const [presentBlocks] = useBlocksStore();
-  const [ids2, setSelectedIds] = useSelectedBlockIds();
-  const { setNewBlocks } = useBlocksStoreUndoableActions();
-  return React.useCallback(
-    (blockIds) => {
-      var _a;
-      const parentBlockId = ((_a = lodashEs.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 = jotai.atom(
-  null,
-  // it's a convention to pass `null` for the first argument
-  (get, set, { id, props }) => {
-    const blockAsAtoms = get(pageBlocksAtom);
-    console.log("From Atom callback", blockAsAtoms);
-    const blockAtom = lodashEs.find(blockAsAtoms, (b) => b._id === id);
-    if (!blockAtom) {
-      throw new Error(`Block with id ${id} not found`);
-    }
-    return set(blockAtom._atom, { ...get(blockAtom._atom), ...props });
-  }
-);
-const useUpdateBlockAtom = () => {
-  return jotai.useSetAtom(writeAtomValue);
-};
-const useGetBlockAtomValue = () => {
-  return useAtomCallback(
-    React.useCallback((get, _set, id) => {
-      const blockAsAtoms = get(pageBlocksAtom);
-      console.log("Block As Atoms", blockAsAtoms);
-      const blockAtom = lodashEs.find(blockAsAtoms, (b) => b._id === id);
-      if (!blockAtom) {
-        throw new Error(`Block with id ${id} not found`);
-      }
-      return get(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) => lodashEs.flatten(
-  nestedJson.map((block) => {
-    block = parent ? { ...block, _parent: parent } : { ...block };
-    if (block.children) {
-      const children = [...block.children];
-      delete block.children;
-      return lodashEs.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: lodashEs.get(element, "_parent", null),
-        _id: element._id
-      };
-    } else if (element.children && element.children.length) {
-      setProjectBlocksInMemory(element.children);
-    }
-  }
-}
-function getInnerBlocks(flatArr) {
-  let blocks = [];
-  let pBlocks = lodashEs.filter(flatArr, { type: "GlobalBlock" });
-  if (pBlocks.length > 0) {
-    pBlocks = lodashEs.map(pBlocks, getPBlocks);
-    lodashEs.each(pBlocks, (pBlock) => {
-      blocks = [...blocks, ...getSingleBlock(pBlock)];
-    });
-  }
-  return blocks;
-}
-function getSingleBlock(flatArray) {
-  let blocks = [];
-  const parent = lodashEs.get(lodashEs.first(flatArray), "_parent", null);
-  lodashEs.set(lodashEs.first(flatArray), "_parent", null);
-  const block = [flatToNestedInstance.convert(clone(flatArray))];
-  setProjectBlocksInMemory(block, true);
-  let flat = nestedToFlatArray(block, flatArray[0]._id);
-  flat = lodashEs.set(flat, "0._parent", parent);
-  blocks = [...blocks, flat, ...getInnerBlocks(flat)];
-  return blocks;
-}
-function getPBlocks(block) {
-  const rootBlock = lodashEs.find(FLAT_ARRAY, { _id: block._id });
-  if (!rootBlock) return [];
-  const blocks = [rootBlock];
-  const children = lodashEs.filter(FLAT_ARRAY, { _parent: block._id });
-  if (children.length) {
-    return lodashEs.flatten([...blocks, ...lodashEs.flatten(lodashEs.map(children, getPBlocks))]);
-  }
-  return lodashEs.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 = {};
-  lodashEs.each(globalBlocks, (projectBlock) => lodashEs.set(mappedBlocks, lodashEs.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 = lodashEs.omit(block, "_id");
-        updateBlockAtom({ id: block._id, props: updatedBlock });
-      });
-      postMessage({ type: "blocks-props-updated", blocks });
-    }
-  };
-};
 var undomanager = { exports: {} };
 var hasRequiredUndomanager;
 function requireUndomanager() {
@@ -1613,8 +1479,81 @@ function requireUndomanager() {
   })(undomanager);
   return undomanager.exports;
 }
-var undomanagerExports = requireUndomanager();
-const UndoManager = /* @__PURE__ */ ChaiThemeFn.getDefaultExportFromCjs(undomanagerExports);
+var undomanagerExports = requireUndomanager();
+const UndoManager = /* @__PURE__ */ ChaiThemeFn.getDefaultExportFromCjs(undomanagerExports);
+function getBlocksTree(blocks) {
+  return convertToBlocksTree(blocks);
+}
+const nestedToFlatArray = (nestedJson, parent) => lodashEs.flatten(
+  nestedJson.map((block) => {
+    block = parent ? { ...block, _parent: parent } : { ...block };
+    if (block.children) {
+      const children = [...block.children];
+      delete block.children;
+      return lodashEs.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: lodashEs.get(element, "_parent", null),
+        _id: element._id
+      };
+    } else if (element.children && element.children.length) {
+      setProjectBlocksInMemory(element.children);
+    }
+  }
+}
+function getInnerBlocks(flatArr) {
+  let blocks = [];
+  let pBlocks = lodashEs.filter(flatArr, { type: "GlobalBlock" });
+  if (pBlocks.length > 0) {
+    pBlocks = lodashEs.map(pBlocks, getPBlocks);
+    lodashEs.each(pBlocks, (pBlock) => {
+      blocks = [...blocks, ...getSingleBlock(pBlock)];
+    });
+  }
+  return blocks;
+}
+function getSingleBlock(flatArray) {
+  let blocks = [];
+  const parent = lodashEs.get(lodashEs.first(flatArray), "_parent", null);
+  lodashEs.set(lodashEs.first(flatArray), "_parent", null);
+  const block = [flatToNestedInstance.convert(clone(flatArray))];
+  setProjectBlocksInMemory(block, true);
+  let flat = nestedToFlatArray(block, flatArray[0]._id);
+  flat = lodashEs.set(flat, "0._parent", parent);
+  blocks = [...blocks, flat, ...getInnerBlocks(flat)];
+  return blocks;
+}
+function getPBlocks(block) {
+  const rootBlock = lodashEs.find(FLAT_ARRAY, { _id: block._id });
+  if (!rootBlock) return [];
+  const blocks = [rootBlock];
+  const children = lodashEs.filter(FLAT_ARRAY, { _parent: block._id });
+  if (children.length) {
+    return lodashEs.flatten([...blocks, ...lodashEs.flatten(lodashEs.map(children, getPBlocks))]);
+  }
+  return lodashEs.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 = {};
+  lodashEs.each(globalBlocks, (projectBlock) => lodashEs.set(mappedBlocks, lodashEs.first(projectBlock).blockId, projectBlock));
+  return [pageBlocks, mappedBlocks];
+}
 const MODIFIERS = [
   "hover",
   "focus",
@@ -1695,10 +1634,9 @@ const useGetPageData = () => {
   const [projectOptions] = useBrandingOptions();
   const { currentPage } = useCurrentPage();
   const [presentBlocks] = useBlocksStore();
-  const getBlockAtomValue = useGetBlockAtomValue();
   return React.useCallback(() => {
     const blocks = lodashEs.map(presentBlocks, (block) => {
-      return lodashEs.omit(getBlockAtomValue(block._id), getBlockBuilderProps(block._type));
+      return lodashEs.omit(block, getBlockBuilderProps(block._type));
     });
     const [pageFilteredBlocks = []] = splitPageBlocks(blocks);
     return {
@@ -1826,8 +1764,230 @@ const useUndoManager = () => {
     clear: undoManager.clear
   };
 };
+const broadcastChannel = new BroadcastChannel("chaibuilder");
+const useBroadcastChannel = () => {
+  const pageId = useBuilderProp("pageId", "chaibuilder_page");
+  const postMessage = web.useDebouncedCallback(
+    (message) => broadcastChannel.postMessage({ ...message, pageId }),
+    [pageId],
+    200
+  );
+  return { postMessage };
+};
+const useUnmountBroadcastChannel = () => {
+  const [, setBlocks] = useBlocksStore();
+  const pageId = useBuilderProp("pageId", "chaibuilder_page");
+  const { updateBlocksProps } = useBlocksStoreManager();
+  React.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 = lodashEs.filter(blocks, (block) => {
+    if (lodashEs.includes(blockIds, block._id) || lodashEs.includes(blockIds, block._parent)) {
+      _blockIds.push(block._id);
+      return false;
+    }
+    return true;
+  });
+  if (!lodashEs.isEmpty(_blockIds)) return removeNestedBlocks(_blocks, _blockIds);
+  return _blocks;
+};
+const useRemoveBlocks = () => {
+  const [presentBlocks] = useBlocksStore();
+  const [ids2, setSelectedIds] = useSelectedBlockIds();
+  const { setNewBlocks } = useBlocksStoreUndoableActions();
+  return React.useCallback(
+    (blockIds) => {
+      var _a;
+      const parentBlockId = ((_a = lodashEs.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 = jotai.atom(
+  null,
+  // it's a convention to pass `null` for the first argument
+  (get, set, { id, props }) => {
+    const blockAsAtoms = get(pageBlocksAtomsAtom);
+    const blockAtom = lodashEs.find(blockAsAtoms, (b) => get(b)._id === id);
+    if (!blockAtom) {
+      throw new Error(`Block with id ${id} not found`);
+    }
+    return set(blockAtom, { ...get(blockAtom), ...props });
+  }
+);
+const useUpdateBlockAtom = () => {
+  return jotai.useSetAtom(writeAtomValue);
+};
+const useGetBlockAtomValue = (splitAtoms) => {
+  return useAtomCallback(
+    React.useCallback(
+      (get, _set, idOrAtom) => {
+        const blockAsAtoms = get(splitAtoms);
+        const blockAtom = lodashEs.find(
+          blockAsAtoms,
+          (b) => get(b)._id === (lodashEs.isString(idOrAtom) ? idOrAtom : get(idOrAtom)._id)
+        );
+        if (!blockAtom) {
+          throw new Error(`Block with id ${idOrAtom} not found`);
+        }
+        return get(blockAtom);
+      },
+      [splitAtoms]
+    )
+  );
+};
+const useGetBlockAtom = (splitAtoms) => {
+  return useAtomCallback(
+    React.useCallback(
+      (get, _set, idOrAtom) => {
+        const blockAsAtoms = get(splitAtoms);
+        const blockAtom = lodashEs.find(
+          blockAsAtoms,
+          (b) => get(b)._id === (lodashEs.isString(idOrAtom) ? idOrAtom : get(idOrAtom)._id)
+        );
+        if (!blockAtom) {
+          throw new Error(`Block with id ${idOrAtom} not found`);
+        }
+        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);
+        }
+        lodashEs.each(blockIds, (id) => {
+          const block = lodashEs.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 = lodashEs.omit(block, "_id");
+        updateBlockAtom({ id: block._id, props: updatedBlock });
+      });
+      postMessage({ type: "blocks-props-updated", blocks });
+    }
+  };
+};
 const useBlocksStore = () => {
-  return jotai.useAtom(pageBlocksAtom);
+  return jotai.useAtom(presentBlocksAtom);
 };
 const useBlocksStoreUndoableActions = () => {
   const { add } = useUndoManager();
@@ -1961,7 +2121,7 @@ const useAddBlock = () => {
         blocks[0]._parent = parentBlock._parent;
         parentBlockId = parentBlock._parent;
       }
-      addBlocks(convertToBlocksAtoms(blocks), parentBlockId, position);
+      addBlocks(blocks, parentBlockId, position);
       setSelected([(_a = lodashEs.first(blocks)) == null ? void 0 : _a._id]);
       return lodashEs.first(blocks);
     },
@@ -1993,7 +2153,7 @@ const useAddBlock = () => {
         parentBlockId = parentBlock._parent;
       }
       const newBlocks = [newBlock];
-      addBlocks(convertToBlocksAtoms(newBlocks), parentBlockId, position);
+      addBlocks(newBlocks, parentBlockId, position);
       setSelected([newBlock._id]);
       return newBlock;
     },
@@ -3191,9 +3351,12 @@ const selectedStylingBlocksAtom = jotai.atom([]);
 selectedStylingBlocksAtom.debugLabel = "selectedStylingBlocksAtom";
 const useSelectedStylingBlocks = () => jotai.useAtom(selectedStylingBlocksAtom);
 const addClassesToBlocksAtom = jotai.atom(null, (get, _set, { blockIds, newClasses }) => {
-  const blockAtoms = lodashEs.map(
-    lodashEs.filter(get(pageBlocksAtom), (block) => blockIds.includes(block._id)),
-    (block) => block._atom
+  const blockAtoms = lodashEs.filter(
+    get(pageBlocksAtomsAtom),
+    (blockAtom) => (
+      // @ts-ignore
+      blockIds.includes(get(blockAtom)._id)
+    )
   );
   const styleBlock = lodashEs.first(get(selectedStylingBlocksAtom));
   return lodashEs.map(blockAtoms, (blockAtom) => {
@@ -3307,7 +3470,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(lodashEs.get(newBlocks, "0._id", ""));
       });
       setSelected(newBlockIds);
@@ -3341,7 +3504,7 @@ const useCanPaste = () => {
   };
 };
 const useMoveCutBlocks = () => {
-  const presentBlocks = jotai.useAtomValue(pageBlocksAtom);
+  const presentBlocks = jotai.useAtomValue(presentBlocksAtom);
   const { moveBlocks: moveBlocks2 } = useBlocksStoreUndoableActions();
   return React.useCallback(
     (blockIds, newParentId) => {
@@ -3419,9 +3582,12 @@ const usePreviewMode = () => {
 };
 const removeClassFromBlocksAtom = jotai.atom(null, (get, _set, { blockIds, fullClasses }) => {
   const styleBlock = lodashEs.first(get(selectedStylingBlocksAtom));
-  const blockAtoms = lodashEs.map(
-    lodashEs.filter(get(pageBlocksAtom), (block) => blockIds.includes(block._id)),
-    (block) => block._atom
+  const blockAtoms = lodashEs.filter(
+    get(pageBlocksAtomsAtom),
+    (blockAtom) => (
+      // @ts-ignore
+      blockIds.includes(get(blockAtom)._id)
+    )
   );
   return lodashEs.map(blockAtoms, (blockAtom) => {
     const block = get(blockAtom);
@@ -3624,23 +3790,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 = React.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");
@@ -3653,7 +3823,7 @@ const globalBlocksStoreAtom = atom({});
 const globalBlocksLoadingStateAtom = atom({});
 const useGlobalBlocksStore = () => {
   const [globalBlocks, setGlobalBlocks] = useAtom(globalBlocksStoreAtom);
-  const getGlobalBlocks = React.useCallback((globalBlockId) => lodashEs.get(globalBlocks, globalBlockId, []), [globalBlocks]);
+  const getGlobalBlocks = React.useCallback((globalBlock) => lodashEs.get(globalBlocks, globalBlock, []), [globalBlocks]);
   const reset = React.useCallback(() => setGlobalBlocks({}), [setGlobalBlocks]);
   return { getGlobalBlocks, reset };
 };
@@ -3661,14 +3831,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 = React.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]);
   React.useEffect(() => {
     lodashEs.forEach(globalBlocksList, (globalBlock) => {
@@ -4070,7 +4236,7 @@ const useAiAssistant = () => {
 };
 const wrapperBlockAtom = jotai.atom((get) => {
   var _a;
-  const blocks = get(pageBlocksAtom);
+  const blocks = get(presentBlocksAtom);
   const blockIds = get(selectedBlockIdsAtom);
   const blockId = blockIds.length === 1 ? blockIds[0] : null;
   if (!blockId) return null;
@@ -4547,7 +4713,7 @@ const useHandleCanvasDblClick = () => {
   const updateContent = useUpdateBlocksProps();
   const [editingBlockId, setEditingBlockId] = jotai.useAtom(inlineEditingActiveAtom);
   const { clearHighlight } = useBlockHighlight();
-  const getBlockAtomValue = useGetBlockAtomValue();
+  const getBlockAtomValue = useGetBlockAtomValue(pageBlocksAtomsAtom);
   return React.useCallback(
     (e2) => {
       var _a;
@@ -4928,23 +5094,28 @@ const BlockRenderer = ({ blockAtom, children }) => {
 const GlobalBlocksRenderer = ({ blockAtom }) => {
   const { getGlobalBlocks } = useGlobalBlocksStore();
   const [block] = jotai.useAtom(blockAtom);
-  const globalBlocks = React.useMemo(() => getGlobalBlocks(block == null ? void 0 : block.globalBlock), [block == null ? void 0 : block.globalBlock, getGlobalBlocks]);
-  const globalBlocksAtoms = React.useMemo(() => convertToBlocksAtoms(globalBlocks), [globalBlocks]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BlocksRenderer, { blocks: globalBlocksAtoms, filterFn: (block2) => lodashEs.isEmpty(block2._parent) });
+  const globalBlocks = React.useMemo(() => getGlobalBlocks((block == null ? void 0 : block.globalBlock) ?? ""), [getGlobalBlocks, block == null ? void 0 : block.globalBlock]);
+  const blocksAtoms = React.useMemo(() => splitAtom(jotai.atom(globalBlocks)), [globalBlocks]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BlocksRenderer, { splitAtoms: blocksAtoms, blocks: globalBlocks });
 };
 const BlocksRenderer = ({
   blocks,
-  filterFn
+  parent = null,
+  splitAtoms = void 0
 }) => {
-  const filteredBlocks = React.useMemo(() => lodashEs.filter(blocks, filterFn), [blocks, filterFn]);
-  const hasChildren = (blockId) => lodashEs.filter(blocks, (b) => b._parent === blockId).length > 0;
+  const getAtomValue = useGetBlockAtom(splitAtoms);
+  const filteredBlocks = React.useMemo(
+    () => lodashEs.filter(blocks, (block) => lodashEs.isString(parent) ? block._parent === parent : !block._parent),
+    [blocks, parent]
+  );
+  const hasChildren = React.useCallback((block) => lodashEs.filter(blocks, (b) => b._parent === block._id).length > 0, [blocks]);
   return lodashEs.map(filteredBlocks, (block) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(BlockRenderer, { blockAtom: block._atom, children: block._type === "GlobalBlock" ? /* @__PURE__ */ jsxRuntime.jsx(GlobalBlocksRenderer, { blockAtom: block._atom }) : hasChildren(block._id) ? /* @__PURE__ */ jsxRuntime.jsx(BlocksRenderer, { blocks, filterFn: (b) => b._parent === block._id }) : null }, block._id);
+    return /* @__PURE__ */ jsxRuntime.jsx(BlockRenderer, { blockAtom: getAtomValue(block._id), children: block._type === "GlobalBlock" ? /* @__PURE__ */ jsxRuntime.jsx(GlobalBlocksRenderer, { blockAtom: getAtomValue(block._id) }) : hasChildren(block) ? /* @__PURE__ */ jsxRuntime.jsx(BlocksRenderer, { splitAtoms, blocks, parent: block._id }) : null }, block._id);
   });
 };
 const PageBlocksRenderer = () => {
   const [blocks] = useBlocksStore();
-  return /* @__PURE__ */ jsxRuntime.jsx(BlocksRenderer, { blocks, filterFn: (block) => lodashEs.isEmpty(block._parent) });
+  return /* @__PURE__ */ jsxRuntime.jsx(BlocksRenderer, { splitAtoms: pageBlocksAtomsAtom, blocks });
 };
 const StaticBlocksRenderer = () => {
   const [blocks] = useBlocksStore();
@@ -6156,7 +6327,7 @@ const JSONForm = React.memo(({ blockId, schema, uiSchema, formData, onChange })
       onChange({ formData: formData2 }, id);
     },
     [onChange, selectedLang],
-    400
+    1e3
     // save only every 5 seconds
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8929,7 +9100,8 @@ const ChaiBuilderBlocks = ({ groups, blocks, parentId, position, gridCols = "gri
             position,
             block,
             disabled: !canAcceptChildBlock(parentType, block.type) || !canBeNestedInside(parentType, block.type)
-          }
+          },
+          block.type
         ))
       ) })
     ] }, group)) }) })
@@ -10882,7 +11054,7 @@ const getParentNodeIds = (blocks, id) => {
 const expandedIdsAtom = jotai.atom([]);
 const useExpandTree = () => {
   const [ids2] = useSelectedBlockIds();
-  const pageBlocks = jotai.useAtomValue(pageBlocksAtom);
+  const pageBlocks = jotai.useAtomValue(presentBlocksAtom);
   const [, setExpandedIds] = jotai.useAtom(expandedIdsAtom);
   React.useEffect(() => {
     let expandedIds = [];
@@ -11523,7 +11695,7 @@ const ChaiBuilderComponent = (props) => {
   React.useEffect(() => {
     setTimeout(() => {
       const withDefaults = runtime.syncBlocksWithDefaults(props.blocks || []);
-      setAllBlocks(convertToBlocksAtoms(withDefaults));
+      setAllBlocks(withDefaults);
       if (withDefaults && withDefaults.length > 0) {
         postMessage({ type: "blocks-updated", blocks: withDefaults });
       }