@chaibuilder/sdk 2.0.0-beta.82 → 2.0.0-beta.84

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 ChaiThemeFn = require("./ChaiThemeFn-DcE5RdLQ.cjs");
 const TreeModel = require("tree-model");
+const ChaiThemeFn = require("./ChaiThemeFn-DcE5RdLQ.cjs");
 const reactHotkeysHook = require("react-hotkeys-hook");
 const lucideReact = require("lucide-react");
 const ReactQuill = require("react-quill");
@@ -586,141 +586,6 @@ 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 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 = keyExtractor(item);
-          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,
-    keyExtractor
-  );
-}
 const isPromiseLike$1 = (x) => typeof (x == null ? void 0 : x.then) === "function";
 function createJSONStorage(getStringStorage = () => {
   try {
@@ -1113,61 +978,10 @@ __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 } });
@@ -1232,15 +1046,21 @@ const getDuplicatedBlocks = (currentBlocks, id, newParentId = null) => {
     return lodashEs.omit(newBlock, ["global", "oldId"]);
   });
 };
-const presentBlocksAtom = jotai.atom([]);
-presentBlocksAtom.debugLabel = "presentBlocksAtom";
+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 treeDSBlocks = jotai.atom((get) => {
-  const presentBlocks = get(presentBlocksAtom);
-  return convertToBlocksTree([...presentBlocks]);
+  const presentBlocks = get(pageBlocksAtom).map((block) => get(block._atom));
+  return convertToBlocksTree(presentBlocks);
 });
 treeDSBlocks.debugLabel = "treeDSBlocks";
-const pageBlocksAtomsAtom = splitAtom(presentBlocksAtom, (block) => block._id);
-pageBlocksAtomsAtom.debugLabel = "pageBlocksAtomsAtom";
 const builderActivePageAtom = jotai.atom("");
 builderActivePageAtom.debugLabel = "builderActivePageAtom";
 const destinationDropIndexAtom = jotai.atom(-1);
@@ -1252,10 +1072,87 @@ 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(presentBlocksAtom);
+  const blocks = get(pageBlocksAtom);
   const blockIds = get(selectedBlockIdsAtom);
   return lodashEs.map(
     lodashEs.filter(blocks, ({ _id }) => lodashEs.includes(blockIds, _id)),
@@ -1269,7 +1166,7 @@ const selectedBlockAtom = jotai.atom((get) => {
     return null;
   }
   if (blocks.length === 1) {
-    return blocks[0];
+    return get(lodashEs.first(blocks)._atom);
   }
 });
 selectedBlockAtom.debugLabel = "selectedBlockAtom";
@@ -1277,7 +1174,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(presentBlocksAtom), (block) => lodashEs.includes(parentIds, block._id));
+  return lodashEs.filter(get(pageBlocksAtom), (block) => lodashEs.includes(parentIds, block._id));
 });
 selectedBlocksParentsAtom.debugLabel = "selectedBlocksParentsAtom";
 const selectedBlockFlexChildAtom = jotai.atom(() => {
@@ -1299,7 +1196,7 @@ const useSelectedBlocksDisplayChild = () => ({
 const useSelectedBlock = () => jotai.useAtomValue(selectedBlockAtom);
 const selectedBlockHierarchy = jotai.atom((get) => {
   const selectedBlock = get(selectedBlockAtom);
-  const allBlocks = get(presentBlocksAtom);
+  const allBlocks = get(pageBlocksAtom);
   let block = selectedBlock;
   const blocks = [selectedBlock];
   do {
@@ -1325,6 +1222,241 @@ 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 useUpdateBlockAtom = () => {
+  return useAtomCallback(
+    React.useCallback((get, set, { id, props }) => {
+      const blockAsAtoms = get(pageBlocksAtom);
+      const blockAtom = lodashEs.find(blockAsAtoms, (b) => b._id === id);
+      if (!blockAtom) {
+        console.warn(`Block with id ${id} not found`);
+        return;
+      }
+      return set(blockAtom._atom, { ...get(blockAtom._atom), ...props });
+    }, [])
+  );
+};
+const useGetBlockAtomValue = () => {
+  return useAtomCallback(
+    React.useCallback((get, _set, id) => {
+      const blockAsAtoms = get(pageBlocksAtom);
+      const blockAtom = lodashEs.find(blockAsAtoms, (b) => b._id === id);
+      if (!blockAtom) {
+        console.warn(`Block with id ${id} not found`);
+        return;
+      }
+      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() {
@@ -1480,79 +1612,6 @@ function requireUndomanager() {
 }
 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",
@@ -1633,9 +1692,10 @@ 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(block, getBlockBuilderProps(block._type));
+      return lodashEs.omit(getBlockAtomValue(block._id), getBlockBuilderProps(block._type));
     });
     const [pageFilteredBlocks = []] = splitPageBlocks(blocks);
     return {
@@ -1763,190 +1823,8 @@ const useUndoManager = () => {
     clear: undoManager.clear
   };
 };
-const useAtomSetterCb = () => {
-  return useAtomCallback(
-    React.useCallback((get, set, id) => {
-      const blockAtoms = get(pageBlocksAtomsAtom);
-      const blockAtom = lodashEs.find(blockAtoms, (atom2) => get(atom2)._id === id);
-      if (!blockAtom) return (_props) => void 0;
-      return (props) => set(blockAtom, { ...get(blockAtom), ...props });
-    }, [])
-  );
-};
-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]
-  );
-};
-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 atomSetterCb = useAtomSetterCb();
-  const updateAtomProps = React.useCallback(
-    (id, props) => {
-      const setter = atomSetterCb(id);
-      setter({ ...props });
-    },
-    [atomSetterCb]
-  );
-  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);
-        }
-        postMessage({ type: "blocks-updated", blocks });
-        return blocks;
-      });
-    },
-    updateBlocksProps: (blocks) => {
-      blocks.forEach((block) => {
-        const updatedBlock = lodashEs.omit(block, "_id");
-        updateAtomProps(block._id, updatedBlock);
-      });
-      postMessage({ type: "blocks-props-updated", blocks });
-    }
-  };
-};
 const useBlocksStore = () => {
-  return jotai.useAtom(presentBlocksAtom);
+  return jotai.useAtom(pageBlocksAtom);
 };
 const useBlocksStoreUndoableActions = () => {
   const { add } = useUndoManager();
@@ -2080,7 +1958,7 @@ const useAddBlock = () => {
         blocks[0]._parent = parentBlock._parent;
         parentBlockId = parentBlock._parent;
       }
-      addBlocks(blocks, parentBlockId, position);
+      addBlocks(convertToBlocksAtoms(blocks), parentBlockId, position);
       setSelected([(_a = lodashEs.first(blocks)) == null ? void 0 : _a._id]);
       return lodashEs.first(blocks);
     },
@@ -2112,7 +1990,7 @@ const useAddBlock = () => {
         parentBlockId = parentBlock._parent;
       }
       const newBlocks = [newBlock];
-      addBlocks(newBlocks, parentBlockId, position);
+      addBlocks(convertToBlocksAtoms(newBlocks), parentBlockId, position);
       setSelected([newBlock._id]);
       return newBlock;
     },
@@ -3310,12 +3188,9 @@ const selectedStylingBlocksAtom = jotai.atom([]);
 selectedStylingBlocksAtom.debugLabel = "selectedStylingBlocksAtom";
 const useSelectedStylingBlocks = () => jotai.useAtom(selectedStylingBlocksAtom);
 const addClassesToBlocksAtom = jotai.atom(null, (get, _set, { blockIds, newClasses }) => {
-  const blockAtoms = lodashEs.filter(
-    get(pageBlocksAtomsAtom),
-    (blockAtom) => (
-      // @ts-ignore
-      blockIds.includes(get(blockAtom)._id)
-    )
+  const blockAtoms = lodashEs.map(
+    lodashEs.filter(get(pageBlocksAtom), (block) => blockIds.includes(block._id)),
+    (block) => block._atom
   );
   const styleBlock = lodashEs.first(get(selectedStylingBlocksAtom));
   return lodashEs.map(blockAtoms, (blockAtom) => {
@@ -3429,7 +3304,7 @@ const useDuplicateBlocks = () => {
         const blockPosition = siblingBlocks.indexOf(block);
         const newBlockPosition = blockPosition + 1;
         const newBlocks = getDuplicatedBlocks(presentBlocks, blockId, parentId);
-        addBlocks(newBlocks, parentId, newBlockPosition);
+        addBlocks(convertToBlocksAtoms(newBlocks), parentId, newBlockPosition);
         newBlockIds.push(lodashEs.get(newBlocks, "0._id", ""));
       });
       setSelected(newBlockIds);
@@ -3463,7 +3338,7 @@ const useCanPaste = () => {
   };
 };
 const useMoveCutBlocks = () => {
-  const presentBlocks = jotai.useAtomValue(presentBlocksAtom);
+  const presentBlocks = jotai.useAtomValue(pageBlocksAtom);
   const { moveBlocks: moveBlocks2 } = useBlocksStoreUndoableActions();
   return React.useCallback(
     (blockIds, newParentId) => {
@@ -3541,12 +3416,9 @@ const usePreviewMode = () => {
 };
 const removeClassFromBlocksAtom = jotai.atom(null, (get, _set, { blockIds, fullClasses }) => {
   const styleBlock = lodashEs.first(get(selectedStylingBlocksAtom));
-  const blockAtoms = lodashEs.filter(
-    get(pageBlocksAtomsAtom),
-    (blockAtom) => (
-      // @ts-ignore
-      blockIds.includes(get(blockAtom)._id)
-    )
+  const blockAtoms = lodashEs.map(
+    lodashEs.filter(get(pageBlocksAtom), (block) => blockIds.includes(block._id)),
+    (block) => block._atom
   );
   return lodashEs.map(blockAtoms, (blockAtom) => {
     const block = get(blockAtom);
@@ -3778,25 +3650,22 @@ const globalBlocksStoreAtom = atom({});
 const globalBlocksLoadingStateAtom = atom({});
 const useGlobalBlocksStore = () => {
   const [globalBlocks, setGlobalBlocks] = useAtom(globalBlocksStoreAtom);
-  const getGlobalBlocks = React.useCallback(
-    (block) => {
-      return lodashEs.get(globalBlocks, block == null ? void 0 : block.globalBlock, []);
-    },
-    [globalBlocks]
-  );
-  const reset = React.useCallback(() => {
-    setGlobalBlocks({});
-  }, [setGlobalBlocks]);
+  const getGlobalBlocks = React.useCallback((globalBlockId) => lodashEs.get(globalBlocks, globalBlockId, []), [globalBlocks]);
+  const reset = React.useCallback(() => setGlobalBlocks({}), [setGlobalBlocks]);
   return { getGlobalBlocks, reset };
 };
 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) => block.globalBlock);
+    return globalBlocks2.filter((block) => block._type === "GlobalBlock").map((block) => {
+      const blockValue = getBlockAtomValue(block._id);
+      return blockValue.globalBlock;
+    });
   }, [blocksStore]);
   React.useEffect(() => {
     lodashEs.forEach(globalBlocksList, (globalBlock) => {
@@ -4198,7 +4067,7 @@ const useAiAssistant = () => {
 };
 const wrapperBlockAtom = jotai.atom((get) => {
   var _a;
-  const blocks = get(presentBlocksAtom);
+  const blocks = get(pageBlocksAtom);
   const blockIds = get(selectedBlockIdsAtom);
   const blockId = blockIds.length === 1 ? blockIds[0] : null;
   if (!blockId) return null;
@@ -4675,10 +4544,10 @@ const useHandleCanvasDblClick = () => {
   const updateContent = useUpdateBlocksProps();
   const [editingBlockId, setEditingBlockId] = jotai.useAtom(inlineEditingActiveAtom);
   const { clearHighlight } = useBlockHighlight();
-  const [blocks] = useBlocksStore();
+  const getBlockAtomValue = useGetBlockAtomValue();
   return React.useCallback(
     (e2) => {
-      var _a, _b;
+      var _a;
       if (editingBlockId) return;
       const chaiBlock = getTargetedBlock(e2.target);
       const blockType = chaiBlock.getAttribute("data-block-type");
@@ -4686,7 +4555,7 @@ const useHandleCanvasDblClick = () => {
         return;
       }
       const blockId = chaiBlock.getAttribute("data-block-id");
-      const content = (_a = lodashEs.find(blocks, { _id: blockId })) == null ? void 0 : _a.content;
+      const content = getBlockAtomValue(blockId)["content"];
       const newBlock = chaiBlock.cloneNode(true);
       newBlock.innerHTML = content;
       chaiBlock.style.display = "none";
@@ -4718,10 +4587,10 @@ const useHandleCanvasDblClick = () => {
         }
       });
       quill.focus();
-      (_b = newBlock.querySelector(".ql-clipboard")) == null ? void 0 : _b.remove();
+      (_a = newBlock.querySelector(".ql-clipboard")) == null ? void 0 : _a.remove();
       setEditingBlockId(chaiBlock.getAttribute("data-block-id"));
     },
-    [editingBlockId, blocks, setEditingBlockId, updateContent, clearHighlight]
+    [editingBlockId, setEditingBlockId, updateContent, clearHighlight]
   );
 };
 const useHandleCanvasClick = () => {
@@ -5015,7 +4884,8 @@ const useBlockRuntimeProps = () => {
     [allBlocks]
   );
 };
-const BlockRenderer = ({ block, children }) => {
+const BlockRenderer = ({ blockAtom, children }) => {
+  const [block] = jotai.useAtom(blockAtom);
   const registeredChaiBlock = React.useMemo(() => runtime.getRegisteredChaiBlock(block._type), [block._type]);
   const { selectedLang, fallbackLang } = useLanguages();
   const getRuntimePropValues = useBlockRuntimeProps();
@@ -5052,16 +4922,21 @@ const BlockRenderer = ({ block, children }) => {
   if (lodashEs.isNull(Component2) || hiddenBlocks.includes(block._id) || editingBlockId === block._id) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { children: React.createElement(Component2, { ...props, children }) });
 };
-const GlobalBlocksRenderer = ({ block }) => {
+const GlobalBlocksRenderer = ({ blockAtom }) => {
   const { getGlobalBlocks } = useGlobalBlocksStore();
-  const globalBlocks = getGlobalBlocks(block);
-  return /* @__PURE__ */ jsxRuntime.jsx(BlocksRenderer, { blocks: globalBlocks, filterFn: (block2) => lodashEs.isEmpty(block2._parent) });
-};
-const BlocksRenderer = ({ blocks, filterFn }) => {
+  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 BlocksRenderer = ({
+  blocks,
+  filterFn
+}) => {
   const filteredBlocks = React.useMemo(() => lodashEs.filter(blocks, filterFn), [blocks, filterFn]);
   const hasChildren = (blockId) => lodashEs.filter(blocks, (b) => b._parent === blockId).length > 0;
   return lodashEs.map(filteredBlocks, (block) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(BlockRenderer, { block, children: block._type === "GlobalBlock" ? /* @__PURE__ */ jsxRuntime.jsx(GlobalBlocksRenderer, { block }) : hasChildren(block._id) ? /* @__PURE__ */ jsxRuntime.jsx(BlocksRenderer, { blocks, filterFn: (b) => b._parent === block._id }) : null }, block._id);
+    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);
   });
 };
 const PageBlocksRenderer = () => {
@@ -6278,7 +6153,7 @@ const JSONForm = React.memo(({ blockId, schema, uiSchema, formData, onChange })
       onChange({ formData: formData2 }, id);
     },
     [onChange, selectedLang],
-    1e3
+    400
     // save only every 5 seconds
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -11004,7 +10879,7 @@ const getParentNodeIds = (blocks, id) => {
 const expandedIdsAtom = jotai.atom([]);
 const useExpandTree = () => {
   const [ids2] = useSelectedBlockIds();
-  const pageBlocks = jotai.useAtomValue(presentBlocksAtom);
+  const pageBlocks = jotai.useAtomValue(pageBlocksAtom);
   const [, setExpandedIds] = jotai.useAtom(expandedIdsAtom);
   React.useEffect(() => {
     let expandedIds = [];
@@ -11645,7 +11520,7 @@ const ChaiBuilderComponent = (props) => {
   React.useEffect(() => {
     setTimeout(() => {
       const withDefaults = runtime.syncBlocksWithDefaults(props.blocks || []);
-      setAllBlocks(withDefaults);
+      setAllBlocks(convertToBlocksAtoms(withDefaults));
       if (withDefaults && withDefaults.length > 0) {
         postMessage({ type: "blocks-updated", blocks: withDefaults });
       }